From 1cd65840403bbd4daec4c517daa286f328034c42 Mon Sep 17 00:00:00 2001 From: Barbara Date: Sun, 20 Nov 2022 23:54:33 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9E=95=20Install=20`react-router-dom`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 49 +++++++++++++++++++++++++++++++++++++++++++++++ src/index.tsx | 6 +++++- 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index cd55699..3ae10a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2068,6 +2068,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -2555,6 +2560,12 @@ "@types/node": "*" } }, + "@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + }, "@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -2666,6 +2677,27 @@ "@types/react": "*" } }, + "@types/react-router": { + "version": "5.1.19", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz", + "integrity": "sha512-Fv/5kb2STAEMT3wHzdKQK2z8xKq38EDIGVrutYLmQVVLe+4orDFquU52hQrULnEHinMKv9FSA6lf9+uNT1ITtA==", + "dev": true, + "requires": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dev": true, + "requires": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -9912,6 +9944,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "requires": { + "@remix-run/router": "1.0.3" + } + }, + "react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "requires": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/src/index.tsx b/src/index.tsx index 67c2a69..1bf8877 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from "react" import ReactDOM from "react-dom/client" +import { BrowserRouter } from "react-router-dom" import { App } from "./App" import { reportWebVitals } from "./reportWebVitals" @@ -8,7 +9,10 @@ import "./index.css" const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement) root.render( - + + {/* BrowserRouter keeps UI in sync with the URL */} + + ) From 13fb88988d0764d90e07e2e11f60a9c8dbab4458 Mon Sep 17 00:00:00 2001 From: Barbara Date: Sun, 20 Nov 2022 23:55:47 +0000 Subject: [PATCH 2/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=F0=9F=92=84=20Move=20Hom?= =?UTF-8?q?e=20onto=20`/`=20Route,=20style=20page=20container=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ src/App.tsx | 60 +++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 45 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index c3fa631..20a0e2b 100644 --- a/package.json +++ b/package.json @@ -24,10 +24,12 @@ "@types/react-dom": "^18.0.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^5.43.0", "@typescript-eslint/parser": "^5.43.0", "autoprefixer": "^10.4.13", diff --git a/src/App.tsx b/src/App.tsx index 2e289fa..320afd3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,51 @@ // import React from "react" -import logo from "./common/assets/logo.svg" +// import logo from "./common/assets/logo.svg" +import { Routes, Route } from "react-router-dom" + import "./common/assets/styles/App.css" export function App(): JSX.Element { return ( -
-
-

Hiiiii

- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+ {/* Any Pop-up modals */} +
+ {/* */} +
+ + }> + +
+
) } + +export function Home(): JSX.Element { + return ( +
+

Hiiii

+
+ ) +} + +{ + /* // return ( + //
+ //
+ //

Hiiiii

+ // logo + //

+ // Edit src/App.tsx and save to reload. + //

+ // + // Learn React + // + //
+ //
+ // ) */ +} From 4722d06453edb091417dcde46ff4acfdd7191f80 Mon Sep 17 00:00:00 2001 From: Barbara Date: Mon, 21 Nov 2022 00:35:32 +0000 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20=F0=9F=9A=9A=20Create=20`home`?= =?UTF-8?q?=20and=20`404`=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 42 +++++-------------------- src/common/pages/404NotFound.tsx | 11 +++++++ src/features/home/components/.gitignore | 4 +++ src/features/home/index.tsx | 7 +++++ 4 files changed, 29 insertions(+), 35 deletions(-) create mode 100644 src/common/pages/404NotFound.tsx create mode 100644 src/features/home/components/.gitignore create mode 100644 src/features/home/index.tsx diff --git a/src/App.tsx b/src/App.tsx index 320afd3..d0468eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,51 +1,23 @@ -// import React from "react" -// import logo from "./common/assets/logo.svg" import { Routes, Route } from "react-router-dom" +import { NotFound404 } from "common/pages/404NotFound" +import { Home } from "features/home" + import "./common/assets/styles/App.css" export function App(): JSX.Element { return ( -
+
{/* Any Pop-up modals */} -
+
{/* */} -
+
}> + }>
) } - -export function Home(): JSX.Element { - return ( -
-

Hiiii

-
- ) -} - -{ - /* // return ( - //
- //
- //

Hiiiii

- // logo - //

- // Edit src/App.tsx and save to reload. - //

- // - // Learn React - // - //
- //
- // ) */ -} diff --git a/src/common/pages/404NotFound.tsx b/src/common/pages/404NotFound.tsx new file mode 100644 index 0000000..29a84b6 --- /dev/null +++ b/src/common/pages/404NotFound.tsx @@ -0,0 +1,11 @@ +import { Link } from "react-router-dom" + +export function NotFound404(): JSX.Element { + return ( +
+

Sorry, this page could not be found!

+ Return Home + {/* Report a bug */} +
+ ) +} diff --git a/src/features/home/components/.gitignore b/src/features/home/components/.gitignore new file mode 100644 index 0000000..86d0cb2 --- /dev/null +++ b/src/features/home/components/.gitignore @@ -0,0 +1,4 @@ +# Ignore everything in this directory +* +# Except this file +!.gitignore \ No newline at end of file diff --git a/src/features/home/index.tsx b/src/features/home/index.tsx new file mode 100644 index 0000000..8bc4479 --- /dev/null +++ b/src/features/home/index.tsx @@ -0,0 +1,7 @@ +export function Home(): JSX.Element { + return ( +
+

