🏷️ 投稿データの型を修正

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "formulahendry.auto-rename-tag",
-    "coenraads.bracket-pair-colorizer",
     "irongeek.vscode-env",
     "dsznajder.es7-react-js-snippets",
     "dbaeumer.vscode-eslint",

package.json

@@ -2,7 +2,8 @@
   "name": "renofa-parking-web",
   "private": true,
   "scripts": {
-    "dev": "export NEXT_PUBLIC_USE_FIREBASE_EMULATOR=true && next dev",
+    "local": "export NEXT_PUBLIC_USE_FIREBASE_EMULATOR=true && next dev",
+    "dev": "next dev",
     "build": "next build && next export",
     "start": "next start",
     "inspect": "npm-run-all -l -c inspect:*",

src/lib/firestore.ts

@@ -132,7 +132,9 @@ const postConverter = {
       parkingId: post.parkingId,
       parkingRatio: post.parkingRatio,
       parkingMinutes: post.parkingMinutes,
-      postedAt: serverTimestamp(),
+      parkedAgo: post.parkedAgo,
+      parkedAt: post.parkedAt,
+      postedAt: post.postedAt,
     };
   },
   fromFirestore(snapshot: QueryDocumentSnapshot): Post {
@@ -143,15 +145,21 @@ const postConverter = {
       parkingId: data.parkingId,
       parkingRatio: data.parkingRatio,
       parkingMinutes: data.parkingMinutes,
+      parkedAgo: data.parkedAgo,
+      parkedAt: data.parkedAt,
       postedAt: data.postedAt.toDate(),
     };
   },
 };
 
 export const createPost = async (post: Post): Promise<void> => {
   console.log("createPost() called.");
-  const ref = doc(collection(db, "posts")).withConverter(postConverter);
 
+  const dateUTC = new Date();
+  const diffJST = dateUTC.getTimezoneOffset() * 60 * 1000;
+  const id = new Date(dateUTC.getTime() - diffJST).toISOString().replace(/[^0-9]/g, "");
+
+  const ref = doc(db, "posts", id).withConverter(postConverter);
   return await setDoc(ref, post);
 };
 

src/pages/post.tsx

@@ -46,30 +46,30 @@ const parkingStatuses = [
   },
 ];
 
-const parkingMinutesList = [
+const parkedAgoList = [
   {
     label: "ついさっき",
     value: 0,
   },
   {
     label: "10分ぐらい前",
-    value: 10,
+    value: -10,
   },
   {
     label: "20分ぐらい前",
-    value: 20,
+    value: -20,
   },
   {
     label: "30分ぐらい前",
-    value: 30,
+    value: -30,
   },
   {
     label: "1時間ぐらい前",
-    value: 60,
+    value: -60,
   },
   {
     label: "2時間ぐらい前",
-    value: 120,
+    value: -120,
   },
 ];
 
@@ -101,8 +101,8 @@ const Post: NextPage = () => {
   const [parkingRatio, setParkingRatio] = useState(0);
   const parkingRatioIsError = parkingRatio === 0;
 
-  const [parkingMinutes, setParkingMinutes] = useState(-1);
-  const parkingMinutesIsError = parkingMinutes === -1;
+  const [parkedAgo, setParkedAgo] = useState(-1);
+  const parkedAgoIsError = parkedAgo === -1;
 
   return (
     <Container py={8} bgColor="white">
@@ -202,32 +202,30 @@ const Post: NextPage = () => {
       </Box>
 
       <Box mb={10}>
-        <FormControl isInvalid={parkingMinutesIsError} isRequired>
+        <FormControl isInvalid={parkedAgoIsError} isRequired>
           <FormLabel fontWeight="bold">いつ駐車場に停めましたか？</FormLabel>
           <SimpleGrid templateColumns="repeat(3, 1fr)" gap={4}>
-            {parkingMinutesList.map((minutes, index) => (
+            {parkedAgoList.map((ago, index) => (
               <Button
                 key={index}
                 h="100"
                 fontSize="sm"
                 bg="white"
-                border={minutes.value === parkingMinutes ? "4px" : "1px"}
-                borderColor={minutes.value === parkingMinutes ? "red.500" : "gray.200"}
+                border={ago.value === parkedAgo ? "4px" : "1px"}
+                borderColor={ago.value === parkedAgo ? "red.500" : "gray.200"}
                 rounded={8}
                 shadow="md"
                 _hover={{ bg: "white" }}
                 _active={{
                   bg: "white",
                 }}
-                onClick={() => setParkingMinutes(minutes.value)}
+                onClick={() => setParkedAgo(ago.value)}
               >
-                {minutes.label}
+                {ago.label}
               </Button>
             ))}
           </SimpleGrid>
-          {parkingMinutesIsError && (
-            <FormErrorMessage>どれか1つを選択してください。</FormErrorMessage>
-          )}
+          {parkedAgoIsError && <FormErrorMessage>どれか1つを選択してください。</FormErrorMessage>}
         </FormControl>
       </Box>
 
@@ -238,20 +236,23 @@ const Post: NextPage = () => {
             size="lg"
             width="100%"
             isDisabled={
-              nicknameIsError || parkingIdIsError || parkingRatioIsError || parkingMinutesIsError
+              nicknameIsError || parkingIdIsError || parkingRatioIsError || parkedAgoIsError
             }
             onClick={() => {
-              //　試合開始時間に対する現在時間（分）を求めて、投稿の時間を加味する
-              //　試合開始前はマイナス値でよい
+              const postedAt = new Date();
+              const parkedAt = new Date(postedAt.getTime() + 60000 * parkedAgo);
+              //　試合開始時間に対して何分前か（現在時間と「いつ停めた」設問から導く
               const minutes =
-                Math.floor((new Date().getTime() - game.startAt.getTime()) / 60000) -
-                parkingMinutes;
+                Math.floor((postedAt.getTime() - game.startAt.getTime()) / 60000) + parkedAgo;
               createPost({
                 nickname: nickname,
                 gameId: game.id,
                 parkingId: parkingId,
                 parkingRatio: parkingRatio,
                 parkingMinutes: minutes,
+                parkedAgo: parkedAgo,
+                parkedAt: parkedAt,
+                postedAt: postedAt,
               })
                 .then(() => {
                   router.push("/postsuccess");

src/types/Post.ts

@@ -4,5 +4,7 @@ export type Post = {
   parkingId: string;
   parkingRatio: number;
   parkingMinutes: number;
-  postedAt?: Date;
+  parkedAgo: number;
+  parkedAt: Date;
+  postedAt: Date;
 };

src/utils/parking.spec.ts

@@ -85,6 +85,9 @@ const postBase = {
   nickname: "hoge",
   gameId: "20211128",
   parkingId: "truck",
+  parkedAgo: 0, // not use for test
+  parkedAt: new Date(), // not use for test
+  postedAt: new Date(), // not use for test
 };
 
 // --------------------------------------------------------