diff --git a/client/src/components/derived/CollectionList.tsx b/client/src/components/derived/CollectionList.tsx new file mode 100644 index 0000000..73daa9f --- /dev/null +++ b/client/src/components/derived/CollectionList.tsx @@ -0,0 +1,27 @@ +import { useEffect } from "react"; +import { useAuthContext } from "../../context/AuthContext" +import API from "../../util/API"; +import { Card } from "../ui" + +function CollectionList() { + const { user, token } = useAuthContext(); + + useEffect(() => { + if (user && token) { + (async() => { + const Collections = new API.Collection(token); + const result = await Collections.getAllAuthored(); + console.log(result); + })(); + } + }, [user]) + + return ( + + + + ) + +} + +export default CollectionList \ No newline at end of file diff --git a/client/src/components/derived/Friends.tsx b/client/src/components/derived/Friends.tsx index 500c1f1..4ec2b14 100644 --- a/client/src/components/derived/Friends.tsx +++ b/client/src/components/derived/Friends.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { v4 } from "uuid"; import { useAuthContext } from "../../context/AuthContext"; import { getAllUsers, getFriendships, getPendingFriendRequests, getUserByID } from "../../util/apiUtils"; +import API from "../../util/API"; import UserCard from "../ui/UserCard"; import { IUser, IFriendship } from "../../schemas"; import { Card, Divider, Panel } from "../ui"; @@ -10,27 +11,32 @@ import FriendSearchWidget from "../ui/Widgets/FriendSearchWidget"; export default function Friends() { const [friends, setFriends] = useState(); const [userList, setUserList] = useState(new Array()); - const { user } = useAuthContext(); + const { user, token } = useAuthContext(); useEffect(() => { - if (!user) return; + if (!user || !token) return; (async function() { try { - const rawResult = await getFriendships(); + const Friends = new API.Friendship(token); + const result = await Friends.getAll(); - if (rawResult.length) { - const result = rawResult.filter((item: IFriendship) => (item.senderid == user.id) && !(item.pending)); + if (result.length) { setFriends(result); } - } catch(e) { - console.error(e); + + console.log(result); + } catch (error) { + console.error(error); } - })() - }, [user]) + })(); + }, []) useEffect(() => { - friends && friends.map(async (friend: IFriendship) => { - const userData = await getUserByID(friend.targetid); + if (!token || !friends) return; + + friends.map(async (friend: IFriendship) => { + const Friends = new API.Friendship(token); + const userData = await Friends.getByID(friend.targetid as string); if (userData) setUserList((prev: IUser[]) => { return [...prev, userData] }) @@ -45,14 +51,14 @@ export default function Friends() { <> { userList.length ? ( - +

Your friendships:

{ userList.map((user: IUser) => { return }) } -
+ ) : ( diff --git a/client/src/components/pages/Profile.tsx b/client/src/components/pages/Profile.tsx index d319d30..33524a9 100644 --- a/client/src/components/pages/Profile.tsx +++ b/client/src/components/pages/Profile.tsx @@ -1,22 +1,118 @@ -import { useContext, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { IUser } from "../../schemas"; import { useNavigate } from "react-router-dom"; -import { AuthContext, useAuthContext } from "../../context/AuthContext"; -import { Button, Page } from "../ui"; +import { useAuthContext } from "../../context/AuthContext"; +import { Button, Divider, Page, Panel } from "../ui"; import Protect from "../../util/Protect"; import Friends from "../derived/Friends"; +import API from "../../util/API"; +import { AxiosError } from "axios"; +import CollectionList from "../derived/CollectionList"; export default function Profile() { - const [message, setMessage] = useState(); - const { user } = useAuthContext(); + const [contents, setContents] = useState(<>); + const [targetUser, setTargetUser] = useState(); + const { user, token } = useAuthContext(); const navigate = useNavigate(); - return ( - -
-

{user && user.firstname}'s Profile

- -
-
- ) + const dateFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: "long" }); + + useEffect(() => { + if (!token) return; + + const params = new URLSearchParams(window.location.search); + const targetID = params.get('id'); + + if (targetID) { + (async() => { + try { + const User = new API.User(token); + const result = await User.getByID(targetID); + if (result) setTargetUser(result); + } catch (error) { + if (error instanceof AxiosError) { + if (error?.response?.status == 404) { + // to do: replace with customizable 404 page + setContents( + +

404: Not found

+ + +

No user found with ID {targetID}

+ +
+
+ ) + } + } else { + console.error(error); + } + } + })(); + } else { + const formattedDate = user!.datecreated ? dateFormatter.format(new Date(user!.datecreated)) : "(unknown)"; + + setContents( + +
+

{user!.firstname}'s Profile

+ +
+ +

About me:

+

{user!.firstname} {user!.lastname}

+

Recipin Member since: {formattedDate}

+ +

30 recipes

+

2 collections

+
+ + + {/* include number of collections */} +

My collections:

+ +
+ + +

My friends:

+ +
+
+
+
+ ) + } + }, [token]) + + useEffect(() => { + if (targetUser) { + const formattedDate = targetUser.datecreated ? dateFormatter.format(new Date(targetUser.datecreated)) : "(unknown)"; + + setContents( + +
+

{targetUser.firstname}'s Profile

+ +
+ +

About {targetUser.firstname} {targetUser.lastname}:

+

Recipin Member since: {formattedDate}

+
+ + +

My collections:

+
+ + +

My friends:

+ +
+
+
+
+ ) + } + }, [targetUser]); + + return contents } \ No newline at end of file diff --git a/client/src/components/pages/Register/aboutyou.tsx b/client/src/components/pages/Register/aboutyou.tsx index 05865ce..b5893d4 100644 --- a/client/src/components/pages/Register/aboutyou.tsx +++ b/client/src/components/pages/Register/aboutyou.tsx @@ -1,10 +1,8 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; -import { v4 } from "uuid"; import { RegisterVariantType, VariantLabel } from "."; import { useAuthContext } from "../../../context/AuthContext"; -import { IUser, IUserAuth } from "../../../schemas"; -import { attemptLogin, attemptRegister } from "../../../util/apiUtils"; +import { IUser } from "../../../schemas"; import API from "../../../util/API"; import { Button, Page, Panel } from "../../ui"; import Divider from "../../ui/Divider"; diff --git a/client/src/components/pages/Register/collection.tsx b/client/src/components/pages/Register/collection.tsx index 70ab9ea..bafb5ba 100644 --- a/client/src/components/pages/Register/collection.tsx +++ b/client/src/components/pages/Register/collection.tsx @@ -1,11 +1,9 @@ -import { ChangeEvent, useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { RegisterVariantType, VariantLabel } from "."; import { useNow } from "../../../hooks/useNow"; -import { ICollection, IUser, IUserAuth } from "../../../schemas"; -import { attemptLogin, createNewCollection } from "../../../util/apiUtils"; +import { ICollection } from "../../../schemas"; import API from "../../../util/API"; import { Button, Divider, Page, Panel } from "../../ui"; -import TextField from "../../ui/TextField"; import { useAuthContext } from "../../../context/AuthContext"; const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) => { @@ -28,10 +26,7 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) => datemodified: now } - console.log(collection); - const result = await collectionAPI.post(collection); - console.log(result); if (result) transitionDisplay(VariantLabel.AddFriends); } @@ -50,7 +45,7 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) =>

What would you like to call your main collection?

{/* ) => setCollectionName(e.target.value)} placeholder={user.firstname + 's Collection'} /> */} - setCollectionName(e.target.value)} placeholder={user.firstname + 's Collection'}> + setCollectionName(e.target.value)} placeholder={user.firstname + '\'s Collection'}> diff --git a/client/src/components/pages/Register/index.tsx b/client/src/components/pages/Register/index.tsx index bf39270..ef18d0e 100644 --- a/client/src/components/pages/Register/index.tsx +++ b/client/src/components/pages/Register/index.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from "react"; +import { FC, useState } from "react"; import { useAuthContext } from "../../../context/AuthContext"; import { IUser } from "../../../schemas"; import AboutYou from "./aboutyou"; diff --git a/client/src/components/pages/Welcome.tsx b/client/src/components/pages/Welcome.tsx index 317e725..8d5b13a 100644 --- a/client/src/components/pages/Welcome.tsx +++ b/client/src/components/pages/Welcome.tsx @@ -1,13 +1,11 @@ -import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useAuthContext } from "../../context/AuthContext"; -import { attemptLogout, checkCredientials } from "../../util/apiUtils"; import { Button, Page, Panel } from "../ui" import Divider from "../ui/Divider"; const Welcome = () => { const navigate = useNavigate(); - const { user, setUser } = useAuthContext(); + const { user } = useAuthContext(); const authUserActions = ( @@ -21,7 +19,6 @@ const Welcome = () => {

Ready to get started?

-
) @@ -41,7 +38,6 @@ const Welcome = () => {

Build Shopping Lists Directly from Your Recipes

-
diff --git a/client/src/components/ui/Navbar/variants.tsx b/client/src/components/ui/Navbar/variants.tsx index 923582d..14b9fca 100644 --- a/client/src/components/ui/Navbar/variants.tsx +++ b/client/src/components/ui/Navbar/variants.tsx @@ -1,7 +1,6 @@ import API from "../../../util/API"; -import { NavbarType } from "../../../util/types"; import { Button, Dropdown } from '..' -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useAuthContext } from "../../../context/AuthContext"; import { useNavigate } from "react-router-dom"; @@ -14,8 +13,7 @@ const LoggedIn = () => { const [searchActive, setSearchActive] = useState(false); const handleLogout = async () => { - const success = await auth.logout(); - console.log(success); + await auth.logout(); // nullify cookie and unset user/token data document.cookie = `token=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; @@ -40,10 +38,6 @@ const LoggedIn = () => { navigate(payload); } - useEffect(() => { - console.log(user); - }, []) - return (