cleanup, moving around types and functions

client/src/components/pages/Recipe.tsx

@@ -1,28 +1,25 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Page, Panel } from "../ui";
-
+import { IRecipe } from "../../util/types";
-interface IRecipe {
+import { getRecipeByID } from "../../util/apiUtils";
-    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 { id } = useParams();
 
-    const getRecipeByID = async () => {
+    if (!id) {
-        const result = await fetch('http://localhost:8080/recipe/' + id)
+        return (
-        .then(response => response.json())
+            <Page>
-        .then(data => setRecipe(data));
+                <h1>404 | Not Found</h1>
+                <p>There's no content here! Technically, you shouldn't have even been able to get here.</p>
+                <p>So, kudos, I guess!</p>
+            </Page>
+        )
     }
 
     useEffect(() => {
-        getRecipeByID();
+        getRecipeByID(id);
     }, [])
 
     return (

client/src/util/apiUtils.ts

@@ -0,0 +1,12 @@
+const API = import.meta.env.APISTRING || "http://localhost:8080/";
+
+// on recipe route
+export const getRecipeByID = async (id: string | number) => {
+    const result = await fetch(API + 'recipe/' + id).then(response => response.json());
+    return result;
+}
+
+export const getAllRecipes = async () => {
+    const result = await fetch(API + 'recipe').then(response => response.json());
+    return result;
+}

client/src/util/types.ts

@@ -12,3 +12,44 @@ interface ButtonParams extends PortalBase {
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
 export type ButtonComponent = FC<ButtonParams>
+
+export interface IUser {
+    id: number
+    firstname: string
+    lastname: string
+    handle: string
+    email: string
+    password: string
+    active: boolean
+}
+
+export interface IRecipe {
+    id: number
+    name: string
+    description?: string
+    preptime: string
+    removed: boolean
+    authoruserid: IUser["id"]
+}
+
+export interface IIngredient {
+    id: number
+    name: string
+    description?: string
+}
+
+export interface ICollection {
+    id: number
+    name: string
+    active: string
+    ismaincollection: boolean
+    ownerid: IUser["id"]
+}
+
+export interface IGroceryList {
+    id: number
+    name: string
+    recipes?: IRecipe["id"][]
+    active: boolean
+    ownerid: IUser["id"]
+}