diff --git a/index.html b/index.html index 830eb28..b8b10cd 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ crossorigin="anonymous" /> - Smart Shopping List + GrocerEase diff --git a/src/App.tsx b/src/App.tsx index 2b4f35f..5ac74d9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,10 @@ +/// + import React from "react"; import { Routes, Route } from "react-router-dom"; -import { Home, Layout, List, ManageList, PageNotFound } from "./views"; +import { Home, Layout, List, ManageList, PageNotFound, About } from "./views"; import { useFindUser, useShoppingListData, useShoppingLists } from "./api"; @@ -74,6 +76,8 @@ export function App() { /> + }> + {/* a catch all route for if someone tries to manually navigate to something not created yet */} } /> diff --git a/src/api/useAuth.tsx b/src/api/useAuth.tsx index 2ff0b27..172b4bb 100644 --- a/src/api/useAuth.tsx +++ b/src/api/useAuth.tsx @@ -4,34 +4,72 @@ import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; import { addUserToDatabase, User } from "./firebase"; import toast from "react-hot-toast"; import Button from "react-bootstrap/Button"; +import { useLocation, useNavigate } from "react-router-dom"; /** * A button that signs the user in using Google OAuth. When clicked, * the button redirects the user to the Google OAuth sign-in page. * After the user signs in, they are redirected back to the app. */ -export const SignInButton = () => ( - -); + +type SignInButtonProps = { + isSignIn?: boolean; +}; + +export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => { + const location = useLocation(); + const navigate = useNavigate(); + + return ( + + ); +}; /** * A button that signs the user out of the app using Firebase Auth. */ export const SignOutButton = () => { + const location = useLocation(); + const navigate = useNavigate(); + return ( diff --git a/src/components/CreateList.tsx b/src/components/CreateList.tsx index edb93a0..27d641b 100644 --- a/src/components/CreateList.tsx +++ b/src/components/CreateList.tsx @@ -45,23 +45,25 @@ export function CreateList({ user, setListPath }: Props) { }; return ( -
-

Create New Shopping List

- Name Your List - -
- -
- - -
+ <> +
+

Create New Shopping List

