Merge branch 'feature/changeProfile' into develop

client/src/components/pages/profile/Profile.tsx

@@ -108,9 +108,9 @@ const profile = () => {
                   style={{
                     width: '50%',
                     fontSize: '45px',
-                    // fontWeight: '550',
                     marginBottom: '-3px',
                     border: 'none',
+                    backgroundColor: 'transparent',
                   }}
                   type='text'
                   value={name}

client/src/components/pages/timeline/Post.css

@@ -8,3 +8,7 @@
   font-size: 15px;
   padding-top: 21px;
 }
+
+h3 {
+  font-weight: 15;
+}

client/src/components/pages/timeline/Post.tsx

@@ -1,16 +1,16 @@
-import { ChatBubbleOutline, FavoriteBorder, Favorite } from '@mui/icons-material'
+import { FavoriteBorder, Favorite } from '@mui/icons-material'
 import { Avatar, Grid } from '@mui/material'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { changeBabi } from '../../../logic/babigo'
 import { readAloud } from '../../../logic/readText'
 import { doc, DocumentReference, getDoc } from 'firebase/firestore'
-import React, { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 import useBatchPostLiked from '../../../hooks/useBatchPostLiked'
 import Button from '@mui/material/Button'
 import './Post.css'
 import { db } from '../../../firebase'
 import { useAuth } from '../../../firebase/authFunction'
-import formatDate from '../../../logic/formatDate'
+import daysAgo from '../../../logic/daysAgo'
 
 type PostProps = {
   author: DocumentReference
@@ -29,7 +29,7 @@ type PostProps = {
 const Post = memo((props: PostProps) => {
   const { setPostId, getAnotherPostData, checkPostIsLiked } = useBatchPostLiked()
   const location = useLocation()
-  const { avater, displayName, text, image, createTime, updateTime, likeCount, postId } = props
+  const { avater, displayName, text, createTime, likeCount, postId } = props
   const babi = changeBabi(text)
   const signInUser = useAuth()
   const [isClicked, setIsClicked] = useState(false)
@@ -46,45 +46,18 @@ const Post = memo((props: PostProps) => {
     readAloud(text)
   }
 
-  const handleClick = async (e: any) => {
+  const handleClick = async () => {
     await setPostId(postId)
     await getAnotherPostData()
     await checkPostIsLiked()
   }
 
-  const beforePost = (time: Date) => {
-    const now = new Date()
-    console.log(now, time)
-    let diffTime = now.getFullYear() - time.getFullYear()
-    if (diffTime == 0) {
-      diffTime = now.getMonth() - time.getMonth()
-      if (diffTime == 0) {
-        diffTime = now.getDate() - time.getDate()
-        if (diffTime == 0) {
-          diffTime = now.getHours() - time.getHours()
-          if (diffTime == 0) {
-            diffTime = now.getMinutes() - time.getMinutes()
-            if (diffTime == 0) {
-              diffTime = now.getSeconds() - time.getSeconds()
-              return `${diffTime}s`
-            }
-            return `${diffTime}m`
-          }
-          return `${diffTime}h`
-        }
-        return `${diffTime}d`
-      }
-      return `${diffTime}M`
-    }
-    return `${diffTime}Y`
-  }
-
   useEffect(() => {
     const isLikedCheck = async () => {
       const sendTime = createTime.toDate()
       const docRef = doc(db, 'users', signInUser.uid, 'likedPosts', postId)
       const docSnap = await getDoc(docRef)
-      setSendTime(beforePost(sendTime))
+      setSendTime(daysAgo(sendTime))
       setIsLiked(docSnap.exists())
     }
     isLikedCheck()
@@ -107,7 +80,7 @@ const Post = memo((props: PostProps) => {
 
             {/* ユーザーネーム */}
             <Grid item md={1}>
-              <h3>{displayName === '' ? '匿名' : displayName}</h3>
+              <h3>{displayName || 'ばびー'}</h3>
             </Grid>
 
             {/* 投稿時間*/}
@@ -176,7 +149,7 @@ const Post = memo((props: PostProps) => {
               <Avatar src={avater} style={{ marginTop: 10 }} />
             </Grid>
             <Grid item md={6}>
-              <h3>{displayName === '' ? '匿名' : displayName}</h3>
+              <h3>{displayName || 'ばびー'}</h3>
             </Grid>
           </Grid>
           <Grid container justifyContent='space-between' alignItems='flex-start'>

client/src/components/ui/input/post/PostBox.tsx

@@ -4,14 +4,15 @@ import { collection, setDoc, doc, serverTimestamp, addDoc, updateDoc } from 'fir
 import { db } from '../../../../firebase'
 import { useAuth } from '../../../../firebase/authFunction'
 import './PostBox.css'
+import { useRecoilValue } from 'recoil'
+import { signInUserState } from '../../../../store/auth'
 
 const PostBox = () => {
-  const [displayName, setDisplayName] = useState<string>('')
   const [postMessage, setPostMessage] = useState<string>('')
   const [postImage, setPostImage] = useState<string>('')
   const [canSubmit, setCanSubmit] = useState<boolean>(true)
   const [error, setErrors] = useState('')
-  const signInUser = useAuth()
+  const signInUser = useRecoilValue(signInUserState)
   const uid = signInUser.uid
   const avater = signInUser.photoURL
   // const username = signInUser.displayName
@@ -28,7 +29,7 @@ const PostBox = () => {
 
     const data = {
       author: usersRef.path,
-      displayName: displayName,
+      displayName: signInUser.displayName,
       text: postMessage,
       image: postImage,
       postId: '',
@@ -43,7 +44,6 @@ const PostBox = () => {
       postId: postRef.id,
     })
 
-    setDisplayName('')
     setPostMessage('')
     setPostImage('')
     setErrors('')
@@ -75,7 +75,14 @@ const PostBox = () => {
             />
           </Grid>
           <Grid item xs={3.8}>
-            <Button className='button' type='submit' onClick={sendPost} disabled={canSubmit}>
+            <Button
+              variant='contained'
+              style={{ borderRadius: 50 }}
+              className='button'
+              type='submit'
+              onClick={sendPost}
+              disabled={canSubmit}
+            >
               投稿する
             </Button>
           </Grid>

client/src/logic/daysAgo.ts

@@ -0,0 +1,30 @@
+import formatDate from './formatDate'
+
+function daysAgo(time: Date) {
+  const now = new Date()
+  console.log(now, time)
+  let diffTime = now.getFullYear() - time.getFullYear()
+  if (diffTime == 0) {
+    diffTime = now.getMonth() - time.getMonth()
+    if (diffTime == 0) {
+      diffTime = now.getDate() - time.getDate()
+      if (diffTime == 0) {
+        diffTime = now.getHours() - time.getHours()
+        if (diffTime == 0) {
+          diffTime = now.getMinutes() - time.getMinutes()
+          if (diffTime == 0) {
+            diffTime = now.getSeconds() - time.getSeconds()
+            return `${diffTime}s`
+          }
+          return `${diffTime}m`
+        }
+        return `${diffTime}h`
+      } else if (diffTime >= 7) {
+        return formatDate(time, 'yyyy/MM/dd')
+      }
+      return `${diffTime}d`
+    }
+  }
+}
+
+export default daysAgo