update nickname

digitech-ymg · Dec 10, 2022 · 20a3336 · 20a3336
1 parent 46623cd
commit 20a3336
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "emu:export": "firebase emulators:export --force ./data/"
   },
   "dependencies": {
+    "@chakra-ui/icon": "^3.0.13",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11",

diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
@@ -1,10 +1,8 @@
 import { createContext, useEffect, useState, useContext, ReactNode } from "react";
 import { onAuthStateChanged } from "@firebase/auth";
 import { User } from "@/types/User";
-import { doc, getDoc } from "@firebase/firestore";
-import { db } from "@/lib/firestore";
+import { getUser, updateUser } from "@/lib/firestore";
 import { auth } from "@/lib/authentication";
-import { setDoc } from "@firebase/firestore";
 
 type UserContextType = User | null | undefined;
 
@@ -16,21 +14,18 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
       if (firebaseUser) {
-        const ref = doc(db, `users/${firebaseUser.uid}`);
-        const snap = await getDoc(ref);
+        let appUser = await getUser(firebaseUser.uid);
 
-        if (snap.exists()) {
-          const appUser = (await getDoc(ref)).data() as User;
+        if (appUser) {
           setUser(appUser);
         } else {
-          const appUser: User = {
+          appUser = {
             id: firebaseUser.uid,
-            // 初回登校時に直接入力してもらう（過去と同じニックネームの入力を期待する）
-            nickname: firebaseUser.displayName || "",
+            nickname: firebaseUser.displayName || "(未設定)",
             photoURL: firebaseUser.photoURL!,
             createdAt: new Date(),
           };
-          setDoc(ref, appUser).then(() => setUser(appUser));
+          updateUser(appUser).then(() => setUser(appUser));
         }
       } else {
         setUser(null);

diff --git a/src/lib/firestore.ts b/src/lib/firestore.ts
@@ -4,6 +4,7 @@ import {
   collection,
   doc,
   getDocs,
+  getDoc,
   setDoc,
   query,
   orderBy,
@@ -202,7 +203,14 @@ const userConverter = {
   },
 };
 
-export const updateUser = async (user: User): Promise<void> => {
+export const getUser = async (id: string): Promise<User> => {
+  const ref = doc(db, `users/${id}`).withConverter(userConverter);
+  const snapshot = await getDoc(ref);
+  return snapshot.data() as User;
+};
+
+export const updateUser = async (user: User): Promise<User> => {
   const ref = doc(db, "users", user.id).withConverter(userConverter);
-  return await setDoc(ref, user);
+  await setDoc(ref, user);
+  return Promise.resolve(user);
 };
diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx
@@ -3,6 +3,12 @@ import {
   Container,
   Heading,
   Text,
+  Editable,
+  EditablePreview,
+  EditableInput,
+  Input,
+  ButtonGroup,
+  IconButton,
   Box,
   Link,
   Button,
@@ -14,15 +20,18 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
+  Spacer,
 } from "@chakra-ui/react";
-import { Icon } from "@chakra-ui/icons";
+import { useEditableControls } from "@chakra-ui/editable";
+import { CheckIcon, CloseIcon, EditIcon, Icon } from "@chakra-ui/icons";
 import { StarIcon, ArrowRightIcon } from "@chakra-ui/icons";
 import { useAuthContext } from "@/context/AuthContext";
 import { useEffect, useState } from "react";
 import { MypageInfo } from "@/types/User";
 import { login } from "@/lib/authentication";
 import { useRouter } from "next/router";
 import { mypageInfos2022 } from "@/data/mypage";
+import { updateUser } from "@/lib/firestore";
 
 type Props = {
   mypageInfos: MypageInfo[];
@@ -34,22 +43,50 @@ const Mypage = ({ mypageInfos }: Props) => {
 
   const [mypageInfo, setMypageInfo] = useState<MypageInfo | undefined>(undefined);
 
+  const updateMypageInfo = (nickname: string) => {
+    const existing = mypageInfos.find((m) => m.nickname === nickname);
+    if (existing) {
+      setMypageInfo(existing);
+    } else {
+      setMypageInfo({
+        nickname: user.nickname,
+        title: "期待の新人サポーター",
+        titleDescription: "投稿数が0件の方に贈られる称号です",
+        postTimes: 0,
+      });
+    }
+  };
+
   useEffect(() => {
     if (user) {
-      const existing = mypageInfos.find((m) => m.nickname === user.nickname);
-      if (existing) {
-        setMypageInfo(existing);
-      } else {
-        setMypageInfo({
-          nickname: user.nickname,
-          title: "期待の新人サポーター",
-          titleDescription: "投稿数が0件の方に贈られる称号です",
-          postTimes: 0,
-        });
-      }
+      updateMypageInfo(user.nickname);
     }
   }, [user]);
 
+  const EditableControls = () => {
+    const { isEditing, getSubmitButtonProps, getCancelButtonProps, getEditButtonProps } =
+      useEditableControls();
+
+    return isEditing ? (
+      <Flex justifyContent="center" w={20} align="center">
+        <Button
+          m={2}
+          size="sm"
+          aria-label="check"
+          leftIcon={<CheckIcon />}
+          {...getSubmitButtonProps()}
+        />
+        <IconButton aria-label="close" size="sm" icon={<CloseIcon />} {...getCancelButtonProps()} />
+      </Flex>
+    ) : (
+      <Flex justifyContent="center" w={20} align="center">
+        <Text>さん</Text>
+        <Spacer />
+        <IconButton aria-label="edit" size="sm" icon={<EditIcon />} {...getEditButtonProps()} />
+      </Flex>
+    );
+  };
+
   return (
     <Container py={8} bgColor="white">
       <Box mb={4}>
@@ -62,16 +99,37 @@ const Mypage = ({ mypageInfos }: Props) => {
       {user && mypageInfo && (
         <Box mb={4}>
           <Flex>
-            <Image width="25%" fit="contain" src="/reno_01.png" alt="レノ丸" marginLeft={1} />
+            <Image width={85} fit="contain" src="/reno_01.png" alt="レノ丸" marginLeft={1} />
             <Center flex="1">
               <Box margin={0} w="100%" textAlign="center">
-                <Heading as="h1" mb={2} fontSize="20px" textAlign="center">
+                <Heading mb={2} fontSize="20px" textAlign="center">
                   {mypageInfo.title}
                 </Heading>
                 <Text mb={2} fontSize="10px">
                   {mypageInfo.titleDescription}
                 </Text>
-                <Text fontSize="32px">{mypageInfo.nickname}さん</Text>
+                <Editable
+                  textAlign="right"
+                  defaultValue={mypageInfo.nickname}
+                  fontSize="lg"
+                  isPreviewFocusable={false}
+                  onCancel={(previousValue) => console.log("cancel: " + previousValue)}
+                  onSubmit={(value) => {
+                    user.nickname = value;
+                    updateUser(user).then(() => {
+                      updateMypageInfo(user.nickname);
+                    });
+                  }}
+                >
+                  <Flex direction="row">
+                    <EditablePreview flex={1} />
+                    <Input as={EditableInput} />
+                    <EditableControls />
+                  </Flex>
+                </Editable>
+                <Text mt={4} mb={2} fontSize="10px">
+                  過去の投稿のニックネームにすると称号が反映されます
+                </Text>
               </Box>
             </Center>
           </Flex>

diff --git a/src/pages/post.tsx b/src/pages/post.tsx
@@ -274,12 +274,6 @@ const Post: NextPage = () => {
                       userId: user.id,
                     }),
                   ];
-                  // ニックネームに変更があるときは、User更新もする
-                  // マイページ的なものができたら、ここで個別編集するのはやめた方がいい
-                  if (user.nickname != nickname) {
-                    user.nickname = nickname;
-                    promises.push(updateUser(user));
-                  }
 
                   Promise.all(promises)
                     .then(() => {

diff --git a/yarn.lock b/yarn.lock
@@ -1182,6 +1182,13 @@
   dependencies:
     "@chakra-ui/utils" "1.10.4"
 
+"@chakra-ui/icon@^3.0.13":
+  version "3.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.13.tgz#1782f8bd81946eabb39d4dde9eccebba1e5571ba"
+  integrity sha512-RaDLC4psd8qyInY2RX4AlYRfpLBNw3VsMih17BFf8EESVhBXNJcYy7Q9eMV/K4NvZfZT42vuVqGVNFmkG89lBQ==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.3"
+
 "@chakra-ui/icons@^1.1.1":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.1.7.tgz#f8c0c44a969c8654b90026b7d375b550c4bfbc49"
@@ -1415,6 +1422,11 @@
     "@chakra-ui/form-control" "1.6.0"
     "@chakra-ui/utils" "1.10.4"
 
+"@chakra-ui/[email protected]":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.3.tgz#97cbc11282e381ebd9f581c603088f9d60ead451"
+  integrity sha512-pCU+SUGdXzjAuUiUT8mriekL3tJVfNdwSTIaNeip7k/SWDzivrKGMwAFBxd3XVTDevtVusndkO4GJuQ3yILzDg==
+
 "@chakra-ui/[email protected]":
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.2.14.tgz#c2028b03a975c76b13aaecdbbe168872079177b8"
@@ -2928,9 +2940,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17.0.15":
-  version "17.0.44"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
-  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
+  version "17.0.52"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
+  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"