feat: 🎸 ログイン画面を実装

Author: suin

package.json

@@ -13,7 +13,7 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-scripts": "3.4.0",
-    "typescript": "~3.7.2"
+    "typescript": "^4.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -35,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.1.0"
   }
-}
+}

src/App.css

@@ -129,7 +129,6 @@ nav, aside {
 }
 
 nav, aside, main {
-  text-transform: uppercase;
   color: lightslategray;
   display: flex;
   align-items: center;
@@ -171,4 +170,4 @@ footer {
   nav, aside {
     margin: 0;
   }
-}
+}

src/App.tsx

@@ -1,15 +1,30 @@
-import React from 'react';
-import './App.css';
-import { Side } from './Side';
-import { Main } from './Main';
+import React from "react";
+import "./App.css";
+import { Side } from "./Side";
+import { Main } from "./Main";
+import { LoginProvider, useLoginContext } from "./contexts/login";
+import { StartChatPage } from "./pages/startChatPage";
 
 export const App = () => {
   return (
-    <div className="container">
-      <header></header>
-
-      <Side></Side>
-      <Main></Main>
-    </div>
+    <LoginProvider>
+      <Foo />
+    </LoginProvider>
   );
-}
+};
+
+const Foo = () => {
+  const { loggedIn } = useLoginContext();
+  if (loggedIn) {
+    return (
+      <div className="container">
+        <header></header>
+
+        <Side></Side>
+        <Main></Main>
+      </div>
+    );
+  } else {
+    return <StartChatPage />;
+  }
+};

src/Chat/Chat.tsx

@@ -1,59 +1,59 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useRef, useState } from "react";
+import { Message, MessageAPI } from "../api/messageAPI";
+import { useLoginContext } from "../contexts/login";
 
-type Message = {
-  messageId: number
-  userName: string
-  text: string
-}
-type Messages = ReadonlyArray<Message>
-
-class FakeMessageAPI {
-  private onMessageListener = (message: Message): void => {
-  }
-
-  async playDummyMessages(): Promise<void> {
-    await new Promise(resolve => setTimeout(resolve, 2000))
-    this.onMessageListener({messageId: 4, userName: 'bob', text: 'なんだろ？'})
-    await new Promise(resolve => setTimeout(resolve, 2000))
-    this.onMessageListener({messageId: 5, userName: 'alice', text: 'ふ〜ん'})
-    await new Promise(resolve => setTimeout(resolve, 2000))
-    this.onMessageListener({messageId: 6, userName: 'alice', text: 'なに話す？'})
-  }
-
-  onMessage(onMessageListener: (message: Message) => void) {
-    this.onMessageListener = onMessageListener
-  }
-}
-const messageAPI = new FakeMessageAPI()
-messageAPI.playDummyMessages()
-
-export const Chat = () => {
-  const [messages, setMessages] = useState<Messages>([
-    {messageId: 1, userName: 'alice', text: 'こん〜'},
-    {messageId: 2, userName: 'bob', text: 'ちわ〜'},
-    {messageId: 3, userName: 'alice', text: '何はなしてた？'},
-  ]);
+export const Chat: React.FC = () => {
+  const [message, setMessage] = useState("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const messageAPI = useRef<MessageAPI | null>();
+  const authContext = useLoginContext();
 
   useEffect(() => {
-    messageAPI.onMessage(message => {
-      console.log(message)
-      setMessages(messages => messages.concat(message))
-    })
-  })
+    messageAPI.current = new MessageAPI();
+    messageAPI.current.onMessage("foo", (message) => {
+      setMessages((messages) => messages.concat(message));
+    });
+    return () => {
+      messageAPI.current!.close();
+    };
+  }, []);
+
+  const submit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setMessage("");
+    await messageAPI.current!.postMessage({
+      username: authContext.username!,
+      text: message,
+      channelId: "foo",
+    });
+  };
 
   return (
     <>
       <div className="chatContainer">
         <div className="chatMessages">
-          {messages.map(message => <div key={message.messageId}>{message.userName}: {message.text}</div>)}
+          {messages.map((message) => (
+            <div key={message.messageId}>
+              {message.username}: {message.text}
+            </div>
+          ))}
         </div>
         <div className="chatForm">
-          <div className="chatFormContainer">
-            <input className="chatFormInput" type="text" name="name"/>
-            <input className="chatFormSubmitButton" type="button" value="Submit"/>
-          </div>
+          <form className="chatFormContainer" onSubmit={submit}>
+            <input
+              className="chatFormInput"
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+            />
+            <input
+              className="chatFormSubmitButton"
+              type="submit"
+              value="Submit"
+            />
+          </form>
         </div>
       </div>
     </>
   );
-}
+};

src/Side.tsx

