From 6b09f3f0a4c2f08253688dfb09ab3ef4ac7a8191 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 19 Nov 2022 14:33:29 -0600
Subject: [PATCH] heavy work on ui, recipe page connects to db

---
 client/src/App.tsx                            | 14 ++++++-
 client/src/components/pages/Browser.tsx       | 17 ++++++++
 client/src/components/pages/Collection.tsx    | 14 +++++++
 client/src/components/pages/Login.tsx         | 14 +++++++
 client/src/components/pages/Profile.tsx       |  9 +++++
 .../accountinfo.settings.tsx}                 |  0
 .../collections.settings.tsx}                 |  0
 .../pages/ProfileSettings/index.tsx           |  9 +++++
 .../profileinfo.settings.tsx}                 |  0
 client/src/components/pages/Recipe.tsx        | 39 +++++++++++++++++++
 .../src/components/pages/Register/index.tsx   | 10 +++++
 .../pages/Register/register.aboutyou.tsx      | 15 +++++++
 .../pages/Register/register.addfriends.tsx    | 11 ++++++
 .../pages/Register/register.collection.tsx    | 11 ++++++
 client/src/components/pages/Subscriptions.tsx |  0
 client/src/components/pages/Welcome.tsx       |  9 ++++-
 client/src/components/ui/Divider.tsx          |  7 ++++
 client/src/main.tsx                           |  6 +--
 client/src/sass/components/Divider.scss       | 12 ++++++
 client/src/sass/helpers/_placeholders.scss    |  6 +++
 20 files changed, 196 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/pages/Browser.tsx
 rename client/src/components/pages/{ProfileSettings.tsx => ProfileSettings/accountinfo.settings.tsx} (100%)
 rename client/src/components/pages/{Register.tsx => ProfileSettings/collections.settings.tsx} (100%)
 create mode 100644 client/src/components/pages/ProfileSettings/index.tsx
 rename client/src/components/pages/{Search.tsx => ProfileSettings/profileinfo.settings.tsx} (100%)
 create mode 100644 client/src/components/pages/Register/index.tsx
 create mode 100644 client/src/components/pages/Register/register.aboutyou.tsx
 create mode 100644 client/src/components/pages/Register/register.addfriends.tsx
 create mode 100644 client/src/components/pages/Register/register.collection.tsx
 create mode 100644 client/src/components/pages/Subscriptions.tsx
 create mode 100644 client/src/sass/components/Divider.scss

diff --git a/client/src/App.tsx b/client/src/App.tsx
index aab1351..3eb3740 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,4 +1,10 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Browser from './components/pages/Browser';
+import Collection from './components/pages/Collection';
+import Login from './components/pages/Login';
+import Profile from './components/pages/Profile';
+import Recipe from './components/pages/Recipe';
+import Register from './components/pages/Register';
 import Welcome from './components/pages/Welcome';
 import './sass/App.scss'
 
