diff --git a/package-lock.json b/package-lock.json index 7050681..be99196 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-router-dom": "^6.9.0", "react-scripts": "5.0.1", "react-use-websocket": "^4.3.1", + "sass": "^1.59.3", "typescript": "^4.9.5", "web-vitals": "^2.1.4" } @@ -8809,6 +8810,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14788,6 +14794,22 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.59.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.59.3.tgz", + "integrity": "sha512-QCq98N3hX1jfTCoUAsF3eyGuXLsY7BCnCEg9qAact94Yc21npG2/mVOqoDvE0fCbWDqiM4WlcJQla0gWG2YlxQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -23410,6 +23432,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.19.tgz", "integrity": "sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==" }, + "immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -27522,6 +27549,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.59.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.59.3.tgz", + "integrity": "sha512-QCq98N3hX1jfTCoUAsF3eyGuXLsY7BCnCEg9qAact94Yc21npG2/mVOqoDvE0fCbWDqiM4WlcJQla0gWG2YlxQ==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/package.json b/package.json index 50465ea..47e35c6 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-router-dom": "^6.9.0", "react-scripts": "5.0.1", "react-use-websocket": "^4.3.1", + "sass": "^1.59.3", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.tsx b/src/App.tsx index 383ab1a..6e8c7fc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import './App.css'; +import '../src/styles/App.scss'; import Router from "./config/Router"; function App() { diff --git a/src/index.tsx b/src/index.tsx index 23b3422..d77cdf9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './App'; const root = ReactDOM.createRoot( diff --git a/src/layout/components/Button.tsx b/src/layout/components/Button.tsx new file mode 100644 index 0000000..f8fc6e8 --- /dev/null +++ b/src/layout/components/Button.tsx @@ -0,0 +1,13 @@ +import React, {FunctionComponent} from "react"; + +interface Props { + className?: string + onClick?: () => void + children?: React.ReactNode +} + +export const GHButton: FunctionComponent = ({className, onClick, children}) => { + return ( + {children} + ); +} \ No newline at end of file diff --git a/src/layout/pages/Home.tsx b/src/layout/pages/Home.tsx index 5c63fe8..5ade6fe 100644 --- a/src/layout/pages/Home.tsx +++ b/src/layout/pages/Home.tsx @@ -1,4 +1,5 @@ import React from "react"; +import {GHButton} from "../components/Button"; const ROOM_URL = 'http://localhost:5062/room'; @@ -8,14 +9,8 @@ const Home = () => { React.useEffect(() => { fetch(ROOM_URL) - .then((r) => { - console.log(r); - return r.json(); - }) - .then((data) => { - console.log(data); - setRooms(data); - }); + .then(r => r.json()) + .then(data => setRooms(data)); }, []); const handleCreateRoom = () => { @@ -32,7 +27,7 @@ const Home = () => { return (
- + Create Room