Merge branch 'frontend' into mayu-QRcode

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/format.yml

@@ -0,0 +1,35 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: format and commit when PR
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  frontend:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    defaults:
+      run:
+        working-directory: ./frontend
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          ref: ${{ github.head_ref }}
+      - name: Install package
+        run: yarn install --frozen-lockfile
+      - name: Run formatter
+        run: yarn run format
+      - name: Build test
+        run: yarn run build
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: applied prettier

frontend/package.json

@@ -37,7 +37,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "format": "prettier --write --ignore-path .gitignore \"./**/*.{js,jsx,ts,tsx,json,css,scss}\""
   },
   "eslintConfig": {
     "extends": [
@@ -56,5 +56,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.4.1"
   }
 }

frontend/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'none',
+  semi: false,
+  tabWidth: 2,
+  htmlWhitespaceSensitivity: 'ignore',
+  printWidth: 100
+}

frontend/src/App.js

@@ -1,10 +1,9 @@
-import React from "react";
-import { BrowserRouter, Switch, Route } from "react-router-dom";
-import AppContextProvider from "./contexts/AppContext";
-import Home from "./pages/Home";
-import Signup from "./pages/Signup";
-
-import { ChakraProvider } from "@chakra-ui/react";
+import React from 'react'
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import AppContextProvider from './contexts/AppContext'
+import Home from './pages/Home'
+import Signup from './pages/Signup'
+import { ChakraProvider } from '@chakra-ui/react'
 
 function App() {
   return (
@@ -16,7 +15,7 @@ function App() {
         </Switch>
       </BrowserRouter>
     </div>
-  );
+  )
 }
 
 const AppContainer = () => {
@@ -26,7 +25,7 @@ const AppContainer = () => {
         <App />
       </AppContextProvider>
     </ChakraProvider>
-  );
-};
+  )
+}
 
-export default AppContainer;
+export default AppContainer

frontend/src/App.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})

frontend/src/contexts/AppContext.js

@@ -1,35 +1,35 @@
-import React, { createContext, useEffect, useState } from "react";
-import { getUserIdFromLocalStorage, storageAvailable } from "../utils/storage";
+import React, { createContext, useEffect, useState } from 'react'
+import { getUserIdFromLocalStorage, storageAvailable } from '../utils/storage'
 
-export const AuthContext = createContext();
+export const AuthContext = createContext()
 
 const AppContextProvider = ({ children }) => {
-  const [initialLoading, setInitialLoading] = useState(true);
-  const [localStorageAvailable, setLocalStorageAvailable] = useState(false);
-  const [userId, setUserId] = useState(undefined);
+  const [initialLoading, setInitialLoading] = useState(true)
+  const [localStorageAvailable, setLocalStorageAvailable] = useState(false)
+  const [userId, setUserId] = useState(undefined)
   useEffect(() => {
     if (storageAvailable()) {
-      setLocalStorageAvailable(true);
-      let id = getUserIdFromLocalStorage();
+      setLocalStorageAvailable(true)
+      let id = getUserIdFromLocalStorage()
       if (!id) {
         // TODO: なまえを入力してIDを取得して保存しておく
       }
     }
-    setInitialLoading(false);
-  }, []);
+    setInitialLoading(false)
+  }, [])
   return (
     <AuthContext.Provider
       value={{
         userId,
         setUserId,
         initialLoading,
         setInitialLoading,
-        localStorageAvailable,
+        localStorageAvailable
       }}
     >
       {children}
     </AuthContext.Provider>
-  );
-};
+  )
+}
 
-export default AppContextProvider;
+export default AppContextProvider

frontend/src/index.js

@@ -1,23 +1,23 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.scss";
-import App from "./App";
-import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
-import reportWebVitals from "./reportWebVitals";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.scss'
+import App from './App'
+import * as serviceWorkerRegistration from './serviceWorkerRegistration'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
-);
+  document.getElementById('root')
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.unregister();
+serviceWorkerRegistration.unregister()
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

frontend/src/index.scss

@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

frontend/src/pages/Home.js

@@ -1,5 +1,5 @@
-import styles from "../styles/Home.module.scss";
-import maskPic from "../assets/mask.png";
+import styles from '../styles/Home.module.scss'
+import maskPic from '../assets/mask.png'
 import {
   Box,
   HStack,
@@ -35,7 +35,7 @@ const Home = () => {
           <Button variant="ghost" onClick={onOpen}>
             <BsPersonPlus size={25} />
           </Button>
-          <Modal isOpen={isOpen} onClose={onClose} size={"sm"}>
+          <Modal isOpen={isOpen} onClose={onClose} size={'sm'}>
             <ModalOverlay />
             <ModalContent>
               <ModalHeader>マイ QR コード</ModalHeader>
@@ -54,36 +54,18 @@ const Home = () => {
           </Modal>
         </HStack>
         <hr className={styles.border} />
-        <Box
-          boxShadow="xs"
-          w="100%"
-          p={3}
-          marginBottom="1.5px"
-          _hover={{ background: "gray.200" }}
-        >
+        <Box boxShadow="xs" w="100%" p={3} marginBottom="1.5px" _hover={{ background: 'gray.200' }}>
           <p className={styles.friendName}>山田　太郎</p>
         </Box>
-        <Box
-          boxShadow="xs"
-          w="100%"
-          p={3}
-          marginBottom="1.5px"
-          _hover={{ background: "gray.200" }}
-        >
+        <Box boxShadow="xs" w="100%" p={3} marginBottom="1.5px" _hover={{ background: 'gray.200' }}>
           <p className={styles.friendName}>aaaaaaaa</p>
         </Box>
-        <Box
-          boxShadow="xs"
-          w="100%"
-          p={3}
-          marginBottom="1.5px"
-          _hover={{ background: "gray.200" }}
-        >
+        <Box boxShadow="xs" w="100%" p={3} marginBottom="1.5px" _hover={{ background: 'gray.200' }}>
           <p className={styles.friendName}>bbbbbbbb</p>
         </Box>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Home;
+export default Home

frontend/src/pages/Signup.js

@@ -24,6 +24,6 @@ const Signup = () => {
         Create account
       </Button>
     </div>
-  );
-};
-export default Signup;
+  )
+}
+export default Signup

frontend/src/reportWebVitals.js

@@ -1,13 +1,13 @@
 const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals