feat: 日付を変更可能に・日付の相対表示をわかりやすく

backend/src/ftft/ftft.controller.ts

@@ -38,6 +38,7 @@ export class FtftController {
             lng: z.number(),
           })
           .optional(),
+        doneAt: z.string().datetime({ offset: true }).optional(),
       })
       .parse(_body);
     return this.ftftService.createFtft({
@@ -47,6 +48,7 @@ export class FtftController {
         fileUrls: body.fileUrls,
         emoji: body.emoji,
         location: body.location,
+        doneAt: body.doneAt !== undefined ? new Date(body.doneAt) : undefined,
       },
     });
   }

backend/src/ftft/ftft.service.ts

@@ -26,6 +26,7 @@ export class FtftService {
       fileUrls: string[];
       emoji?: string;
       location?: { lat: number; lng: number };
+      doneAt?: Date;
     };
   }) {
     const fileKeyList = ftft.fileUrls.map((fileUrl) => fileUrl.split('.amazonaws.com/')[1].split('?')[0]);
@@ -36,7 +37,7 @@ export class FtftService {
       location: ftft.location,
       fileKeyList,
       id: randomUUID(),
-      createdAt: new Date().toISOString(),
+      createdAt: (ftft.doneAt || new Date()).toISOString(),
     });
 
     this.dynamoDb.createItem({

backend/src/sociallogin/linelogin/linelogin.servuce.ts

@@ -54,6 +54,11 @@ export class LineLoginService {
       .post<{ sub: string }>('https://api.line.me/oauth2/v2.1/verify', params)
       .then((response) => {
         return response.data.sub;
+      })
+      .catch((error) => {
+        console.error('IDトークンの検証に失敗しました');
+        console.error(error.response.data);
+        throw error;
       });
 
     const lineUser = await this.userService.createLineUser(lineUserId);

frontend/src/FtftForm.tsx

@@ -1,16 +1,19 @@
 import { ChangeEvent, useState } from 'react'
 import './App.css'
 import { Box, Button, IconButton, Input, Textarea } from "@chakra-ui/react"
-import { AttachmentIcon, ChatIcon } from "@chakra-ui/icons"
+import { AttachmentIcon, ChatIcon, TimeIcon } from "@chakra-ui/icons"
 import { API_BASE_URL } from './apiClient'
 import { useAuthorization } from './useAuthorization'
 import EmojiPicker from 'emoji-picker-react'
 import PinIcon from "./assets/pin-48.svg"
+import { format } from 'date-fns'
 
-export const FtftForm = ({ onSaveFtft }: { onSaveFtft: (ftft: { content: string, fileUrls: string[], emoji?: string, location?: { lat: number, lng: number } }) => Promise<void> }) => {
+export const FtftForm = ({ onSaveFtft }: { onSaveFtft: (ftft: { content: string, fileUrls: string[], emoji?: string, location?: { lat: number, lng: number }, doneAt?: Date }) => Promise<void> }) => {
   const [content, setContent] = useState("")
   const [files, setFiles] = useState<File[]>([])
   const [emoji, setEmoji] = useState<string | undefined>(undefined)
+  const [doneAt, setDoneAt] = useState<Date | undefined>(undefined)
+
   const [isDisplayEmojiPicker, setIsDisplayEmojiPicker] = useState(false)
   const authorization = useAuthorization()
 
@@ -63,6 +66,26 @@ export const FtftForm = ({ onSaveFtft }: { onSaveFtft: (ftft: { content: string,
           <IconButton aria-label='' icon={emoji === undefined ? <ChatIcon /> : <span>{emoji}</span>} onClick={() => setIsDisplayEmojiPicker(!isDisplayEmojiPicker)} />
         </Box>
 
+        <Box position="relative">
+          <Box position="absolute"  zIndex={1} top={0} left={0} width="100%" height="100%" opacity="0" >
+            <Input css={{
+              "::-webkit-calendar-picker-indicator": {
+                position: "absolute",
+                "width": "100%",
+                "height": "100%",
+              }
+            }} size='sm' max={format(new Date(), "yyyy-MM-dd'T'HH:mm")} type="datetime-local" height="100%" px={0} onInput={e=>{
+              console.log(e.currentTarget.value)
+              if (!e.currentTarget.value) {
+                setDoneAt(undefined)  
+              } else 
+              setDoneAt(new Date(e.currentTarget.value))
+            }}/>
+          </Box>
+          {doneAt === undefined ? <IconButton aria-label='' icon={<TimeIcon />} />
+          : <Button >{format(doneAt, "M/d H:m")}</Button> }
+        </Box>
+
         <IconButton aria-label='' icon={location === undefined ? <img width="18px" height="18px" src={PinIcon} /> : <span>📍</span>} onClick={() => {
           if (location !== undefined) {
             setLocation(undefined)
@@ -79,7 +102,6 @@ export const FtftForm = ({ onSaveFtft }: { onSaveFtft: (ftft: { content: string,
 
         <Box position="relative">
           <Input position="absolute" zIndex={1} top={0} left={0} width="100%" opacity="0" type="file" multiple onChange={(event: ChangeEvent<HTMLInputElement>) => {
-            console.log(event.target.files)
             if (event.target.files && event.target.files?.length >= 1) {
               setFiles(files.concat(...event.target.files))
             }
@@ -106,12 +128,13 @@ export const FtftForm = ({ onSaveFtft }: { onSaveFtft: (ftft: { content: string,
         setIsLoading(true)
         try {
           const fileUrls = await uploadFile()
-          await onSaveFtft({ content, fileUrls, emoji, location })
+          await onSaveFtft({ content, fileUrls, emoji, location, doneAt })
 
           setLocation(undefined)
           setFiles([])
           setContent("")
           setEmoji(undefined)
+          setDoneAt(undefined)
 
         } finally {
           setIsLoading(false)

frontend/src/FtftList.tsx

@@ -3,8 +3,7 @@ import { IconButton, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFoot
 import './App.css'
 import { Box, Button, Divider, Text } from "@chakra-ui/react"
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { format, formatRelative, parseISO } from 'date-fns'
-import { ja } from 'date-fns/locale'
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInMonths, differenceInWeeks, differenceInYears, format, parseISO } from 'date-fns'
 import { useAuthorization } from './useAuthorization'
 import { API_BASE_URL } from './apiClient'
 import 'react-calendar/dist/Calendar.css';
@@ -129,8 +128,38 @@ export const FtftList = () => {
 
 const CreatedAtLabel = memo(({ createdAt }: { createdAt: Date }) => {
   const [isRelative, setIsRelative] = useState(true)
+
+  const formatRelative = (date1: Date, date2: Date): string => {
+    if (differenceInMinutes(date1, date2) < 10) {
+      return "さっき"
+    }
+
+    if (differenceInMinutes(date1, date2) < 60) {
+      return differenceInMinutes(date1, date2) + "分前"
+    }
+
+    if (differenceInHours(date1, date2) < 24) {
+      return differenceInHours(date1, date2) + "時間前"
+    }
+
+    if (differenceInDays(date1, date2) < 7) {
+      return differenceInDays(date1, date2) + "日前"
+    }
+
+    if (differenceInWeeks(date1, date2) < 5) {
+      return differenceInWeeks(date1, date2) + "週間前"
+    }
+
+    if (differenceInMonths(date1, date2) < 12) {
+      return differenceInMonths(date1, date2) + "ヶ月前"
+    }
+
+    return differenceInYears(date1, date2) + "年前"
+
+  }
+
   return <Text fontSize="sm" color="grey" onClick={() => setIsRelative(!isRelative)}>{
-    isRelative ? formatRelative(createdAt, new Date(), { locale: ja }) : format(createdAt, "yyyy/MM/dd HH:mm:ss")
+    isRelative ? formatRelative(new Date(), createdAt) : format(createdAt, "yyyy/MM/dd HH:mm:ss")
 
   }</Text>
 })

frontend/src/Home.tsx

@@ -18,7 +18,7 @@ export const Home = () => {
   const toast = useToast()
 
 
-  const saveFtft = async ({content, fileUrls, emoji, location}: {content: string, fileUrls: string[], emoji?: string, location?: {lat: number, lng: number}}) => {
+  const saveFtft = async ({content, fileUrls, emoji, location, doneAt}: {content: string, fileUrls: string[], emoji?: string, location?: {lat: number, lng: number}, doneAt?: Date}) => {
     await fetch(API_BASE_URL + '/ftft', {
       method: "POST",
       headers: {
@@ -29,21 +29,21 @@ export const Home = () => {
         title: content,
         fileUrls,
         emoji,
-        location
+        location,
+        doneAt
       })
     }).then(res=>{
-      console.log(res.status)
       if (res.status !== 201) throw new Error("送信できませんでした")
 
-      const message = `${content}${emoji ? `\n${emoji}` : ''}\n\n-------------\n\nFTFTであなたの"はじめて"を記録しよう✍️\n`
+      const message = `${content}${emoji ? `\n${emoji}` : ''}\n\n-------------\n\nFTFTであなたの"はじめて"を記録しよう✍️ #FTFT-app\n`
       toast({
         position: 'bottom',
         title: "記録しました✍️",
         description: <p>
           友達に
-          <Link href={`https://line.me/R/share?text=${encodeURI(message + "https://liff.line.me/2003019183-014OmGVB")}`}><u>LINE VOOM</u></Link>
+          <Link href={`https://line.me/R/share?text=${encodeURI(message + "https://ftft.morifuji-is.ninja/")}`}><u>LINE VOOM</u></Link>
           や
-          <Link href={`https://twitter.com/intent/tweet?text=${encodeURI(message)}&url=https://liff.line.me/2003019183-014OmGVB`}><u>X</u></Link>
+          <Link href={`https://twitter.com/intent/tweet?text=${encodeURI(message)}&url=https://ftft.morifuji-is.ninja/`}><u>X</u></Link>
           で共有しよう🥰
         </p>
       })

frontend/src/LineLogin.tsx

@@ -26,6 +26,8 @@ export const LineLogin = () => {
 
     const idToken = liff.getIDToken()
 
+    localStorage.clear()
+
     const response = await fetch(API_BASE_URL + '/social-login/line/liff', {
       method: "POST",
       headers: {
@@ -60,15 +62,7 @@ export const LineLogin = () => {
         return
       }
 
-      alert("エラーが発生しました\nSafariもしくはChromeで開いてください")
-      toast({
-        position: 'bottom',
-        status: "error",
-        title: "エラーが発生しました",
-        description: "SafariもしくはChromeで開いてください"
-      })
-
-      navigate("/login")
+      liff.login()
     })
   }, [])
 

frontend/src/Login.tsx

@@ -70,7 +70,7 @@ export const Login = () => {
           await liff.init({
             liffId: "2003019183-014OmGVB"
           })
-          liff.login({redirectUri: window.location.origin + "/line-login"})
+          liff.login()
         }}>LINEでログイン</Button>
 
 

frontend/src/Setting.tsx

@@ -1,9 +1,10 @@
 import { TimeIcon } from '@chakra-ui/icons';
 import './App.css'
-import { Box, Button, Container, IconButton } from "@chakra-ui/react"
+import { Box, Button, Container, IconButton, useToast } from "@chakra-ui/react"
 import { Link, useNavigate } from 'react-router-dom';
 
 export const Setting = () => {
+  const toast = useToast()
 
   const navigate = useNavigate()
 
@@ -16,12 +17,25 @@ export const Setting = () => {
       /></Box>
     </Link>
 
-    <Button onClick={async () => {
-      localStorage.removeItem("authorization")
-      navigate("/login")
-    }}>
-      ログアウト
-    </Button>
+    <Box display="flex" flexDirection="column" gap={4}>
+      <Button onClick={async () => {
+        navigate(`/?ftftAuthorization=${encodeURI(localStorage.getItem("authorization") || "")}`)
+        toast({
+          position: 'bottom',
+          title: "この画面をホーム画面に追加しよう",
+          description: "ログインが不要になります"
+        })
+      }}>
+        ホーム画面にショートカットを作成
+      </Button>
+
+      <Button onClick={async () => {
+        localStorage.removeItem("authorization")
+        navigate("/login")
+      }}>
+        ログアウト
+      </Button>
+    </Box>
     <Box></Box>
   </Container>
 }

frontend/src/main.tsx

@@ -1,16 +1,24 @@
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
-// import eruda from "eruda"
+import eruda from "eruda"
 
-// if (window.location.origin === "https://d3ozb6rt05ntqw.cloudfront.net") {
-  // const el = document.createElement('div');
-  // document.body.appendChild(el);
-
-  // eruda.init({
-  //     container: el,
-  // });
-// }
+if (window.location.origin.includes("5173")) {
+const el = document.createElement('div');
+document.body.appendChild(el);
+
+eruda.init({
+    container: el,
+});
+}
+
+
+const searchParams = new URLSearchParams(window.location.search)
+const ftftAuthorization = searchParams.get("ftftAuthorization")
+if (ftftAuthorization) {
+  localStorage.setItem("authorization", ftftAuthorization)
+  window.location.href = window.location.origin +window.location.pathname 
+}
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <App />