@@ -8,7 +14,13 @@ function App() {
     <BrowserRouter>
       <div className="App">
         <Routes>
-          <Route path="/" element={<Welcome />} />
+          <Route path="/"               element={<Welcome />} />
+          <Route path="/register"       element={<Register />} />
+          <Route path="/login"          element={<Login />} />
+          <Route path="/profile"        element={<Profile />} />
+          <Route path="/collection"     element={<Collection />} />
+          <Route path="/explore"        element={<Browser />} />
+          <Route path="/recipe/:id"     element={<Recipe />} />
         </Routes>
       </div>
     </BrowserRouter>
diff --git a/client/src/components/pages/Browser.tsx b/client/src/components/pages/Browser.tsx
new file mode 100644
index 0000000..9fe10f9
--- /dev/null
+++ b/client/src/components/pages/Browser.tsx
@@ -0,0 +1,17 @@
+import { Button, Page } from "../ui";
+
+export default function Browser() {
+    return (
+        <Page>
+            <h1>Search recipes</h1>
+            <div>
+                <input type="text"></input>
+                <Button>ADVANCED SEARCH</Button>
+            </div>
+
+            {/* divider */}
+
+            {/* recipe cards, or "no recipes matching your search" */}
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Collection.tsx b/client/src/components/pages/Collection.tsx
index e69de29..31a9c3c 100644
--- a/client/src/components/pages/Collection.tsx
+++ b/client/src/components/pages/Collection.tsx
@@ -0,0 +1,14 @@
+import { Page } from "../ui";
+
+export default function Collection() {
+    return (
+        <Page>
+            <h1>Mikayla's collection</h1>
+            <p>37 recipes</p>
+            <p>71 ingredients</p>
+            <p>11 types of cuisine</p>
+
+            {/* recipes */}
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Login.tsx b/client/src/components/pages/Login.tsx
index e69de29..01567d7 100644
--- a/client/src/components/pages/Login.tsx
+++ b/client/src/components/pages/Login.tsx
@@ -0,0 +1,14 @@
+import { Button, Page } from "../ui";
+
+export default function Login() {
+    return (
+        <Page>
+            <h1>Hello! Nice to see you again.</h1>
+
+            {/* login form */}
+
+            <Button onClick={() => {}}>Log In</Button>
+            <p>Not registered yet? You can do that here.</p>
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Profile.tsx b/client/src/components/pages/Profile.tsx
index e69de29..d60d39e 100644
--- a/client/src/components/pages/Profile.tsx
+++ b/client/src/components/pages/Profile.tsx
@@ -0,0 +1,9 @@
+import { Page } from "../ui";
+
+export default function Profile() {
+    return (
+        <Page>
+            <h1>Mikayla Dobson</h1>
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/ProfileSettings.tsx b/client/src/components/pages/ProfileSettings/accountinfo.settings.tsx
similarity index 100%
rename from client/src/components/pages/ProfileSettings.tsx
rename to client/src/components/pages/ProfileSettings/accountinfo.settings.tsx
diff --git a/client/src/components/pages/Register.tsx b/client/src/components/pages/ProfileSettings/collections.settings.tsx
similarity index 100%
rename from client/src/components/pages/Register.tsx
rename to client/src/components/pages/ProfileSettings/collections.settings.tsx
diff --git a/client/src/components/pages/ProfileSettings/index.tsx b/client/src/components/pages/ProfileSettings/index.tsx
new file mode 100644
index 0000000..0351b9b
--- /dev/null
+++ b/client/src/components/pages/ProfileSettings/index.tsx
@@ -0,0 +1,9 @@
+import { Page } from "../../ui";
+
+export default function ProfileSettings() {
+    return (
+        <Page>
+            <h1>Profile Settings</h1>
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Search.tsx b/client/src/components/pages/ProfileSettings/profileinfo.settings.tsx
similarity index 100%
rename from client/src/components/pages/Search.tsx
rename to client/src/components/pages/ProfileSettings/profileinfo.settings.tsx
diff --git a/client/src/components/pages/Recipe.tsx b/client/src/components/pages/Recipe.tsx
index e69de29..9a2d275 100644
--- a/client/src/components/pages/Recipe.tsx
+++ b/client/src/components/pages/Recipe.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Page, Panel } from "../ui";
+
+interface IRecipe {
+    id: number
+    name: string
+    description: string
+    preptime: string
+    datecreated?: string
+    dateupdated?: string
+}
+
+export default function Recipe() {
+    const { id } = useParams();
+    const [recipe, setRecipe] = useState<IRecipe>();
+
+    const getRecipeByID = async () => {
+        const result = await fetch('http://localhost:8080/recipe/' + id)
+        .then(response => response.json())
+        .then(data => setRecipe(data));
+    }
+
+    useEffect(() => {
+        getRecipeByID();
+    }, [])
+
+    return (
+        <Page>
+            { recipe && (
+                <Panel>
+                    <h1>{recipe.name}</h1>
+                    <p>{recipe.description}</p>
+                    <p>{recipe.preptime}</p>
+                </Panel>
+            )}
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Register/index.tsx b/client/src/components/pages/Register/index.tsx
new file mode 100644
index 0000000..1543b25
--- /dev/null
+++ b/client/src/components/pages/Register/index.tsx
@@ -0,0 +1,10 @@
+import { Page } from "../../ui";
+import AboutYou from "./register.aboutyou";
+
+export default function Register() {
+    return (
+        <Page>
+            <AboutYou />
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Register/register.aboutyou.tsx b/client/src/components/pages/Register/register.aboutyou.tsx
new file mode 100644
index 0000000..3cf9e6b
--- /dev/null
+++ b/client/src/components/pages/Register/register.aboutyou.tsx
@@ -0,0 +1,15 @@
+import { Page } from "../../ui";
+
+export default function AboutYou() {
+    return (
+        <Page>
+            <h1>Hi! Thanks for being here.</h1>
+
+            {/* divider */}
+            
+            <h2>Tell us a bit about yourself:</h2>
+
+            {/* auth form */}
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Register/register.addfriends.tsx b/client/src/components/pages/Register/register.addfriends.tsx
new file mode 100644
index 0000000..3013dd3
--- /dev/null
+++ b/client/src/components/pages/Register/register.addfriends.tsx
@@ -0,0 +1,11 @@
+import { Page } from "../../ui";
+
+export default function AddFriends() {
+    let user = null;
+
+    return (
+        <Page>
+            <h1>Hi, {user || "Mikayla"}! Great to meet you.</h1>
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Register/register.collection.tsx b/client/src/components/pages/Register/register.collection.tsx
new file mode 100644
index 0000000..dcb8c92
--- /dev/null
+++ b/client/src/components/pages/Register/register.collection.tsx
@@ -0,0 +1,11 @@
+import { Page } from "../../ui";
+
+export default function InitialCollection() {
+    let user = null;
+
+    return (
+        <Page>
+            <h1>Hi, {user || "Mikayla"}! Great to meet you.</h1>
+        </Page>
+    )
+}
\ No newline at end of file
diff --git a/client/src/components/pages/Subscriptions.tsx b/client/src/components/pages/Subscriptions.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Welcome.tsx b/client/src/components/pages/Welcome.tsx
index 4e8b17c..33b156c 100644
--- a/client/src/components/pages/Welcome.tsx
+++ b/client/src/components/pages/Welcome.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button, Page, Panel } from "../ui"
+import Divider from "../ui/Divider";
 
 const Welcome = () => {
     const [authorized, setAuthorized] = useState(false);
@@ -22,19 +23,25 @@ const Welcome = () => {
     )
 
     return (
-        <Page extraStyles='App'>
+        <Page extraStyles="narrow-dividers">
             <Panel extraStyles='inherit-background c-papyrus uppercase'>
                 <h1>Welcome to Recipin</h1>
             </Panel>
 
+            <Divider />
+
             <Panel extraStyles="inherit-background c-papyrus uppercase">
                 <h2>Simple Recipe Management and Sharing for the Home</h2>
             </Panel>
 
+            <Divider />
+
             <Panel extraStyles="inherit-background c-papyrus uppercase">
                 <h2>Build Shopping Lists Directly from Your Recipes</h2>
             </Panel>
 
+            <Divider />
+
             { authorized ? authUserActions : callToRegister }
         </Page>
     )
diff --git a/client/src/components/ui/Divider.tsx b/client/src/components/ui/Divider.tsx
index e69de29..cc680a8 100644
--- a/client/src/components/ui/Divider.tsx
+++ b/client/src/components/ui/Divider.tsx
@@ -0,0 +1,7 @@
+import "/src/sass/components/Divider.scss";
+
+export default function Divider({ extraClasses = "" }) {
+    return (
+        <div className={`divider ${extraClasses}`}></div>
+    )
+}
\ No newline at end of file
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 01af61d..bbf6a0e 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -3,8 +3,4 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './sass/index.scss'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)
diff --git a/client/src/sass/components/Divider.scss b/client/src/sass/components/Divider.scss
new file mode 100644
index 0000000..7a7ca03
--- /dev/null
+++ b/client/src/sass/components/Divider.scss
@@ -0,0 +1,12 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
+.divider {
+    display: block;
+    height: 4px;
+    width: 75%;
+    border-radius: 35%;
+    background-color: $papyrus;
+
+    @extend %variations;
+}
\ No newline at end of file
diff --git a/client/src/sass/helpers/_placeholders.scss b/client/src/sass/helpers/_placeholders.scss
index a432780..0b793d4 100644
--- a/client/src/sass/helpers/_placeholders.scss
+++ b/client/src/sass/helpers/_placeholders.scss
@@ -12,4 +12,10 @@
     &.uppercase {
         text-transform: uppercase;
     }
+
+    &.narrow-dividers {
+        .divider {
+            width: 45vw;
+        }
+    }
 }
\ No newline at end of file