+ Name Your List + +
+ +
+ + +
+ ); } diff --git a/src/components/AuthenticatedNavBar.css b/src/components/NavBar.css similarity index 100% rename from src/components/AuthenticatedNavBar.css rename to src/components/NavBar.css diff --git a/src/components/AuthenticatedNavBar.tsx b/src/components/authenticated/AuthenticatedNavBar.tsx similarity index 91% rename from src/components/AuthenticatedNavBar.tsx rename to src/components/authenticated/AuthenticatedNavBar.tsx index 9bec6ac..735c206 100644 --- a/src/components/AuthenticatedNavBar.tsx +++ b/src/components/authenticated/AuthenticatedNavBar.tsx @@ -1,11 +1,11 @@ import React from "react"; import { NavLink } from "react-router-dom"; -import { SignOutButton } from "../api"; +import { SignOutButton } from "../../api"; import Navbar from "react-bootstrap/Navbar"; import Container from "react-bootstrap/Container"; import Nav from "react-bootstrap/Nav"; -import "./AuthenticatedNavBar.css"; +import "../NavBar.css"; export function AuthenticatedNavBar() { return ( diff --git a/src/components/index.ts b/src/components/index.ts index 50121f3..73f3d4b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,5 +2,6 @@ export * from "./ListItem"; export * from "./SingleList"; export * from "./CreateList"; export * from "./ProtectedRoute"; -export * from "./AuthenticatedNavBar"; +export * from "./authenticated/AuthenticatedNavBar"; export * from "./forms/ShareListForm"; +export * from "./unauthenticated/UnauthenticatedNavBar"; diff --git a/src/components/unauthenticated/UnauthenticatedNavBar.tsx b/src/components/unauthenticated/UnauthenticatedNavBar.tsx new file mode 100644 index 0000000..056ea79 --- /dev/null +++ b/src/components/unauthenticated/UnauthenticatedNavBar.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; +import Navbar from "react-bootstrap/Navbar"; +import Container from "react-bootstrap/Container"; +import Nav from "react-bootstrap/Nav"; + +import "../NavBar.css"; + +export function UnauthenticatedNavBar() { + return ( + + + + Home + + + About + + + + ); +} diff --git a/src/icons/GithubLogo.svg b/src/icons/GithubLogo.svg new file mode 100644 index 0000000..631c5d4 --- /dev/null +++ b/src/icons/GithubLogo.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/icons/LinkedInLogo.svg b/src/icons/LinkedInLogo.svg new file mode 100644 index 0000000..2d42e98 --- /dev/null +++ b/src/icons/LinkedInLogo.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/views/Home.tsx b/src/views/Home.tsx index 4c46603..2c74636 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,7 +1,7 @@ import React from "react"; import "./Home.css"; -import { SingleList, CreateList } from "../components"; -import { List, User } from "../api/firebase"; +import { List, User } from "../api"; +import { AuthenticatedHome, UnauthenticatedHome } from "../views"; interface Props { data: List[]; @@ -12,24 +12,11 @@ interface Props { export function Home({ data, setListPath, user }: Props) { return ( <> -
-

- Hello from the home (/) page! -

- {user && ( - - )} -
+ {user ? ( + + ) : ( + + )} ); } diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx index ddd2fca..ef4d0d2 100644 --- a/src/views/Layout.tsx +++ b/src/views/Layout.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { Outlet } from "react-router-dom"; -import { SignInButton, User } from "../api"; -import { AuthenticatedNavBar } from "../components"; +import { Outlet, useNavigate } from "react-router-dom"; +import { User } from "../api"; +import { AuthenticatedNavBar, UnauthenticatedNavBar } from "../components"; +import Button from "react-bootstrap/Button"; import "./Layout.css"; @@ -10,16 +11,27 @@ interface Props { } export function Layout({ user }: Props) { + const navigate = useNavigate(); return ( -
-
-

Smart shopping list

-
-
- - {!user && } -
- {user && } -
+ <> +
+
+

GrocerEase

+
+
+ {user && ( + + )} + +
+ {user ? : } +
+ ); } diff --git a/src/views/authenticated/AuthenticatedHome.tsx b/src/views/authenticated/AuthenticatedHome.tsx new file mode 100644 index 0000000..d3fb293 --- /dev/null +++ b/src/views/authenticated/AuthenticatedHome.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { SingleList, CreateList } from "../../components"; +import { List, User } from "../../api"; + +interface Props { + data: List[]; + setListPath: (path: string) => void; + user: User | null; +} + +export function AuthenticatedHome({ data, setListPath, user }: Props) { + return ( + <> +

+ Hello from the home (/) page! +

+ {user && ( + <> +
    + {data.map((list, index) => ( + + ))} +
+ + + )} + + ); +} diff --git a/src/views/index.ts b/src/views/index.ts index 26ee7f1..e54ac8d 100644 --- a/src/views/index.ts +++ b/src/views/index.ts @@ -3,3 +3,6 @@ export * from "./Home"; export * from "./Layout"; export * from "./authenticated/List"; export * from "./unauthenticated/PageNotFound"; +export * from "./unauthenticated/About"; +export * from "./unauthenticated/UnauthenticatedHome"; +export * from "./authenticated/AuthenticatedHome"; diff --git a/src/views/unauthenticated/About.tsx b/src/views/unauthenticated/About.tsx new file mode 100644 index 0000000..8e6e442 --- /dev/null +++ b/src/views/unauthenticated/About.tsx @@ -0,0 +1,123 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import LinkedInLogo from "../../icons/LinkedInLogo.svg?react"; +import GithubLogo from "../../icons/GithubLogo.svg?react"; +import { SignInButton } from "../../api"; + +export function About() { + return ( +
+
+

How it works

+ +
    +
  • + Create a list for different stores or different grouping of items. +
    • +
  • Select a list that you'd like to add items on.
    • +
  • + Open the list manager, to start adding items and choosing when you + will need to restock next. +
    • +
  • + Now that your new list has items you can start checking off items as + you shop! +
      +
    • + Each time an item is marked purchase the application evaluates + your shopping habits! Supporting you by adjusting your next + purchase predictions base on when your previous shopping + history! +
      • +
    +
    • +
  • + If someone else needs to be let into to the shopping time you can + easily share specific lists with with in the list manager so they + can see and mark items as purchased too! +
    • +
+
+
+

Creators

+
+ Maha Ahmed + + + + + + +
+
+ Brianna Bland + + + + + + +
+
+ Falak Zahra + + + + + + +
+
+ Ross Clettenberg + + + + + + +
+
+
+

Thank you

+

Mentors:

+
+ Alex D. + + + + + + +
+
+ Aditya Dalal + + + + + + +
+
+ Tanner Gill + + + + + + +
+

+ The entire{" "} + + The Collab Lab + + . +

+
+
+ ); +} diff --git a/src/views/unauthenticated/UnauthenticatedHome.tsx b/src/views/unauthenticated/UnauthenticatedHome.tsx new file mode 100644 index 0000000..b23874c --- /dev/null +++ b/src/views/unauthenticated/UnauthenticatedHome.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import { SignInButton } from "../../api"; +import Button from "react-bootstrap/Button"; + +export function UnauthenticatedHome() { + const navigate = useNavigate(); + + return ( +
+

Welcome to GrocerEase

+

+ The next best thing to having someone else do the shopping for you! + Create and manage smart lists, while it learns your shopping habits to + let you know exactly when you will need to buy that next batch of toilet + paper! +

+ +
+

New to GrocerEase:

+ + +
+ +
+

Welcome Back:

+ +
+
+ ); +} diff --git a/vite.config.js b/vite.config.js index fe66119..cffdeab 100644 --- a/vite.config.js +++ b/vite.config.js @@ -59,7 +59,10 @@ export default defineConfig(({ mode }) => ({ plugins: [ mode === "development" && eslint(), react(), - svgr({ exportAsDefault: true }), + svgr({ + exportAsDefault: true, + dimensions: false, + }), VitePWA(PWAConfig), ], server: { open: true, port: 3000 },