+ {content} +
+ ); +} diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx new file mode 100644 index 0000000..9efb742 --- /dev/null +++ b/web/src/components/Navigation.tsx @@ -0,0 +1,116 @@ +import { useState } from "react"; + +import ROUTE_CONSTANTS from "../types/routes.ts"; +import { useLocation } from "react-router-dom"; +import ShoppingListIcon from "./icons/ShoppingListIcon.tsx"; + +export default function Navigation() { + const [displayHamburgerMenu, setDisplayHamburgerMenu] = useState
+
+ );
+}
+
+interface DropdownLinkProps {
+ name: string;
+ url: string;
+}
+
+function DropdownLink({ name, url }: DropdownLinkProps) {
+ return (
+
+ {name}
+
+ );
+};
+
+interface NavigationLinkProps {
+ name: string;
+ url: string;
+ current: boolean;
+}
+
+function NavigationLink({ name, url, current }: NavigationLinkProps) {
+ return (
+
+ {name}
+
+ );
+}
+
+interface IconNavigationLinkProps {
+ icon: React.ReactElement;
+ url: string;
+}
+
+function IconNavigationLink({ icon, url }: IconNavigationLinkProps) {
+ return (
+
+ {icon}
+
+ );
+}
diff --git a/web/src/components/Spinner.tsx b/web/src/components/Spinner.tsx
new file mode 100644
index 0000000..e8c536e
--- /dev/null
+++ b/web/src/components/Spinner.tsx
@@ -0,0 +1,12 @@
+interface SpinnerProps {
+ content: string;
+}
+
+export default function Spinner({ content }: SpinnerProps) {
+ return (
+ <>
+
+ {content}
+ + ); +} diff --git a/web/src/components/buttons/DropdownButton.tsx b/web/src/components/buttons/DropdownButton.tsx new file mode 100644 index 0000000..f1de8b3 --- /dev/null +++ b/web/src/components/buttons/DropdownButton.tsx @@ -0,0 +1,19 @@ + +interface DropdownButtonProps { + content: string; + name: string; + value: string; + selected: boolean; + changeHandler: (e: React.ChangeEvent
+
+ );
+}
diff --git a/web/src/components/cards/RecipeCardLarge.tsx b/web/src/components/cards/RecipeCardLarge.tsx
new file mode 100644
index 0000000..00da616
--- /dev/null
+++ b/web/src/components/cards/RecipeCardLarge.tsx
@@ -0,0 +1,60 @@
+import type { Recipe } from "../../types/recipe";
+import RecipePlaceholder from "../../assets/images/recipe_placeholder.png"
+import LikeButton from "../buttons/LikeButton";
+import { useNavigate } from "react-router-dom";
+import { EngagementViewRecipe } from "../../services/EngagementService";
+import { isApiError } from "../../types/api/error";
+
+interface RecipeCardLargeProps {
+ recipe: Recipe | null;
+}
+
+export default function RecipeCardLarge({ recipe }: RecipeCardLargeProps) {
+ const navigate = useNavigate();
+
+ // HANDLERS
+ const makeButtonHandler = async () => {
+ if (!recipe) return;
+
+ // Navigate first, so it feels faster
+ await navigate(`/v2/web/recipe/${recipe.Id}`);
+
+ const result = await EngagementViewRecipe(recipe.Id);
+ if (isApiError(result)) {
+ console.error(result.message);
+ }
+ }
+
+ if (recipe == null) {
+ return
+
+
+ {content}
+ +Coming soon!
+ } + + return ( +
+ 
+
+ );
+}
diff --git a/web/src/components/cards/RecipeCardSmall.tsx b/web/src/components/cards/RecipeCardSmall.tsx
new file mode 100644
index 0000000..e8a86b0
--- /dev/null
+++ b/web/src/components/cards/RecipeCardSmall.tsx
@@ -0,0 +1,51 @@
+import type { Recipe } from "../../types/recipe";
+import RecipePlaceholder from "../../assets/images/recipe_placeholder.png"
+import LikeButton from "../buttons/LikeButton";
+import { EngagementViewRecipe } from "../../services/EngagementService";
+import { isApiError } from "../../types/api/error";
+import { useNavigate } from "react-router-dom";
+
+interface RecipeCardSmallProps {
+ recipe: Recipe;
+}
+
+export default function RecipeCardSmall({ recipe }: RecipeCardSmallProps) {
+ const navigate = useNavigate();
+
+ // HANDLERS
+ const makeButtonHandler = async () => {
+ // Navigate first, so it feels faster
+ await navigate(`/v2/web/recipe/${recipe.Id}`);
+
+ const result = await EngagementViewRecipe(recipe.Id);
+ if (isApiError(result)) {
+ console.error(result.message);
+ }
+ }
+
+ return (
+
+
+ + {recipe.Title} +
++ Serves {recipe.Serves} +
++ {recipe.Description} +
+
+
+
+ + {recipe.Category} - {recipe.Duration.Total} mins +
+ {recipe.Favorite &&
+
+
+ );
+}
diff --git a/web/src/components/display/RecipeMetaData.tsx b/web/src/components/display/RecipeMetaData.tsx
new file mode 100644
index 0000000..bbaccad
--- /dev/null
+++ b/web/src/components/display/RecipeMetaData.tsx
@@ -0,0 +1,58 @@
+import type { Recipe } from "../../types/recipe"
+import ServingSizeIcon from "../icons/ServingSizeIcon"
+import StarIcon from "../icons/StarIcon"
+import TimeIcon from "../icons/TimeIcon"
+
+function displayDifficulty(diff: number): string {
+ switch (diff) {
+ case 1:
+ return "Beginner"
+ case 2:
+ return "Easy"
+ case 3:
+ return "Intermediate"
+ case 4:
+ return "Challenging"
+ case 5:
+ return "Extreme"
+ default:
+ return ""
+ }
+}
+
+interface RecipeMetaDataProps {
+ recipe: Recipe | null;
+}
+
+export default function RecipeMetaData({ recipe }: RecipeMetaDataProps) {
+ return (
+
+
+ + {recipe.Title} +
++ Serves {recipe.Serves} +
+
+
+
+ + {recipe.Category} - {recipe.Duration.Total} mins +
+ {recipe.Favorite &&
+
+
+ );
+}
diff --git a/web/src/components/forms/IngredientItem.tsx b/web/src/components/forms/IngredientItem.tsx
new file mode 100644
index 0000000..a6174b7
--- /dev/null
+++ b/web/src/components/forms/IngredientItem.tsx
@@ -0,0 +1,94 @@
+import { Reorder, useDragControls } from "motion/react";
+import { INGREDIENT_UNITS, type RecipeIngredient } from "../../types/recipe";
+import DeleteIconSmall from "../icons/DeleteIconSmall";
+import DragIconSmall from "../icons/DragIconSmall";
+
+interface IngredientItemProps {
+ classes: string;
+ ingredient: RecipeIngredient;
+ onChange: (id: string, name: "Amount" | "Unit" | "Name", value: string) => void;
+ removeIngredientHandler: (id: string) => void;
+ allowDelete: boolean;
+ valid: boolean;
+ dirty: boolean;
+ markDirty: (id: string) => void;
+}
+
+export default function IngredientItem({ classes, ingredient, onChange, removeIngredientHandler, allowDelete, valid, dirty, markDirty }: IngredientItemProps) {
+ const controls = useDragControls();
+
+ const changeHandler = (name: "Amount" | "Unit" | "Name", value: string) => {
+ if (!dirty) markDirty(ingredient.Id);
+ onChange(ingredient.Id, name, value);
+ }
+
+ return (
+
+
+ Prep: {recipe?.Duration.Prep ?? 0} min
+Cook: {recipe?.Duration.Cook ?? 0} min
+
+
+
+ {Array.from({ length: recipe?.Difficulty ?? 0 }).map((_, i) => (
+
+ {displayDifficulty(recipe?.Difficulty ?? 0)}
+
+
+ Serves {recipe?.Serves ?? 0}
+
+
+
+ {(dirty && !valid) && (
+
+
+
+
+ changeHandler("Amount", e.target.value)}
+ className={`w-1/2 md:w-28 ${classes} ${dirty && ingredient.Amount <= 0 ? "border-red-500" : ""}`}
+ />
+
+
+
+
+ changeHandler("Name", e.target.value)}
+ className={`flex-grow ${classes} ${dirty && ingredient.Name.trim() === "" ? "border-red-500" : ""}`}
+ />
+
+
+
+ {
+ e.preventDefault();
+ controls.start(e);
+ }}
+ className="p-1 md:p-0 cursor-pointer touch-none"
+ >
+
+ Please fill out all fields.
+ )} +
+
+ {children}
+ Group:
+ onChange(section.Id, e.target.value)} + placeholder="Group label" + className="mx-2 px-2 py-1 border border-gray-300 flex-grow rounded-sm min-w-1" + /> + +
+
+
+ {
+ e.preventDefault();
+ controls.start(e);
+ }}
+ >
+
+
+
+
+ {index + 1}.
+
+
+ {(!valid && dirty) && (
+
+ + Please enter an instruction (blank entries are not allowed). +
+ )} +
+
+ {
+ e.preventDefault();
+ controls.start(e);
+ }}
+ >
+
+
+
+
+ {Object.entries(validation)
+ .filter(([, isValid]) => !isValid)
+ .map(([name]) => {
+ const key = name as keyof CreateRecipeFormEntries;
+ return (
+
+ );
+}
diff --git a/web/src/components/icons/DeleteIconSmall.tsx b/web/src/components/icons/DeleteIconSmall.tsx
new file mode 100644
index 0000000..4039fec
--- /dev/null
+++ b/web/src/components/icons/DeleteIconSmall.tsx
@@ -0,0 +1,7 @@
+export default function DeleteIconSmall() {
+ return (
+
+ );
+}
diff --git a/web/src/components/icons/DragIconSmall.tsx b/web/src/components/icons/DragIconSmall.tsx
new file mode 100644
index 0000000..1e626f2
--- /dev/null
+++ b/web/src/components/icons/DragIconSmall.tsx
@@ -0,0 +1,7 @@
+export default function DragIconSmall() {
+ return (
+
+ );
+}
diff --git a/web/src/components/icons/ServingSizeIcon.tsx b/web/src/components/icons/ServingSizeIcon.tsx
new file mode 100644
index 0000000..02c9e3a
--- /dev/null
+++ b/web/src/components/icons/ServingSizeIcon.tsx
@@ -0,0 +1,28 @@
+
+export default function ServingSizeIcon() {
+ return (
+
+ );
+}
diff --git a/web/src/components/icons/ServingSizeIconSmall.tsx b/web/src/components/icons/ServingSizeIconSmall.tsx
new file mode 100644
index 0000000..6b5b342
--- /dev/null
+++ b/web/src/components/icons/ServingSizeIconSmall.tsx
@@ -0,0 +1,16 @@
+
+export default function ServingSizeIconSmall() {
+ return <>
+
+
+}
diff --git a/web/src/components/icons/ShoppingListIcon.tsx b/web/src/components/icons/ShoppingListIcon.tsx
new file mode 100644
index 0000000..b7da984
--- /dev/null
+++ b/web/src/components/icons/ShoppingListIcon.tsx
@@ -0,0 +1,19 @@
+
+interface ShoppingListIconProps {
+ current: boolean;
+};
+
+export default function ShoppingListIcon({ current }: ShoppingListIconProps) {
+ return (
+
+ );
+}
diff --git a/web/src/components/icons/StarIcon.tsx b/web/src/components/icons/StarIcon.tsx
new file mode 100644
index 0000000..fa35e82
--- /dev/null
+++ b/web/src/components/icons/StarIcon.tsx
@@ -0,0 +1,25 @@
+interface StarIconProps {
+ filled: boolean;
+ size: number;
+};
+
+export default function StarIcon({ filled, size = 6 }: StarIconProps) {
+
+ return <>
+ {filled ? (
+
+ ) : (
+
+ )}
+
+}
diff --git a/web/src/components/icons/StarIconSmall.tsx b/web/src/components/icons/StarIconSmall.tsx
new file mode 100644
index 0000000..e377ec3
--- /dev/null
+++ b/web/src/components/icons/StarIconSmall.tsx
@@ -0,0 +1,25 @@
+
+interface StarIconSmallProps {
+ filled: boolean;
+};
+
+export default function StarIconSmall({ filled }: StarIconSmallProps) {
+
+ return <>
+ {filled ? (
+
+ ) : (
+
+ )}
+
+}
diff --git a/web/src/components/icons/TimeIcon.tsx b/web/src/components/icons/TimeIcon.tsx
new file mode 100644
index 0000000..7dbed49
--- /dev/null
+++ b/web/src/components/icons/TimeIcon.tsx
@@ -0,0 +1,13 @@
+export default function TimeIcon() {
+ return (
+
+ );
+}
diff --git a/web/src/components/icons/TimeIconSmall.tsx b/web/src/components/icons/TimeIconSmall.tsx
new file mode 100644
index 0000000..40ef6f9
--- /dev/null
+++ b/web/src/components/icons/TimeIconSmall.tsx
@@ -0,0 +1,9 @@
+export default function TimeIconSmall() {
+ return <>
+
+ ;
+}
diff --git a/web/src/components/inputs/RecipeCreateFormDropdown.tsx b/web/src/components/inputs/RecipeCreateFormDropdown.tsx
new file mode 100644
index 0000000..1b1c861
--- /dev/null
+++ b/web/src/components/inputs/RecipeCreateFormDropdown.tsx
@@ -0,0 +1,59 @@
+import { type ChangeEvent, type Dispatch, type SetStateAction } from "react";
+import type { CreateRecipeFormDirtyEntries } from "../../pages/Create";
+
+export interface RecipeCreateDropdownOption {
+ value: string;
+ name: string;
+}
+
+interface RecipeCreateFormDropdownProps {
+ label: string;
+ name: string;
+ desc: string;
+ required?: boolean;
+ valid: boolean;
+ value: string;
+ setValue: Dispatch+ {MESSAGES[key]} +
+ ); + })} + {validation.ingredients.filter(x => !x.valid).length > 0 && ( ++ {MESSAGES.ingredients} +
+ )} + {validation.instructions.filter(x => !x.valid).length > 0 && ( ++ {MESSAGES.instructions} +
+ )} +
+
+
+ );
+}
+
+
diff --git a/web/src/components/inputs/RecipeCreateFormInput.tsx b/web/src/components/inputs/RecipeCreateFormInput.tsx
new file mode 100644
index 0000000..b8a69cd
--- /dev/null
+++ b/web/src/components/inputs/RecipeCreateFormInput.tsx
@@ -0,0 +1,58 @@
+import { type ChangeEvent, type Dispatch, type InputHTMLAttributes, type SetStateAction } from "react";
+import type { CreateRecipeFormDirtyEntries } from "../../pages/Create";
+
+interface RecipeCreateFormInputProps
+ extends Omit<
+ InputHTMLAttributes+ {desc} +
+ + {!valid && ( ++ {error} +
+ )} +
+
+
+ );
+}
+
+
diff --git a/web/src/components/inputs/RecipeCreateFormTagsInput.tsx b/web/src/components/inputs/RecipeCreateFormTagsInput.tsx
new file mode 100644
index 0000000..690105d
--- /dev/null
+++ b/web/src/components/inputs/RecipeCreateFormTagsInput.tsx
@@ -0,0 +1,70 @@
+import { useState, type ChangeEvent, type Dispatch, type FormEvent, type SetStateAction } from "react";
+
+interface RecipeCreateFormTagsInputsProps {
+ tags: string[];
+ setTags: Dispatch+ {desc} +
+ + {!valid && ( ++ {error} +
+ )} +
+
+
+ );
+}
+
+
diff --git a/web/src/components/inputs/RecipeCreateFormWrapper.tsx b/web/src/components/inputs/RecipeCreateFormWrapper.tsx
new file mode 100644
index 0000000..b7ac0b8
--- /dev/null
+++ b/web/src/components/inputs/RecipeCreateFormWrapper.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+interface RecipeCreateFormWrapperProps {
+ label: string;
+ name: string;
+ desc: string;
+ required: boolean;
+ parentClasses: string;
+ children: ReactNode;
+}
+
+export default function RecipeCreateFormWrapper({ label, name, desc, required = false, parentClasses, children }: RecipeCreateFormWrapperProps) {
+ const normalized_name = name.toLowerCase().replaceAll(" ", "-");
+
+ return (
+ + {desc} +
+ + {!valid && ( ++ {error} +
+ )} +
+
+
+ );
+}
+
diff --git a/web/src/components/inputs/RecipeSearchBar.tsx b/web/src/components/inputs/RecipeSearchBar.tsx
new file mode 100644
index 0000000..f387064
--- /dev/null
+++ b/web/src/components/inputs/RecipeSearchBar.tsx
@@ -0,0 +1,122 @@
+import { use, useEffect, useState, type ChangeEvent, type Dispatch, type FormEvent, type SetStateAction } from "react";
+import type { SearchFilters } from "../../types/search";
+import FilterButton from "../buttons/FilterButton";
+import RecipeSearchFilterDropdown from "./RecipeSearchFilterDropdown";
+import { SearchRecipes } from "../../services/RecipeService";
+import { isApiError } from "../../types/api/error";
+import type { Recipe } from "../../types/recipe";
+import { useNavigate } from "react-router-dom";
+import { FilterContext } from "../../context/FilterContext";
+
+interface RecipeSearchBarProps {
+ // filters: SearchFilters;
+ // setFilters: React.Dispatch+ {desc} +
+ {children} +
+
+ );
+}
diff --git a/web/src/components/items/ActivityListItem.tsx b/web/src/components/items/ActivityListItem.tsx
new file mode 100644
index 0000000..813edc8
--- /dev/null
+++ b/web/src/components/items/ActivityListItem.tsx
@@ -0,0 +1,27 @@
+import type { Engagement } from "../../types/engagement";
+
+
+interface ActivityListItemProps {
+ engagement: Engagement;
+}
+
+function FormatDate(date: Date): string {
+ return new Intl.DateTimeFormat("en-US", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit"
+ }).format(date);
+}
+
+export default function ActivityListItem({ engagement }: ActivityListItemProps) {
+ return <>
+
+
+ + Meal +
+
+
+
+
+ + Cook Time +
+
+
+
+
+ + Difficulty +
+
+
+
+
+ + Serving Size +
+
+
+
+
+
+ + {engagement.Message} +
++ {FormatDate(new Date(engagement.Created))} +
+
+
+ {sections?.map(section => ( +
+ {/* NOTE: If there is a only one section, do not display a name. */}
+ {sections.length > 1 && (
+
+ ))}
+
+
+ );
+}
diff --git a/web/src/components/items/InstructionList.tsx b/web/src/components/items/InstructionList.tsx
new file mode 100644
index 0000000..401237c
--- /dev/null
+++ b/web/src/components/items/InstructionList.tsx
@@ -0,0 +1,26 @@
+import type { RecipeInstruction } from "../../types/recipe";
+
+interface InstructionListProps {
+ instructions: RecipeInstruction[];
+}
+export default function InstructionList({ instructions }: InstructionListProps) {
+ return (
+ <>
+
+
+ Ingredients
+ {/* Serving size toggle */} +
+
+
+
+
+
+ + {sections?.map(section => ( +
{section.Name}
+ )} +-
+ {ingredients?.filter(x => x.SectionId === section.Id).map(ingredient => (
+
- + + + + + {ingredient.Amount > 0 ? (ingredient.Amount * scale) : null} {ingredient.Unit} + + {ingredient.Name} + + ))} +
+
+
+
+
+ );
+}
diff --git a/web/src/components/items/RecipeListItem.tsx b/web/src/components/items/RecipeListItem.tsx
new file mode 100644
index 0000000..defd44e
--- /dev/null
+++ b/web/src/components/items/RecipeListItem.tsx
@@ -0,0 +1,73 @@
+import { useNavigate } from "react-router-dom";
+import { EngagementViewRecipe } from "../../services/EngagementService";
+import { isApiError } from "../../types/api/error";
+import type { Recipe, Tag } from "../../types/recipe"
+
+interface RecipeListItemProps {
+ recipe: Recipe;
+};
+
+function displayDifficulty(diff: number): string {
+ switch (diff) {
+ case 1:
+ return "Beginner"
+ case 2:
+ return "Easy"
+ case 3:
+ return "Intermediate"
+ case 4:
+ return "Challenging"
+ case 5:
+ return "Extreme"
+ default:
+ return ""
+ }
+}
+
+function displayTags(tags: Tag[]): string {
+ return tags.map(tag => tag.Name).join(", ");
+}
+
+export default function RecipeListItem({ recipe }: RecipeListItemProps) {
+ const navigate = useNavigate();
+
+ // HANDLERS
+ const clickHandler = async () => {
+ if (!recipe) return;
+
+ // Navigate first, so it feels faster
+ await navigate(`/v2/web/recipe/${recipe.Id}`);
+
+ const result = await EngagementViewRecipe(recipe.Id);
+ if (isApiError(result)) {
+ console.error(result.message);
+ }
+ }
+
+ return (
+ Instructions
++
-
+ {instructions?.map((instruction, i) => (
+
-
+ ++
{i + 1}
+{instruction.Content}
+
+ ))}
+
void clickHandler()} className="text-base md:text-lg hover:text-blue-600 duration-100 cursor-pointer"> + {recipe.Title} +
++ Difficulty: {displayDifficulty(recipe.Difficulty)} + {" "} | Duration: {recipe.Duration.Total} min + {" "} | Category: {recipe.Category} +
++ Difficulty: {displayDifficulty(recipe.Difficulty)} +
++ Duration: {recipe.Duration.Total} min +
++ Category: {recipe.Category} +
+ {recipe.Tags && ( ++ Tags: {displayTags(recipe.Tags)} +
+ )} + void clickHandler()} className="w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer">
+
+
+ );
+}
diff --git a/web/src/components/items/TagList.tsx b/web/src/components/items/TagList.tsx
new file mode 100644
index 0000000..51c0060
--- /dev/null
+++ b/web/src/components/items/TagList.tsx
@@ -0,0 +1,43 @@
+import type { Tag } from "../../types/recipe";
+
+interface TagListProps {
+ tags: Tag[]
+ created: Date
+ modified: Date | null;
+}
+
+function FormatDate(date: Date): string {
+ return new Intl.DateTimeFormat("en-US", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit"
+ }).format(date);
+}
+
+export default function TagList({ tags, created, modified }: TagListProps) {
+
+
+ return (
+
+
+
+
+
+
+ + {recipe.Title} {recipe.Category} +
+
+
+
+
+ {recipe.Favorite && (
+
+ )}
+
+
+
+ {recipe.Tags.map(x => x.Name).join(", ")}
++ {recipe.Description} +
+
+ {tags && (
+ <>
+
+
+
+ );
+}
diff --git a/web/src/context/AuthContext.tsx b/web/src/context/AuthContext.tsx
new file mode 100644
index 0000000..dbdc177
--- /dev/null
+++ b/web/src/context/AuthContext.tsx
@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+interface AuthContextType {
+ isLoggedIn: boolean | undefined;
+ setIsLoggedIn: (state: boolean) => void;
+ getJwt: () => string;
+}
+
+export const AuthContext = createContextTags
++
-
+ {tags.map(tag => (
+
- + {tag.Name} + + + ))} +
+
Created: {FormatDate(new Date(created))}
+ {modified && ( +Last Modified: {FormatDate(new Date(modified))}
+ )} +Loading authentication...
; // or null for no flicker
+ // }
+
+ return (
+
+
+
+
+ );
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..6b6173d
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,23 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { AuthProvider } from './context/AuthProvider.tsx'
+import { CookiesProvider } from 'react-cookie'
+import axios from "axios";
+import { FilterProvider } from './context/FilterProvider.tsx'
+
+// Set the with 'withCredentials' by default
+axios.defaults.withCredentials = true;
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/pages/Favorites.tsx b/web/src/pages/Favorites.tsx
new file mode 100644
index 0000000..3cf5e2c
--- /dev/null
+++ b/web/src/pages/Favorites.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import Banner from "../components/Banner";
+import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
+
+import type { Recipe } from "../types/recipe";
+import RecipeSearchResult from "../components/items/RecipeSearchResult";
+import Spinner from "../components/Spinner";
+
+export default function Favorites() {
+ const [recipes, setRecipes] = useState+ Welcome to the Recipe Creation Wizard! Simply fill in the details about your culinary creation, + including the recipe's name, a description, and other specifics like its category, duration, + and difficulty. Don't forget to dynamically add all your ingredients and instructions using + the dedicated buttons, and feel free to upload an appealing image. All required fields are + marked with an *. Once everything looks perfect, just hit the "Create Recipe" + button to + share your masterpiece! +
+
+ {/* Title Input */}
+
+
+ {sections.map((section, i) => (
+ 1}
+ >
+
+ ))}
+
+
+
+ {/* Instruction Inputs */}
+
+ <>
+
+
+ {/* TODO: Images Input */}
+
+
+
+
+ {/* Dropdown Inputs */}
+
+
+
+ {/* Ingredient Inputs */}
+
+
+
+
+ {/* Display the reason for the invalidation */}
+ + Please provide an image of your creation. This is optional but is a nice touch! +
+ ++ +
+ {loading && (
+
+
+ );
+}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
new file mode 100644
index 0000000..e298408
--- /dev/null
+++ b/web/src/pages/Home.tsx
@@ -0,0 +1,178 @@
+import { use, useEffect, useState } from "react";
+import SalmonVideo from "../assets/videos/salmon_video.mp4";
+import Banner from "../components/Banner";
+import ROUTE_CONSTANTS from "../types/routes";
+
+import RecipeLarge from "../components/cards/RecipeCardLarge";
+import type { Recipe } from "../types/recipe";
+import RecipeCardSmall from "../components/cards/RecipeCardSmall";
+import ContentCardSmall from "../components/cards/ContentCardSmall";
+import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
+import { GetRecipeOfTheWeek } from "../services/RecipeService";
+import { isApiError, type ApiError } from "../types/api/error";
+import { AuthContext } from "../context/AuthContext";
+import { GetAuthenticatedUserMadeRecipes, GetAuthenticateUserViewedRecipes } from "../services/UserService";
+
+export default function Home() {
+ // Context
+ const { isLoggedIn } = use(AuthContext);
+
+ // Page state
+ const [recipeOfTheWeek, setRecipeOfTheWeek] = useState
+
+ )}
+ {!loading && (
+ <>
+ {recipes?.map(recipe => {recipes ? "End of results" : "No reuslts"}
+ + )} + +
+
+
+ + Discover Your Next Favorite Meal +
++ Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure, + we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights, + all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or + browse our trending dishes for fresh ideas. +
+
+
+
+ + Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes + our community loves most. This isn't just about how many people view a recipe; it's also about + how many times it's been made, liked, reviewed, and its average rating, all combined to find + the true fan favorite of the week. It's our way of highlighting the best recipes that truly + resonate with our users! +
+
+
+
+
+ Recently viewed
+ {isLoggedIn ? +
+ {viewedRecipes && viewedRecipes.length > 0 ? (
+ <>
+ {viewedRecipes.map((recipe: Recipe) => (
+
+ :
+
+ }
+ No recently viewed recipes
+ )} +Make again
+ {isLoggedIn ? +
+ {madeRecipes && madeRecipes.length > 0 ? (
+ <>
+ {madeRecipes.map((recipe: Recipe) => (
+
+ :
+
+ }
+ No recently made recipes
+ )} ++ Unleash Your Inner Chef! +
++ Have a unique recipe idea? Want to share your culinary masterpiece with the world? + It's time to bring your creations to life! +
+ + Create Your Recipe! + + + + ); +} diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx new file mode 100644 index 0000000..b2b8401 --- /dev/null +++ b/web/src/pages/Login.tsx @@ -0,0 +1,75 @@ +import { useEffect, useState } from "react"; +import { GetGoogleAuthUrl } from "../services/AuthService" +import { isApiError, type ApiError } from "../types/api/error" +import { useSearchParams } from "react-router-dom"; + + +export default function LoginPage() { + const [error, setError] = useState
+
+
+}
diff --git a/web/src/pages/NotFound.tsx b/web/src/pages/NotFound.tsx
new file mode 100644
index 0000000..086acee
--- /dev/null
+++ b/web/src/pages/NotFound.tsx
@@ -0,0 +1,24 @@
+import ROUTE_CONSTANTS from "../types/routes";
+
+export default function NotFound() {
+ return (
+
+
+
+
+
+
+ + Sign in to Continue +
++ You need to sign in to continue. Don't have an account? Signing in will + create one for you! +
+
+
+
+
+
+
+ );
+}
diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx
new file mode 100644
index 0000000..1d97f58
--- /dev/null
+++ b/web/src/pages/Profile.tsx
@@ -0,0 +1,181 @@
+import { use, useEffect, useState } from "react";
+import type { User } from "../types/user";
+import type { Recipe } from "../types/recipe";
+import RecipeListItem from "../components/items/RecipeListItem";
+import type { Engagement } from "../types/engagement";
+import ActivityListItem from "../components/items/ActivityListItem";
+import { AuthContext } from "../context/AuthContext";
+import { GetAuthenticatedUser, GetAuthenticatedUserEngagement, GetAuthenticatedUserFavorites, GetAuthenticatedUserRecipes } from "../services/UserService";
+import { isApiError, type ApiError } from "../types/api/error";
+import { Logout } from "../services/AuthService";
+import { useNavigate } from "react-router-dom";
+
+// TODO: Need to cache the image, it returns nothing because it fails with 429 (rate limits)
+// Though this might just be a development issue, it seems to work in production.
+
+export default function Profile() {
+ // Context
+ const { getJwt } = use(AuthContext);
+ const navigate = useNavigate();
+
+ // Page state
+ const [error, setError] = useState
+ {user?.ImageUrl != "" ? (
+ 
{
+ e.currentTarget.onerror = null; // prevent infinite loop
+ e.currentTarget.src = dummyProfileSrc;
+ }}
+ />
+ ) : (
+ 
+ )}
+
+
+
+
+
+ {user?.Name}
+{user?.Email}
+
+
+ {recipes.length} recipes
+{favorites.length} favorites
+My Recipes
+-
+ {recipes.length <= 4 ? (
+ recipes.map(recipe =>
My Favorites
+-
+ {favorites.length <= 4 ? (
+ favorites.map(recipe =>
Recent Activity
+-
+ {activity?.map(act =>
+
+ {recipe.Title}
+{author ? author.Name : "Loading..."}
+Category: {recipe.Category}
+
+
+ About this recipe
+{recipe.Description}
+
+
+ );
+}
diff --git a/web/src/pages/Search.tsx b/web/src/pages/Search.tsx
new file mode 100644
index 0000000..666a674
--- /dev/null
+++ b/web/src/pages/Search.tsx
@@ -0,0 +1,33 @@
+import { useState } from "react";
+import Banner from "../components/Banner";
+import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
+import { type Recipe } from "../types/recipe";
+import RecipeSearchResult from "../components/items/RecipeSearchResult";
+import Spinner from "../components/Spinner";
+
+export default function SearchPage() {
+ const [recipes, setRecipes] = useState+ +
+ {loading && (
+
+
+ );
+}
diff --git a/web/src/pages/ShoppingList.tsx b/web/src/pages/ShoppingList.tsx
new file mode 100644
index 0000000..45d79bc
--- /dev/null
+++ b/web/src/pages/ShoppingList.tsx
@@ -0,0 +1,10 @@
+export default function ShoppingList() {
+ return (
+ <>
+
+
+ )}
+ {!loading && (
+ <>
+ {recipes?.map(recipe => {recipes ? "End of results" : "No reuslts"}
+ + )} +
+
+
+ );
+}
diff --git a/web/src/services/AuthService.ts b/web/src/services/AuthService.ts
new file mode 100644
index 0000000..1adb4b3
--- /dev/null
+++ b/web/src/services/AuthService.ts
@@ -0,0 +1,29 @@
+import axios from "axios";
+import type { GetGoogleAuthUrlResponse, LogoutResponse } from "../types/api/auth";
+import type { ApiError } from "../types/api/error";
+import { GetBackendUrl } from "./util";
+
+const BACKEND_URL = GetBackendUrl();
+
+
+export async function GetGoogleAuthUrl(): PromisePage Under Construction
+Sit tight, this page is coming soon!
+