Merge pull request #260 from git-baboo/develop

本番リリース

.eslintrc.json

@@ -20,6 +20,7 @@
         "newlines-between": "always"
       }
     ],
+    "react/jsx-curly-brace-presence": "error",
     "react-hooks/exhaustive-deps": "off",
     "@next/next/no-document-import-in-page": "off"
   }

.github/workflows/test.yml

@@ -0,0 +1,21 @@
+name: Test
+
+on: pull_request
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - uses: actions/cache@v2
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          restore-keys: ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --prefer-offline
+      - name: Run test
+        run: yarn test

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  roots: ["<rootDir>/src"],
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest",
+  },
+  globals: {
+    "ts-jest": {
+      tsconfig: "<rootDir>/tsconfig.jest.json",
+    },
+  },
+  moduleDirectories: ["node_modules", "<rootDir>"],
+  testPathIgnorePatterns: ["/node_modules", "<rootDir>/src/tests/testUtils"],
+  moduleNameMapper: {
+    "@/(.*)": "<rootDir>/src/$1",
+  },
+  setupFilesAfterEnv: ["@testing-library/jest-dom"],
+};

package.json

@@ -6,7 +6,8 @@
     "build": "next build && next export",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write src/**"
+    "format": "prettier --write src/**",
+    "test": "jest"
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
@@ -27,19 +28,26 @@
     "react-syntax-highlighter": "^15.4.5",
     "recoil": "^0.5.2",
     "recoil-persist": "^4.0.0",
+    "refractor": "3",
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
     "@types/node": "16.11.10",
     "@types/react": "17.0.37",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/recoil": "^0.0.9",
+    "@types/refractor": "^3.0.2",
     "eslint": "7",
     "eslint-config-next": "^12.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "jest": "^27.5.0",
+    "jest-dom": "^4.0.0",
     "prettier": "^2.4.1",
+    "ts-jest": "^27.1.3",
     "typescript": "4.5.2"
   }
 }

src/components/AuthProvider.tsx

@@ -0,0 +1,40 @@
+import { User } from "firebase/auth";
+import { createContext, useEffect, useState } from "react";
+
+import { auth } from "@/utils/firebase";
+
+type AuthContextProps = {
+  currentUser: User | null | undefined;
+  signInCheck: boolean;
+};
+
+const AuthContext = createContext<AuthContextProps>({
+  currentUser: undefined,
+  signInCheck: false,
+});
+
+const AuthProvider = ({ children }: { children: JSX.Element }) => {
+  const [currentUser, setCurrentUser] = useState<User | null | undefined>(
+    undefined
+  );
+  const [signInCheck, setSignInCheck] = useState<boolean>(false);
+
+  useEffect(() => {
+    auth.onAuthStateChanged(async (user) => {
+      if (user) {
+        setCurrentUser(user);
+        setSignInCheck(true);
+      } else {
+        setSignInCheck(true);
+      }
+    });
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ currentUser, signInCheck }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export { AuthContext, AuthProvider };

src/components/CustomMenuItem.tsx

@@ -0,0 +1,34 @@
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { Flex, MenuItem, MenuItemProps, Text } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+import { HSpacer } from "@/components/Spacer";
+
+type CustomProps = {
+  isExternal?: boolean;
+  children: ReactNode;
+};
+
+type Props = CustomProps & MenuItemProps;
+
+const CustomMenuItem = ({
+  isExternal = false,
+  children,
+  ...menuItemProps
+}: Props) => {
+  return (
+    <MenuItem {...menuItemProps}>
+      <Flex justify="space-between" align="center">
+        <Text>{children}</Text>
+        {isExternal && (
+          <>
+            <HSpacer size={2} />
+            <ExternalLinkIcon color="gray.500" />
+          </>
+        )}
+      </Flex>
+    </MenuItem>
+  );
+};
+
+export default CustomMenuItem;

src/components/Layout.tsx

@@ -1,8 +1,25 @@
-import { Text, Icon, Flex, HStack, Box } from "@chakra-ui/react";
+import { HamburgerIcon } from "@chakra-ui/icons";
+import {
+  Text,
+  Icon,
+  Flex,
+  Spacer,
+  Menu,
+  MenuButton,
+  IconButton,
+  MenuList,
+  MenuGroup,
+  MenuDivider,
+} from "@chakra-ui/react";
 import React, { ReactNode } from "react";
 import { IconType } from "react-icons";
+import { BiCommentDetail } from "react-icons/bi";
+import { MdOutlineLogout, MdOutlinePrivacyTip } from "react-icons/md";
+import { RiServiceLine } from "react-icons/ri";
 
-import Menu from "@/components/Menu";
+import CustomMenuItem from "@/components/CustomMenuItem";
+import { HSpacer } from "@/components/Spacer";
+import { useAuth } from "@/hooks/useAuth";
 
 type Props = {
   text: string;
@@ -11,26 +28,83 @@ type Props = {
 };
 
 const Layout = ({ text, icon, children }: Props) => {
+  const { logout } = useAuth();
+
   return (
     <>
-      <Flex alignItems="center" pl={20} pr={3} h={36} bg="teal.500">
-        <HStack w="100%" h="100%">
-          <HStack w="90%" alignItems="start">
-            <Icon mt={1} as={icon} boxSize={6} color="teal.600" />
-            <Text
-              fontSize="lg"
-              lineHeight={7}
-              fontWeight="semibold"
-              color="white"
-              whiteSpace="pre-line"
-            >
-              {text}
-            </Text>
-          </HStack>
-          <Box h="100%" w="10%" align="right">
-            <Menu />
-          </Box>
-        </HStack>
+      <Flex bgColor="teal.500" h={36}>
+        <HSpacer size={16} />
+        <Flex alignSelf="center">
+          <Icon as={icon} boxSize={6} color="teal.600" />
+          <HSpacer size={1} />
+          <Text
+            fontSize="lg"
+            fontWeight="semibold"
+            color="white"
+            whiteSpace="pre-line"
+          >
+            {text}
+          </Text>
+        </Flex>
+
+        <Spacer />
+
+        <Menu>
+          <MenuButton
+            as={IconButton}
+            icon={<HamburgerIcon w={6} h={6} />}
+            color="white"
+            colorScheme="ghost"
+            _focus={{ boxShadow: "none" }}
+          />
+          <MenuList>
+            <MenuGroup>
+              <CustomMenuItem
+                icon={<RiServiceLine size="1.2rem" />}
+                isExternal
+                onClick={() =>
+                  window.open(
+                    "https://www.kiyac.app/termsOfService/uJBSYhgVE6HYcxs7gklF"
+                  )
+                }
+              >
+                利用規約
+              </CustomMenuItem>
+              <CustomMenuItem
+                icon={<MdOutlinePrivacyTip size="1.2rem" />}
+                isExternal
+                onClick={() => {
+                  window.open(
+                    "https://www.kiyac.app/privacypolicy/pPYhCNHmkxjkZewFkatd"
+                  );
+                }}
+              >
+                プライバシーポリシー
+              </CustomMenuItem>
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup>
+              <CustomMenuItem
+                icon={<BiCommentDetail size="1.2rem" />}
+                isExternal
+                onClick={() => {
+                  window.open("https://forms.gle/W4s7xqEiAeskEof38");
+                }}
+              >
+                フィードバック
+              </CustomMenuItem>
+            </MenuGroup>
+            <MenuDivider />
+            <MenuGroup>
+              <CustomMenuItem
+                icon={<MdOutlineLogout size="1.2rem" />}
+                onClick={logout}
+              >
+                ログアウト
+              </CustomMenuItem>
+            </MenuGroup>
+          </MenuList>
+        </Menu>
       </Flex>
       {children}
     </>

src/components/login/LoginButton.tsx

@@ -1,18 +1,20 @@
 import { Button } from "@chakra-ui/react";
-import React from "react";
+import React, { useContext } from "react";
 import { DiGithubBadge } from "react-icons/di";
 
+import { AuthContext } from "@/components/AuthProvider";
 import { useAuth } from "@/hooks/useAuth";
 
 const LoginButton = () => {
+  const { signInCheck } = useContext(AuthContext);
   const { login } = useAuth();
 
   return (
     <Button
       leftIcon={<DiGithubBadge color="black" size={25} />}
       bgColor="white"
       color="black"
-      mt={8}
+      isLoading={!signInCheck}
       onClick={login}
     >
       ログイン

src/components/review/CommentListItem.tsx

@@ -1,5 +1,5 @@
 import { Avatar } from "@chakra-ui/avatar";
-import { Grid, GridItem, ListItem, Text } from "@chakra-ui/layout";
+import { Grid, GridItem, Text, Box } from "@chakra-ui/layout";
 import ChakraUIRenderer from "chakra-ui-markdown-renderer";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -14,7 +14,7 @@ type Props = {
 
 const CommentListItem = ({ author, avatarUrl, body }: Props) => {
   return (
-    <ListItem m={2} p={4} border="1px" borderRadius="md" borderColor="gray.300">
+    <Box p={4} border="1px" borderRadius="md" borderColor="gray.300">
       <Grid templateColumns="auto 1fr" gap={2} alignItems="center">
         <GridItem>
           <Avatar size="sm" name={author} src={avatarUrl} />
@@ -32,7 +32,7 @@ const CommentListItem = ({ author, avatarUrl, body }: Props) => {
           </ReactMarkdown>
         </GridItem>
       </Grid>
-    </ListItem>
+    </Box>
   );
 };