chore: Refactor code to use consistent naming conventions and improve…

… code readability
takoserver · Jul 9, 2024 · 2c6a58c · 2c6a58c
1 parent 9461854
commit 2c6a58c
Show file tree

Hide file tree

Showing 14 changed files with 297 additions and 121 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,5 +1,5 @@
 import HeaderButton from "../islands/headerButton.tsx"
-export default function ChatHeader(props: { page: any }) {
+export default function ChatHeader(props: { state : any}) {
   return (
     <>
       <header
@@ -18,7 +18,7 @@ export default function ChatHeader(props: { page: any }) {
         <ul class="l-header__ul">
           <HeaderButton
             page={0}
-            pageState={props.page}
+            state={props.state}
           >
             <a>
               <svg
@@ -40,7 +40,7 @@ export default function ChatHeader(props: { page: any }) {
           </HeaderButton>
           <HeaderButton
             page={1}
-            pageState={props.page}
+            state={props.state}
           >
             <a>
               <svg
@@ -63,7 +63,7 @@ export default function ChatHeader(props: { page: any }) {
           </HeaderButton>
           <HeaderButton
             page={2}
-            pageState={props.page}
+            state={props.state}
           >
             <a>
               <svg
@@ -86,7 +86,7 @@ export default function ChatHeader(props: { page: any }) {
           </HeaderButton>
           <HeaderButton
             page={3}
-            pageState={props.page}
+            state={props.state}
           >
             <a>
               <svg

diff --git a/components/OtherMessage.tsx b/components/OtherMessage.tsx
@@ -1,66 +1,66 @@
 const ChatOtherMessage = (
-  { time, message, sender, senderNickName, isPrimary }: {
-    time: string
-    message: string
-    sender: string
-    senderNickName: string
-    isPrimary: boolean
-  },
+    { time, message, sender, senderNickName, isPrimary }: {
+        time: string
+        message: string
+        sender: string
+        senderNickName: string
+        isPrimary: boolean
+    },
 ) => {
-  const isPrimaryClass = isPrimary ? "c-talk-chat other primary" : "c-talk-chat other subsequent"
+    const isPrimaryClass = isPrimary ? "c-talk-chat other primary" : "c-talk-chat other subsequent"
 
-  return (
-    <li class={isPrimaryClass}>
-      <div class="c-talk-chat-box">
-        {isPrimary && (
-          <div class="c-talk-chat-icon">
-            <img
-              src={`/api/v1/friends/${sender}/icon/`}
-              alt=""
-              class="rounded-full text-white dark:text-black"
-            />
-          </div>
-        )}
+    return (
+        <li class={isPrimaryClass}>
+            <div class="c-talk-chat-box">
+                {isPrimary && (
+                    <div class="c-talk-chat-icon">
+                        <img
+                            src={`/api/v1/friends/${sender}/icon/`}
+                            alt=""
+                            class="rounded-full text-white dark:text-black"
+                        />
+                    </div>
+                )}
 
-        <div class="c-talk-chat-right">
-          {isPrimary && (
-            <div class="c-talk-chat-name">
-              <p>{senderNickName}</p>
-            </div>
-          )}
+                <div class="c-talk-chat-right">
+                    {isPrimary && (
+                        <div class="c-talk-chat-name">
+                            <p>{senderNickName}</p>
+                        </div>
+                    )}
 
-          <div class="c-talk-chat-msg">
-            <p>
-              {convertLineBreak(message)}
-            </p>
-          </div>
-        </div>
-        <div class="c-talk-chat-date">
-          <p>{convertTime(time)}</p>
-        </div>
-      </div>
-    </li>
-  )
+                    <div class="c-talk-chat-msg">
+                        <p>
+                            {convertLineBreak(message)}
+                        </p>
+                    </div>
+                </div>
+                <div class="c-talk-chat-date">
+                    <p>{convertTime(time)}</p>
+                </div>
+            </div>
+        </li>
+    )
 }
 //preactで動作する改行を反映させるために、改行コードをbrタグに変換する関数
 function convertLineBreak(message: string | null | undefined) {
-  if (message === null || message === undefined) return
-  return message.split("\n").map((line, index) => (
-    <span key={index}>
-      {line}
-      <br />
-    </span>
-  ))
+    if (message === null || message === undefined) return
+    return message.split("\n").map((line, index) => (
+        <span key={index}>
+            {line}
+            <br />
+        </span>
+    ))
 }
 //Date型のデータを受け取り、午前か午後何時何分かを返す関数
 function convertTime(time: string | number | Date) {
-  const date = new Date(time)
-  const hours = date.getHours()
-  const minutes = date.getMinutes()
-  const ampm = hours >= 12 ? "午後" : "午前"
-  const hour = hours % 12
-  const zeroPaddingHour = hour === 0 ? 12 : hour
-  const zeroPaddingMinutes = String(minutes).padStart(2, "0")
-  return `${ampm} ${zeroPaddingHour}:${zeroPaddingMinutes}`
+    const date = new Date(time)
+    const hours = date.getHours()
+    const minutes = date.getMinutes()
+    const ampm = hours >= 12 ? "午後" : "午前"
+    const hour = hours % 12
+    const zeroPaddingHour = hour === 0 ? 12 : hour
+    const zeroPaddingMinutes = String(minutes).padStart(2, "0")
+    return `${ampm} ${zeroPaddingHour}:${zeroPaddingMinutes}`
 }
-export default ChatOtherMessage
+export default ChatOtherMessage
diff --git a/components/chat.tsx b/components/chat.tsx
@@ -1,34 +1,44 @@
 import Header from "../components/header.tsx"
 import TalkListHeader from "../islands/talkListHeader.tsx"
 import TalkListContent from "../islands/TalkListContent.tsx"
+import SetDefaultState from "../islands/setDefaultState.tsx"
 import { signal } from "@preact/signals"
 import { createContext } from "preact"
-import { useContext } from "preact/hooks"
 import { AppStateType } from "../util/types.ts"
 import Main from "./chatmain.tsx"
-function createAppState(userName?: any): AppStateType {
-  const isChoiceUser = signal(false)
+function createAppState(obj : {
+    isChoiceUser: boolean,
+    roomid: string,
+    userName: string,
+    page: number,
+}): AppStateType {
+  const isChoiceUser = signal(obj.isChoiceUser)
   const ws = signal(null)
   const talkData = signal([])
-  const roomid = signal("")
+  const roomid = signal(obj.roomid)
   const sessionid = signal("")
   const friendList = signal([])
-  const userNameResult = userName ? userName : null
+  const roomName = signal("")
+  const page = signal(obj.page)
   return {
     isChoiceUser: isChoiceUser,
     ws: ws,
     talkData: talkData,
     roomid: roomid,
     sessionid: sessionid,
-    userName: userNameResult,
+    userName: obj.userName,
     friendList: friendList,
+    roomName: roomName,
+    page: page,
   }
 }
-export const AppState = createContext(createAppState())
 function chat(props: { page: any; userName: string }) {
-  console.log(props.page)
-  const page = signal(props.page)
-  console.log("this is" + page.value)
+    const AppState = createAppState({
+        isChoiceUser: false,
+        roomid: "",
+        userName: props.userName,
+        page: props.page,
+    })
   return (
     <>
       <head>
@@ -39,32 +49,31 @@ function chat(props: { page: any; userName: string }) {
         />
         <link rel="stylesheet" href="/style.css"></link>
       </head>
-      <AppState.Provider value={createAppState()}>
-        <App page={page} userName={props.userName} />
-      </AppState.Provider>
+        <App state={AppState}/>
     </>
   )
 }
-function App({ page, userName }: { page: any; userName: string }) {
+function App({ state }: { state: AppStateType }) {
   return (
     <>
-      <Header page={page} />
+        <SetDefaultState state={state} />
+      <Header state={state} />
       <div class="wrapper w-full">
         <main
           class="p-talk"
           id="chatmain"
         >
           <div class="p-talk-list">
-            <TalkListHeader page={page} />
+            <TalkListHeader state={state} />
             <div class="p-talk-list-rooms">
               <ul class="p-talk-list-rooms__ul">
-                <TalkListContent page={page} />
+                <TalkListContent state={state} />
               </ul>
             </div>
           </div>
           <div class="p-talk-chat">
             <div class="p-talk-chat-container">
-              <Main userName={userName}>
+              <Main state={state}>
               </Main>
             </div>
           </div>

diff --git a/components/chatmain.tsx b/components/chatmain.tsx
@@ -2,17 +2,18 @@ import ChatTalkTitle from "../islands/ChatTalkTitle.tsx"
 import ChatTalkContent from "../islands/ChatTalkContent.tsx"
 import ChatSend from "../islands/ChatSend.tsx"
 import ChatTalkTitleContent from "../islands/ChatTalkTitleContent.tsx"
-function chatmain({ userName }: { userName: string }) {
+import { AppStateType } from "../util/types.ts"
+function chatmain({ state }: { state: AppStateType }) {
   return (
     <>
       <div class="p-talk-chat-main" id="chat-area">
         <div class="p-talk-chat-title">
           <div class="p-1 h-full">
-            <ChatTalkTitle />
+            <ChatTalkTitle state={state}/>
           </div>
           <ChatTalkTitleContent>a</ChatTalkTitleContent>
         </div>
-        <ChatTalkContent userName={userName} />
+        <ChatTalkContent state={state} />
       </div>
       <ChatSend />
     </>

diff --git a/islands/ChatTalkContent.tsx b/islands/ChatTalkContent.tsx
@@ -1,24 +1,21 @@
 import ChatDate from "../components/ChatDate.tsx"
 import ChatSendMessage from "../components/SendMessage.tsx"
 import ChatOtherMessage from "../components/OtherMessage.tsx"
-import { useContext } from "preact/hooks"
-import { AppState } from "../components/chat.tsx"
-function ChatTalkMain(props: { userName: string }) {
+import { AppStateType } from "../util/types.ts"
+function ChatTalkMain({ state }: { state: AppStateType }) {
   let SendPrimary = true
   let OtherPrimary = true
   let DateState: any
-  const value = useContext(AppState)
-  const { talkData } = value
   return (
     <>
-      {talkData.value.map((data: any, index: number) => {
+      {state.talkData.value.map((data: any, index: number) => {
         const date = new Date(data.time)
 
         const isEncodeDate = new Date(DateState).toLocaleDateString() !==
           date.toLocaleDateString()
         DateState = data.time
         if (data.type == "message") {
-          if (data.sender == props.userName) {
+          if (data.sender == state.userName) {
             if (SendPrimary) {
               SendPrimary = false
               OtherPrimary = true
@@ -40,7 +37,7 @@ function ChatTalkMain(props: { userName: string }) {
               )
             }
             // 前のメッセージから1分以上経過のものはprimaryに
-            const prevDate = new Date(talkData.value[index - 1].time)
+            const prevDate = new Date(state.talkData.value[index - 1].time)
             if (date.getTime() - prevDate.getTime() > 60000) {
               return (
                 <>
@@ -99,7 +96,7 @@ function ChatTalkMain(props: { userName: string }) {
             }
 
             // 前のメッセージから1分以上経過のものはprimaryに
-            const prevDate = new Date(talkData.value[index - 1].time)
+            const prevDate = new Date(state.talkData.value[index - 1].time)
             if (date.getTime() - prevDate.getTime() > 60000) {
               return (
                 <>

diff --git a/islands/ChatTalkTitle.tsx b/islands/ChatTalkTitle.tsx
@@ -1,25 +1,22 @@
-import { useContext } from "preact/hooks"
-import { AppState } from "../components/chat.tsx"
-export default function TalkArea() {
-  const value = useContext(AppState)
-  const { isChoiceUser, ws, roomid, sessionid } = value
+import { AppStateType } from "../util/types.ts"
+export default function TalkArea({ state }: { state: AppStateType }) {
   return (
     <>
       <button
         class="p-talk-chat-prev"
         onClick={() => {
-          if (isChoiceUser.value === null || ws.value === null || !(ws.value instanceof WebSocket)) {
+          if (state.isChoiceUser.value === null || state.ws.value === null || !(state.ws.value instanceof WebSocket)) {
             alert("websocketが接続されていません")
             return
           }
-          ws.value.send(
+          state.ws.value.send(
             JSON.stringify({
               type: "leave",
-              sessionid: sessionid.value,
+              sessionid: state.sessionid.value,
             }),
           )
-          isChoiceUser.value = false
-          roomid.value = ""
+          state.isChoiceUser.value = false
+          state.roomid.value = ""
           //urlを変更
           history.pushState("", "", "/talk")
         }}

diff --git a/islands/HeaderButton.tsx b/islands/HeaderButton.tsx
@@ -1,11 +1,11 @@
-export default function HeaderButton(props: { page: any; children: any; pageState: any }) {
+export default function HeaderButton(props: { page: any; children: any; state: any }) {
   return (
     <li
       class="l-header__ul-item"
       onClick={() => {
         const url = window.location.href
         const roomid = url.split("/")[4]
-        props.pageState.value = props.page
+        props.state.page.value = props.page
         if (roomid == undefined) {
           history.pushState("", "", urlPramator(props.page))
           return

diff --git a/islands/TalkListContent.tsx b/islands/TalkListContent.tsx
@@ -1,16 +1,12 @@
 import User from "../components/User.tsx"
-import { talkDataType } from "../util/types.ts"
-import { useContext } from "preact/hooks"
-import { AppState } from "../components/chat.tsx"
-function TalkListContent({ page }: { page: any }) {
-  const value = useContext(AppState)
-  const { talkData } = value
-  if (page.value === 0) {
+import { AppStateType } from "../util/types.ts"
+function TalkListContent({ state }: { state: AppStateType }) {
+  if (state.page.value === 0) {
     return <></>
-  } else if (page.value === 1) {
+  } else if (state.page.value === 1) {
     return (
       <>
-        {talkData.value.map((talk: any) => {
+        {state.friendList.value.map((talk: any) => {
           return (
             <User
               userName={talk.roomName}