@@ -1,31 +1,26 @@
-import React from 'react';
-import './App.css';
+import React from "react";
+import "./App.css";
 
 type Channel = {
-    name: string
-}
+  name: string;
+};
 
 interface ChannelListProps {
-    channels: Channel[],
+  channels: Channel[];
 }
 
 const ChannelList: React.FC<ChannelListProps> = (props) => {
-    const channels = props.channels;
-    const listItems = channels.map((c) => <li>{c.name}</li>)
-    return (
-        <ul>{listItems}</ul>
-    );
-}
+  const channels = props.channels;
+  const channelList = channels.map((c) => <li key={c.name}>#{c.name}</li>);
+  return <ul>{channelList}</ul>;
+};
 
 export const Side = () => {
-    const channels: Channel[] = [
-        {name: "Room A"},
-        {name: "Room B"},
-    ];
+  const channels: Channel[] = [{ name: "general" }, { name: "random" }];
 
-    return (
-        <nav>
-            <ChannelList channels={channels}/>
-        </nav>
-    );
-}
+  return (
+    <nav>
+      <ChannelList channels={channels} />
+    </nav>
+  );
+};

src/api/messageAPI.ts

@@ -0,0 +1,57 @@
+export class MessageAPI {
+  private nextMessageId = 1;
+  private messages: Message[] = []
+  private messageListeners = new Map<string, MessageListener>()
+
+  constructor() {
+    console.log('MessageAPI created')
+  }
+
+  onMessage(channel: string, listener: MessageListener): void {
+    console.log('MessageAPI: MessageListener set')
+    this.messageListeners.set(channel, listener)
+  }
+
+  async postMessage({username, text, channelId}: NewMessage): Promise<Message> {
+    await new Promise(resolve => setTimeout(resolve, 200))
+    const message: Message = {
+      messageId: this.generateNextMessageId(),
+      username, text, channelId,
+    }
+    this.addMessage(message)
+    return message
+  }
+
+  async close(): Promise<void> {
+    console.log('MessageAPI: close')
+  }
+
+  private addMessage(message: Message): void {
+    const messageListener = this.messageListeners.get(message.channelId)
+    if (messageListener) {
+      messageListener(message)
+    }
+    this.messages.push(message)
+  }
+
+  private generateNextMessageId(): number {
+    const nextMessageId = this.nextMessageId;
+    this.nextMessageId++;
+    return nextMessageId
+  }
+}
+
+export type Message = {
+  readonly messageId: number
+  readonly username: string
+  readonly text: string
+  readonly channelId: string
+}
+
+export type NewMessage = {
+  readonly username: string
+  readonly text: string
+  readonly channelId: string
+}
+
+export type MessageListener = (message: Message) => void

src/contexts/login.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+
+/**
+ * ログイン/ログアウトの状態の型定義
+ */
+type LoginState = {
+  /**
+   * ログイン状態のときtrue、ログアウト状態のときfalseになる。
+   */
+  readonly loggedIn: boolean;
+  /**
+   * ユーザ名。ログイン状態のときstring、ログアウト状態のときundefinedになる。
+   */
+  readonly username?: string;
+  /**
+   * 状態をログイン状態に変更する
+   */
+  readonly setLogin: (username: string) => void;
+  /**
+   * 状態をログアウト状態に変更する
+   */
+  readonly setLogout: () => void;
+};
+
+/**
+ * 初期状態
+ */
+const initialState: LoginState = {
+  loggedIn: false,
+  setLogin: () => {},
+  setLogout: () => {},
+};
+
+// コンテキストを作る
+const LoginContext = React.createContext(initialState);
+
+// コンテキストのプロバイダー
+export const LoginProvider = ({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) => {
+  const [loggedIn, setLoggedIn] = useState(initialState.loggedIn);
+  const [username, setUsername] = useState(initialState.username);
+
+  useEffect(() => {
+    loginAPI.fetchUsername().then((username) => {
+      if (username) {
+        setLoggedIn(true);
+        setUsername(username);
+      }
+    });
+  }, []);
+
+  const loginState: LoginState = {
+    loggedIn,
+    username,
+    setLogin: async (username: string) => {
+      await loginAPI.login(username);
+      setLoggedIn(true);
+      setUsername(username);
+    },
+    setLogout: async () => {
+      await loginAPI.logout();
+      setLoggedIn(false);
+      setUsername(undefined);
+    },
+  };
+
+  return (
+    <LoginContext.Provider value={loginState}>{children}</LoginContext.Provider>
+  );
+};
+
+export const useLoginContext = () => React.useContext(LoginContext);
+
+/**
+ * ログインAPI
+ *
+ * このサンプルアプリでは便宜的にセッションストレージを用います。
+ * 実際の実装では、サーバの認証APIを呼び出す実装になると思います。
+ *
+ * セッションストレージはブラウザのタブが閉じられるまで値を保持するストレージです。
+ * 似たものにローカルストレージがありますが、ローカルストレージはブラウザのタブを閉じてもデータが消えない点と、タブ間でデータが共有される点が異なります。
+ * このサンプルアプリでは複数のタブを開いて、異なるユーザ名で同時にログインしたいので、ローカルストレージではなくセッションストレージを使います。
+ */
+class LoginAPI {
+  async fetchUsername(): Promise<string | null> {
+    return sessionStorage.getItem("username");
+  }
+
+  async login(username: string): Promise<void> {
+    sessionStorage.setItem("username", username);
+  }
+
+  async logout(): Promise<void> {
+    sessionStorage.removeItem("username");
+  }
+}
+
+const loginAPI = new LoginAPI();