황선혁 / weather_chatbot

Go to a project
Toggle navigation Toggle navigation pinning
Eric Whale
41cb16ea 1 parent f60a10fb

Add components, Build routing structure

Inline Side-by-side
Showing 11 changed files with 115 additions and 23 deletions
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 "react-dom": "^18.1.0", 15 "react-dom": "^18.1.0",
16 "react-router-dom": "^6.3.0", 16 "react-router-dom": "^6.3.0",
17 "react-scripts": "5.0.1", 17 "react-scripts": "5.0.1",
18 + "sass": "^1.51.0",
18 "web-vitals": "^2.1.4" 19 "web-vitals": "^2.1.4"
19 } 20 }
20 }, 21 },
...@@ -8341,6 +8342,11 @@ ...@@ -8341,6 +8342,11 @@
8341 "url": "https://opencollective.com/immer" 8342 "url": "https://opencollective.com/immer"
8342 } 8343 }
8343 }, 8344 },
8345 + "node_modules/immutable": {
8346 + "version": "4.0.0",
8347 + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
8348 + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
8349 + },
8344 "node_modules/import-fresh": { 8350 "node_modules/import-fresh": {
8345 "version": "3.3.0", 8351 "version": "3.3.0",
8346 "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", 8352 "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
...@@ -14002,6 +14008,22 @@ ...@@ -14002,6 +14008,22 @@
14002 "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", 14008 "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
14003 "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" 14009 "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
14004 }, 14010 },
14011 + "node_modules/sass": {
14012 + "version": "1.51.0",
14013 + "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz",
14014 + "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==",
14015 + "dependencies": {
14016 + "chokidar": ">=3.0.0 <4.0.0",
14017 + "immutable": "^4.0.0",
14018 + "source-map-js": ">=0.6.2 <2.0.0"
14019 + },
14020 + "bin": {
14021 + "sass": "sass.js"
14022 + },
14023 + "engines": {
14024 + "node": ">=12.0.0"
14025 + }
14026 + },
14005 "node_modules/sass-loader": { 14027 "node_modules/sass-loader": {
14006 "version": "12.6.0", 14028 "version": "12.6.0",
14007 "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", 14029 "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
...@@ -22228,6 +22250,11 @@ ...@@ -22228,6 +22250,11 @@
22228 "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz", 22250 "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.14.tgz",
22229 "integrity": "sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw==" 22251 "integrity": "sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw=="
22230 }, 22252 },
22253 + "immutable": {
22254 + "version": "4.0.0",
22255 + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
22256 + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
22257 + },
22231 "import-fresh": { 22258 "import-fresh": {
22232 "version": "3.3.0", 22259 "version": "3.3.0",
22233 "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", 22260 "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
...@@ -26174,6 +26201,16 @@ ...@@ -26174,6 +26201,16 @@
26174 "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", 26201 "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
26175 "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" 26202 "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
26176 }, 26203 },
26204 + "sass": {
26205 + "version": "1.51.0",
26206 + "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz",
26207 + "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==",
26208 + "requires": {
26209 + "chokidar": ">=3.0.0 <4.0.0",
26210 + "immutable": "^4.0.0",
26211 + "source-map-js": ">=0.6.2 <2.0.0"
26212 + }
26213 + },
26177 "sass-loader": { 26214 "sass-loader": {
26178 "version": "12.6.0", 26215 "version": "12.6.0",
26179 "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", 26216 "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
10 "react-dom": "^18.1.0", 10 "react-dom": "^18.1.0",
11 "react-router-dom": "^6.3.0", 11 "react-router-dom": "^6.3.0",
12 "react-scripts": "5.0.1", 12 "react-scripts": "5.0.1",
13 + "sass": "^1.51.0",
13 "web-vitals": "^2.1.4" 14 "web-vitals": "^2.1.4"
14 }, 15 },
15 "scripts": { 16 "scripts": {
......
1 -.App {
2 - text-align: center;
3 -}
1 -import { Link, Outlet } from "react-router-dom"; 1 +// components
2 -import "./App.css"; 2 +import { Outlet, useLocation } from "react-router-dom";
3 +import Bottombar from "./components/Bottombar";
4 +import Topbar from "./components/Topbar";
3 5
4 function App() { 6 function App() {
7 + let location = useLocation();
8 +
9 + const renderByLocation = () => {
10 + if (location.pathname != "/") {
11 + return <Outlet />;
12 + }
13 + return (
14 + <div>
15 + <h1>Notification</h1>
16 +
17 + <p>temporal use when first logged in</p>
18 + <p>If user wants to use notifications after moving to another page</p>
19 + <p>the notification will be in settings page</p>
20 + </div>
21 + );
22 + };
23 +
5 return ( 24 return (
6 - <div className="App"> 25 + <div>
7 - <h1>Welcome to weather-chatbot</h1> 26 + <Topbar />
8 - <nav 27 + {renderByLocation()}
9 - style={{ 28 + <Bottombar />
10 - borderBottom: "solid 1px",
11 - paddingBottom: "1rem",
12 - }}
13 - >
14 - <Link to="/login">login</Link> | <Link to="/signup">signup</Link>
15 - <br />
16 - <Link to="/chatroom">Chatroom</Link> |{" "}
17 - <Link to="/userroom">Userroom</Link>
18 - <br />
19 - <Link to="/settings">Settings</Link>
20 - </nav>
21 - <Outlet />
22 </div> 29 </div>
23 ); 30 );
24 } 31 }
......
1 +import { NavLink } from "react-router-dom";
2 +// sytles
3 +import "../styles/bar.scss";
4 +
5 +function Bottombar() {
6 + return (
7 + <div className="bottombar">
8 + <nav>
9 + <NavLink to="/chatroom">Chatroom</NavLink> |{" "}
10 + <NavLink to="/userroom">Userroom</NavLink>
11 + </nav>
12 + </div>
13 + );
14 +}
15 +
16 +export default Bottombar;
1 +import { Link } from "react-router-dom";
2 +// styles
3 +import "../styles/bar.scss";
4 +
5 +function Topbar() {
6 + return (
7 + <div className="topbar">
8 + <Link to="/chatroom">LOGO</Link>
9 + <div>Search Bar</div>
10 + <Link to="/settings">Settings</Link>
11 + </div>
12 + );
13 +}
14 +
15 +export default Topbar;
1 import React from "react"; 1 import React from "react";
2 import ReactDOM from "react-dom/client"; 2 import ReactDOM from "react-dom/client";
3 -import { BrowserRouter, Routes, Route } from "react-router-dom"; 3 +import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
4 import reportWebVitals from "./reportWebVitals"; 4 import reportWebVitals from "./reportWebVitals";
5 import App from "./App"; 5 import App from "./App";
6 // routes 6 // routes
......
1 +// styles
2 +import "../styles/chatroom.scss";
3 +
1 function Chatroom() { 4 function Chatroom() {
2 return ( 5 return (
3 - <div> 6 + <div className="chatroom">
4 <h1>Chatroom page</h1> 7 <h1>Chatroom page</h1>
5 </div> 8 </div>
6 ); 9 );
......
...@@ -2,6 +2,11 @@ function Settings() { ...@@ -2,6 +2,11 @@ function Settings() {
2 return ( 2 return (
3 <div> 3 <div>
4 <h1>Settings page</h1> 4 <h1>Settings page</h1>
5 + <div>username</div>
6 + <div>email</div>
7 + <div>birthday</div>
8 + <br />
9 + <button>notification</button>
5 </div> 10 </div>
6 ); 11 );
7 } 12 }
......
1 +.topbar,
2 +.bottombar {
3 + display: flex;
4 + flex-direction: row;
5 +}
1 +.chatroom {
2 + margin: 0;
3 + padding: 0;
4 + display: flex;
5 + flex-direction: column;
6 +}