Skip to content

Commit d58ab4c

Browse files
suinsuin
committed
feat: 🎸 モックのAPIでログインからメッセージの送信ができるようにした
1 parent 970a8a7 commit d58ab4c

18 files changed

+627
-416
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@types/react-dom": "^16.9.0",
1313
"react": "^16.13.0",
1414
"react-dom": "^16.13.0",
15+
"react-router-dom": "^5.2.0",
1516
"react-scripts": "3.4.0",
1617
"typescript": "^4.0.2"
1718
},
@@ -37,6 +38,7 @@
3738
]
3839
},
3940
"devDependencies": {
41+
"@types/react-router-dom": "^5.1.5",
4042
"prettier": "^2.1.0"
4143
}
4244
}

‎public/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
28+
<title>YYChat</title>
2829
</head>
2930
<body>
3031
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

+2-172
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,3 @@
1-
:root {
2-
--primary: white;
3-
--secondary: HSL(225, 6%, 51%);
4-
--base: #282F44;
5-
--base2: HSL(225, 6%, 21%);
6-
--text-color: HSL(225, 6%, 21%);
7-
--link-color: #093341;
8-
}
9-
10-
html {
11-
font-size: 1em;
12-
line-height: 1.5;
13-
height: 100%;
14-
}
15-
16-
body {
17-
color: var(--text-color);
18-
font-size: 17px;
19-
}
20-
21-
body, h1, h2 {
22-
font-family: Montserrat, sans-serif;
23-
margin: 0;
24-
padding: 0;
25-
}
26-
27-
.wf-active h1, .wf-active h2 {
28-
opacity: 1;
29-
transition: opacity .1s
30-
}
31-
32-
h1 {
33-
color: var(--primary);
34-
font-size: 1.3rem;
35-
}
36-
37-
@supports(display: grid) {
38-
.notice {
39-
display: none;
40-
}
41-
}
42-
43-
h2 {
44-
color: var(--primary);
45-
font-size: 1.1rem;
46-
}
47-
48-
a, a:link { color: var(--link-color) }
49-
50-
.hidden {
51-
display: none !important;
52-
}
53-
.text-center, footer, header {
54-
text-align: center;
55-
}
56-
57-
.container {
58-
display: grid;
59-
grid-template-areas:
60-
"header header header"
61-
"nav content side"
62-
"footer footer footer";
63-
height: 100vh;
64-
grid-template-columns: 200px 1fr 200px;
65-
grid-template-rows: auto 1fr auto;
66-
}
67-
68-
.chatContainer {
69-
display: grid;
70-
grid-template-areas:
71-
"messages messages messages"
72-
"messages messages messages"
73-
"form form form";
74-
height: 100vh;
75-
grid-template-columns: 200px 1fr 200px;
76-
grid-template-rows: auto 1fr auto;
77-
align-content: space-between;
78-
}
79-
80-
.chatMessages {
81-
grid-area: messages;
82-
width: 100%;
83-
background: #f9f5f0;
84-
}
85-
86-
.chatForm {
87-
grid-area: form;
88-
width: 100%;
89-
background: #f9f5f0;
90-
}
91-
92-
.chatFormContainer {
93-
display: flex;
94-
width: 100%;
95-
}
96-
97-
.chatFormContainer > .chatFormInput {
98-
width: 100%;
99-
height: 2.5em;
100-
font-size: 16px;
101-
}
102-
103-
.chatFormContainer > .chatFormSubmitButton {
104-
background-color: #80A9F3;
105-
width: 10em;
106-
height: 3em;
107-
display: inline-block;
108-
text-align: center;
109-
font-size: 16px;
110-
font-weight: 700;
111-
text-align: center;
112-
text-decoration: none;
113-
cursor: pointer;
114-
}
115-
116-
header {
117-
background: #F4991A;
118-
grid-area: header;
119-
padding: 1rem 0;
120-
121-
padding: 0 1rem;
122-
display: flex;
123-
justify-content: space-between;
124-
align-items: center;
125-
}
126-
127-
nav, aside {
128-
background: #80A9F3;
129-
}
130-
131-
nav, aside, main {
132-
color: lightslategray;
133-
display: flex;
134-
align-items: center;
135-
justify-content: center;
136-
}
137-
138-
nav {
139-
grid-area: nav;
140-
}
141-
142-
main {
143-
grid-area: content;
144-
width: 100%;
145-
background: #F9F5F0;
146-
}
147-
148-
aside {
149-
grid-area: side;
150-
margin-right: 0.5rem;
151-
}
152-
153-
footer {
154-
background: #321313;
155-
grid-area: footer;
156-
color: var(--primary);
157-
}
158-
159-
@media (max-width: 768px) {
160-
.container {
161-
grid-template-areas:
162-
"header"
163-
"nav"
164-
"content"
165-
"side"
166-
"footer";
167-
grid-template-columns: 1fr;
168-
grid-template-rows: auto minmax(75px, auto) 1fr minmax(75px, auto) auto;
169-
}
170-
nav, aside {
171-
margin: 0;
172-
}
1+
html, body, #root {
2+
height: 100%;
1733
}