Welcome

+
+ ) +} From 59515393519a2fc35c8ca73afe8bb9b19d0d35cb Mon Sep 17 00:00:00 2001 From: Barbara Date: Mon, 21 Nov 2022 00:36:11 +0000 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=92=84=20Create=20reusable=20css=20cl?= =?UTF-8?q?asses=20for=20canvas,=20a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/index.css b/src/index.css index 9e4b1f1..65f5f30 100644 --- a/src/index.css +++ b/src/index.css @@ -15,3 +15,18 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + + +@layer base { + .app {@apply relative min-h-screen h-full flex flex-col bg-green-200;} + .viewport {@apply min-h-screen flex flex-col items-center bg-amber-200;} + .canvas {@apply w-full grow flex flex-col items-center justify-center bg-green-400;} + + main { @apply flex flex-col items-center bg-slate-500; } + + a { @apply text-blue-500 underline;} +} + + + +@layer components {} \ No newline at end of file From 763e95cdc2f8340299d9b8a9ff15f1e99cb2f534 Mon Sep 17 00:00:00 2001 From: Barbara Date: Mon, 21 Nov 2022 01:15:58 +0000 Subject: [PATCH 5/6] =?UTF-8?q?=E2=9C=A8=20=F0=9F=92=84=20Add=20Top=20Navb?= =?UTF-8?q?ar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++- src/common/constants/features.tsx | 4 ++++ src/index.css | 11 ++++++----- 3 files changed, 12 insertions(+), 6 deletions(-) create mode 100644 src/common/constants/features.tsx diff --git a/src/App.tsx b/src/App.tsx index d0468eb..9f3781c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { Routes, Route } from "react-router-dom" +import { TopBar } from "common/components/ui/TopBar" import { NotFound404 } from "common/pages/404NotFound" import { Home } from "features/home" @@ -10,7 +11,7 @@ export function App(): JSX.Element {
{/* Any Pop-up modals */}
- {/* */} +
}> diff --git a/src/common/constants/features.tsx b/src/common/constants/features.tsx new file mode 100644 index 0000000..b95afe8 --- /dev/null +++ b/src/common/constants/features.tsx @@ -0,0 +1,4 @@ +export const FEATURES = { + home: { title: "Home", url: "/" }, + feedback: { title: "Feedback", url: "feedback" }, +} diff --git a/src/index.css b/src/index.css index 65f5f30..2c7ca6b 100644 --- a/src/index.css +++ b/src/index.css @@ -18,13 +18,14 @@ code { @layer base { - .app {@apply relative min-h-screen h-full flex flex-col bg-green-200;} + .app {@apply relative min-h-screen h-full flex flex-col ;} .viewport {@apply min-h-screen flex flex-col items-center bg-amber-200;} - .canvas {@apply w-full grow flex flex-col items-center justify-center bg-green-400;} + .canvas {@apply w-full grow flex flex-col items-center justify-center bg-slate-400;} - main { @apply flex flex-col items-center bg-slate-500; } - - a { @apply text-blue-500 underline;} + /* nav {@apply bg-slate-500} */ + main, .main { @apply flex flex-col items-center; } + + a, .a { @apply text-blue-900 underline;} } From fa25ee7eb7907e665f292131b26202fd6f023e35 Mon Sep 17 00:00:00 2001 From: Barbara Date: Mon, 21 Nov 2022 01:25:27 +0000 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B=20Remove=20gitignore=20when=20?= =?UTF-8?q?actual=20file=20is=20added=20to=20folder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/components/ui/.gitignore | 4 ---- src/common/components/ui/TopBar.tsx | 22 ++++++++++++++++++++++ 2 files changed, 22 insertions(+), 4 deletions(-) delete mode 100644 src/common/components/ui/.gitignore create mode 100644 src/common/components/ui/TopBar.tsx diff --git a/src/common/components/ui/.gitignore b/src/common/components/ui/.gitignore deleted file mode 100644 index 86d0cb2..0000000 --- a/src/common/components/ui/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -# Ignore everything in this directory -* -# Except this file -!.gitignore \ No newline at end of file diff --git a/src/common/components/ui/TopBar.tsx b/src/common/components/ui/TopBar.tsx new file mode 100644 index 0000000..cd37816 --- /dev/null +++ b/src/common/components/ui/TopBar.tsx @@ -0,0 +1,22 @@ +import { NavLink } from "react-router-dom" + +import { FEATURES } from "common/constants/features" + +const NAV_FEATURES = [FEATURES.home, FEATURES.feedback] + +export function TopBar(): JSX.Element { + return ( +
+ +
+ ) +}