friend search widget separated

client/src/App.tsx

@@ -19,6 +19,8 @@ import CollectionBrowser from './components/pages/CollectionBrowser';
 import { Navbar } from './components/ui';
 import './sass/App.scss'
 import RichText from './components/ui/RichText';
+import GroceryList from './components/pages/GroceryList';
+import GroceryListCollection from './components/pages/GroceryListCollection';
 
 function App() {
   const [user, setUser] = useState<IAuthContext>({ user: undefined });
@@ -65,6 +67,8 @@ function App() {
             <Route path="/subscriptions/:id"      element={<Collection />} />
 
             <Route path="/add-recipe"             element={<AddRecipe />} />
+            <Route path="/grocery-list"           element={<GroceryListCollection />} />
+            <Route path="/grocery-list/:id"       element={<GroceryList />} />
           </Routes>
         </div>
       </AuthContext.Provider>

client/src/components/derived/Friends.tsx

@@ -4,7 +4,8 @@ import { useAuthContext } from "../../context/AuthContext";
 import { getAllUsers, getFriendships, getPendingFriendRequests, getUserByID } from "../../util/apiUtils";
 import UserCard from "../ui/UserCard";
 import { IUser, IFriendship } from "../../schemas";
-import { Panel } from "../ui";
+import { Card, Divider, Panel } from "../ui";
+import FriendSearchWidget from "../ui/Widgets/FriendSearchWidget";
 
 export default function Friends() {
     const [friends, setFriends] = useState<IFriendship[]>();
@@ -14,13 +15,16 @@ export default function Friends() {
     useEffect(() => {
         if (!user) return;
         (async function() {
-            const rawResult = await getFriendships();
-            console.log(rawResult);
-
-            const result = rawResult.filter((item: IFriendship) => (item.senderid == user.id) && !(item.pending));
-            console.log(result);
-
-            setFriends(result);
+            try {
+                const rawResult = await getFriendships();
+    
+                if (rawResult.length) {
+                    const result = rawResult.filter((item: IFriendship) => (item.senderid == user.id) && !(item.pending));
+                    setFriends(result);
+                }
+            } catch(e) {
+                console.error(e);
+            }
         })()
     }, [user])
 
@@ -38,13 +42,29 @@ export default function Friends() {
     }, [setUserList])
 
     return (
-        <Panel extraStyles="flex-row">
-            <h2>Your friendships:</h2>
-            {
-                userList.map((user: IUser) => {
-                    return <UserCard key={v4()} user={user} />
-                })
-            }
-        </Panel>
+        <>
+        { userList.length ? 
+        (
+            <Panel extraStyles="flex-row">
+                <h2>Your friendships:</h2>
+                {
+                    userList.map((user: IUser) => {
+                        return <UserCard key={v4()} user={user} />
+                    })
+                }
+            </Panel>
+        ) : 
+        (
+            <Card>
+                <p>You don't have any friends!</p>
+                <Divider />
+                <p>We can fix that, if you'd like.</p>
+                <p>Use the widget below to search our users:</p>
+
+                <FriendSearchWidget />
+            </Card>
+        )
+        }
+        </>
     )
 }

client/src/components/pages/GroceryList.tsx

@@ -0,0 +1,11 @@
+import Protect from "../../util/Protect"
+
+const GroceryList = () => {
+    return (
+        <Protect>
+            <h1>My grocery lists:</h1>
+        </Protect>
+    )
+}
+
+export default GroceryList;

client/src/components/pages/GroceryListCollection.tsx

@@ -0,0 +1,11 @@
+import Protect from "../../util/Protect";
+
+const GroceryListCollection = () => {
+    return (
+        <Protect>
+            <h1>All of my grocery lists:</h1>
+        </Protect>
+    )
+}
+
+export default GroceryListCollection;

client/src/components/pages/Profile.tsx

@@ -8,7 +8,6 @@ import Friends from "../derived/Friends";
 
 export default function Profile() {
     const [message, setMessage] = useState<JSX.Element>();
-    // const { user } = useAuthContext();
     const { user } = useAuthContext();
     const navigate = useNavigate();
 

client/src/components/pages/Register/addfriends.tsx

@@ -1,50 +1,12 @@
-import { Button, Divider, Page, Panel, TextField, UserCard } from "../../ui";
-import { ChangeEvent, useCallback, useEffect, useState } from "react";
+import { Button, Divider, Page, Panel } from "../../ui";
 import { RegisterVariantType, VariantLabel } from ".";
-import { IUser } from "../../../schemas";
-import { getAllUsers } from "../../../util/apiUtils";
-import { v4 } from 'uuid';
+import FriendSearchWidget from "../../ui/Widgets/FriendSearchWidget";
 
 const AddFriends: RegisterVariantType = ({ transitionDisplay }) => {
-    const [searchTerm, setSearchTerm] = useState<string>();
-    const [userPool, setUserPool] = useState<IUser[]>([]);
-    const [friendResults, setFriendResults] = useState<IUser[]>([]);
-
     const handleTransition = async () => {
         transitionDisplay(VariantLabel.FinishUp);
     }
 
-    // this isn't really working right now i don't think
-    const handleRequestSent = useCallback((targetid: string | number) => {
-        setUserPool((prev: IUser[]) => {
-            const newResults = prev.filter((user: IUser) => {
-                return user.id !== targetid;
-            })
-
-            return newResults;
-        })
-    }, [])
-
-    // load available user pool on mount
-    useEffect(() => {
-        (async function() {
-            const result = await getAllUsers();
-            if (result) setUserPool(result);
-        })();
-    }, [])
-
-    useEffect(() => {
-        if (!searchTerm) {
-            setFriendResults(new Array<IUser>());
-        } else {
-            const narrowedPool = userPool?.filter((person: IUser) => {
-                if (person.firstname.toLowerCase().includes(searchTerm) || person.lastname.toLowerCase().includes(searchTerm) || person.handle.toLowerCase().includes(searchTerm)) return person;
-            })
-
-            setFriendResults(narrowedPool);
-        }
-    }, [userPool, searchTerm])
-
     return (
         <Page>
             <h1>Cool, we'll keep all the recipes you post in that collection.</h1>
@@ -58,16 +20,7 @@ const AddFriends: RegisterVariantType = ({ transitionDisplay }) => {
                 <p>This will allow you to share recipes and collections back and forth, and leave comments on each other's recipes.</p>
 
                 <h3>If you know their email or unique handle, type it in below!</h3>
-
-                <div id="friend-search-widget">
-                    <TextField onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value.toLowerCase())} placeholder={'Search'} />
-
-                    {
-                        friendResults && friendResults.map((friend: IUser) => {
-                            return <UserCard key={v4()} user={friend} canAdd liftData={() => handleRequestSent(friend.id!)} />
-                        })
-                    }
-                </div>
+                <FriendSearchWidget />
             </Panel>
 
             <Button onClick={handleTransition}>Finish</Button>

client/src/components/pages/Welcome.tsx

@@ -13,7 +13,7 @@ const Welcome = () => {
         <Panel extraStyles="inherit-background c-papyrus uppercase flexrow">
             <Button onClick={() => navigate('/explore')}>Browse Recipes</Button>
             <Button onClick={() => navigate('/subscriptions')}>Subscriptions</Button>
-            <Button onClick={() => navigate('/grocery-lists')}>Grocery Lists</Button>
+            <Button onClick={() => navigate('/grocery-list')}>Grocery Lists</Button>
         </Panel>
     )
 

client/src/components/ui/Widgets/FriendSearchWidget.tsx

@@ -0,0 +1,56 @@
+import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
+import { IUser } from "../../../schemas";
+import { TextField, UserCard } from "..";
+import { v4 } from "uuid";
+import { getAllUsers } from "../../../util/apiUtils";
+
+const FriendSearchWidget: FC<{}> = () => {
+    const [searchTerm, setSearchTerm] = useState<string>();
+    const [userPool, setUserPool] = useState<IUser[]>([]);
+    const [friendResults, setFriendResults] = useState<IUser[]>([]);
+
+    // this isn't really working right now i don't think
+    const handleRequestSent = useCallback((targetid: string | number) => {
+        setUserPool((prev: IUser[]) => {
+            const newResults = prev.filter((user: IUser) => {
+                return user.id !== targetid;
+            })
+
+            return newResults;
+        })
+    }, [])
+
+    // load available user pool on mount
+    useEffect(() => {
+        (async function() {
+            const result = await getAllUsers();
+            if (result) setUserPool(result);
+        })();
+    }, [])
+
+    useEffect(() => {
+        if (!searchTerm) {
+            setFriendResults(new Array<IUser>());
+        } else {
+            const narrowedPool = userPool?.filter((person: IUser) => {
+                if (person.firstname.toLowerCase().includes(searchTerm) || person.lastname.toLowerCase().includes(searchTerm) || person.handle.toLowerCase().includes(searchTerm)) return person;
+            })
+
+            setFriendResults(narrowedPool);
+        }
+    }, [userPool, searchTerm])
+
+    return (
+        <div id="friend-search-widget">
+            <TextField onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value.toLowerCase())} placeholder={'Search'} />
+
+            {
+                friendResults && friendResults.map((friend: IUser) => {
+                    return <UserCard key={v4()} user={friend} canAdd liftData={() => handleRequestSent(friend.id!)} />
+                })
+            }
+        </div>
+    )
+}
+
+export default FriendSearchWidget;

server/controllers/UserCtl.ts

@@ -47,7 +47,7 @@ export default class UserCtl {
     async getFriends(id: number | string) {
         try {
             const result = await UserInstance.getFriends(id);
-            if (!result) throw createError(404, "You have no friends");
+            if (!result) return createError(404, "You have no friends");
             return result;
         } catch (e: any) {
             throw new Error(e);