‎src/App.tsx

+40-19
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
11
import React from "react";
2+
import { RouteProps } from "react-router";
3+
import {
4+
BrowserRouter as Router,
5+
Redirect,
6+
Route,
7+
Switch,
8+
} from "react-router-dom";
29
import "./App.css";
3-
import { Side } from "./Side";
4-
import { Main } from "./Main";
5-
import { LoginProvider, useLoginContext } from "./contexts/login";
6-
import { StartChatPage } from "./pages/startChatPage";
10+
import { LoginContextProvider, useLoginContext } from "./contexts/loginContext";
11+
import { ChannelPage } from "./pages/ChannelPage";
12+
import { NewChannelPage } from "./pages/NewChannelPage";
13+
import { StartChatPage } from "./pages/StartChatPage";
714

815
export const App = () => {
916
return (
10-
<LoginProvider>
11-
<Foo />
12-
</LoginProvider>
17+
<LoginContextProvider>
18+
<Router>
19+
<Switch>
20+
<PrivateRoute path="/channels/:channel" component={ChannelPage} />
21+
<PrivateRoute path="/newchannel" component={NewChannelPage} />
22+
<Route path="/" component={StartChatPage} />
23+
</Switch>
24+
</Router>
25+
</LoginContextProvider>
1326
);
1427
};
1528

16-
const Foo = () => {
29+
const PrivateRoute = ({
30+
component: Component,
31+
...rest
32+
}: {
33+
readonly component: any;
34+
} & Omit<RouteProps, "render">) => {
1735
const { loggedIn } = useLoginContext();
18-
if (loggedIn) {
19-
return (
20-
<div className="container">
21-
<header></header>
2236

23-
<Side></Side>
24-
<Main></Main>
25-
</div>
26-
);
27-
} else {
28-
return <StartChatPage />;
29-
}
37+
return (
38+
<Route
39+
{...rest}
40+
render={(props) =>
41+
loggedIn ? (
42+
<Component {...props} />
43+
) : (
44+
<Redirect
45+
to={{ pathname: "/", state: { referer: props.location } }}
46+
/>
47+
)
48+
}
49+
/>
50+
);
3051
};

‎src/Chat/Chat.tsx

-59
This file was deleted.

‎src/Main.tsx

-13
This file was deleted.

‎src/Side.tsx

-26
This file was deleted.

‎src/api/channelAPI.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const channels = new Set<string>(["general", "random"]);
2+
3+
export class ChannelAPI {
4+
async create({ name }: { readonly name: string }): Promise<void> {
5+
if (channels.has(name)) {
6+
throw new Error(`channel already exists`);
7+
}
8+
channels.add(name);
9+
}
10+
11+
async list(): Promise<Array<string>> {
12+
return Array.from(channels.values()).sort();
13+
}
14+
}

0 commit comments

Comments
 (0)