From 546ed57f27cbc2f9a953c0ff3939806277365295 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Sun, 29 May 2022 14:28:34 -0500 Subject: [PATCH] defining more components, beginning to lay out site structure --- client/package-lock.json | 89 ++++++++++++++++++++++++- client/package.json | 5 +- client/src/App.css | 60 +++++++++++++++-- client/src/App.tsx | 40 ++++------- client/src/components/CartItem.tsx | 0 client/src/components/LandingPage.tsx | 25 +++++++ client/src/components/LoginForm.tsx | 11 +++ client/src/components/Navbar.tsx | 15 +++++ client/src/components/Page.tsx | 9 +++ client/src/components/ProductFilter.tsx | 0 client/src/components/Register.tsx | 11 +++ 11 files changed, 229 insertions(+), 36 deletions(-) create mode 100644 client/src/components/CartItem.tsx create mode 100644 client/src/components/LandingPage.tsx create mode 100644 client/src/components/Navbar.tsx create mode 100644 client/src/components/Page.tsx create mode 100644 client/src/components/ProductFilter.tsx create mode 100644 client/src/components/Register.tsx diff --git a/client/package-lock.json b/client/package-lock.json index b248d70..3705040 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-router-dom": "^6.3.0" }, "devDependencies": { "@types/react": "^18.0.0", @@ -376,6 +377,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -1097,6 +1109,14 @@ "node": ">=4" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/is-core-module": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", @@ -1253,6 +1273,35 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + }, "node_modules/resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", @@ -1658,6 +1707,14 @@ "@babel/helper-plugin-utils": "^7.16.7" } }, + "@babel/runtime": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, "@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -2103,6 +2160,14 @@ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", "dev": true }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "is-core-module": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz", @@ -2207,6 +2272,28 @@ "integrity": "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==", "dev": true }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + }, "resolve": { "version": "1.22.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz", diff --git a/client/package.json b/client/package.json index 6917b21..0209db0 100644 --- a/client/package.json +++ b/client/package.json @@ -9,7 +9,8 @@ }, "dependencies": { "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-router-dom": "^6.3.0" }, "devDependencies": { "@types/react": "^18.0.0", @@ -18,4 +19,4 @@ "typescript": "^4.6.3", "vite": "^2.9.9" } -} \ No newline at end of file +} diff --git a/client/src/App.css b/client/src/App.css index 5c26419..51a5c3a 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,14 +1,60 @@ -.App { - background-color: #282c34; - min-height: 100vh; +/* todo: define and import fonts */ + +/* universal styles */ +.page { display: flex; + position: relative; + top: 5rem; flex-direction: column; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + z-index: 7; } button { - font-size: calc(10px + 2vmin); + background-color: green; } + +/* navbar styles */ +nav { + display: flex; + position: absolute; + background-color: rgb(12, 6, 6); + color: white; + top: 0; + justify-content: space-around; + width: 100%; + height: auto; + border-bottom: 1px solid white; + z-index: 9; +} + +/* landing page styles */ +.landing > * { + display: flex; + flex-flow: column wrap; + align-items: center; + justify-content: center; + text-align: center; + height: auto; + padding: 1.2rem; + margin-bottom: 5rem; +} + +.landing header { + margin-top: 8rem; + width: 45vw; + background-color: gray; +} + +.landing section { + width: 60vw; + background-color: gray; +} + +.shop-buttons { + display: flex; + flex-flow: row nowrap; + width: 45vw; + background-color: gray; + justify-content: space-around; +} \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx index dfd9d7f..d235d12 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,34 +1,22 @@ -import { useState } from 'react' -import { getAllUsers, registerNewUser } from './util/apiUtils'; -import { userInfo } from './types/main'; +import NavBar from './components/Navbar'; +import LandingPage from './components/LandingPage'; + +import { BrowserRouter, Routes, Route } from 'react-router-dom'; import './App.css' +import LoginForm from './components/LoginForm'; +import Register from './components/Register'; function App() { - const [response, setResponse] = useState(undefined); - - let newUser: userInfo = { - email: 'anotherperson@email.com', - name: "one more person", - password: "dumb_password" - } - return ( -
-

Server response:

-
- {response && response.map((field: userInfo) => { - return ( - <> -

{field.name}

-

{field.email}

- - ) - })} -
+ + - - -
+ + } /> + } /> + } /> + + ) } diff --git a/client/src/components/CartItem.tsx b/client/src/components/CartItem.tsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/LandingPage.tsx b/client/src/components/LandingPage.tsx new file mode 100644 index 0000000..2523e58 --- /dev/null +++ b/client/src/components/LandingPage.tsx @@ -0,0 +1,25 @@ +import Page from "./Page"; + +function LandingPage() { + return ( + +
+

Welcome to Mikayla's Mostly Useless Little Store!

+

Thanks so much for visiting!

+
+ +
+

This site was built as part of the curriculum for the Codecademy Full Stack Engineer career path. The listings you see on this site do correspond to + real life products, which can be purchased through a functioning payment system powered by Stripe. Personal data is rigorously encoded and + protected. Feel free to shoot me a message with any questions or comments about this project, and enjoy browsing!

+
+ +
+ + +
+ + ) +} + +export default LandingPage; \ No newline at end of file diff --git a/client/src/components/LoginForm.tsx b/client/src/components/LoginForm.tsx index e69de29..e877632 100644 --- a/client/src/components/LoginForm.tsx +++ b/client/src/components/LoginForm.tsx @@ -0,0 +1,11 @@ +import Page from "./Page"; + +function LoginForm() { + return ( + +

Log in here!

+ + ) +} + +export default LoginForm; \ No newline at end of file diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx new file mode 100644 index 0000000..da74389 --- /dev/null +++ b/client/src/components/Navbar.tsx @@ -0,0 +1,15 @@ +import { useState } from "react"; + +function NavBar() { + const [loggedIn, setLoggedIn] = useState(false); + + return ( + + ) +} + +export default NavBar; \ No newline at end of file diff --git a/client/src/components/Page.tsx b/client/src/components/Page.tsx new file mode 100644 index 0000000..dd20300 --- /dev/null +++ b/client/src/components/Page.tsx @@ -0,0 +1,9 @@ +function Page({ children, classes }: any) { + return ( +
+ {children} +
+ ) +} + +export default Page; \ No newline at end of file diff --git a/client/src/components/ProductFilter.tsx b/client/src/components/ProductFilter.tsx new file mode 100644 index 0000000..e69de29 diff --git a/client/src/components/Register.tsx b/client/src/components/Register.tsx new file mode 100644 index 0000000..feb28bb --- /dev/null +++ b/client/src/components/Register.tsx @@ -0,0 +1,11 @@ +import Page from "./Page"; + +function Register() { + return ( + +

Enter your information to register:

+ + ); +} + +export default Register; \ No newline at end of file