innocuous-symmetry/recipe-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

friend search widget separated

Browse Source
This commit is contained in:
Mikayla Dobson
2022-12-08 17:55:55 -06:00
parent c4a8208d8a
commit bea17aa58b
9 changed files with 123 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/App.tsx
View File

@@ -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>

28
client/src/components/derived/Friends.tsx
View File

@@ -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() {
try {
const rawResult = await getFriendships();
console.log(rawResult);
if (rawResult.length) {
const result = rawResult.filter((item: IFriendship) => (item.senderid == user.id) && !(item.pending));
console.log(result);
setFriends(result);
}
} catch(e) {
console.error(e);
}
})()
}, [user])
@@ -38,6 +42,9 @@ export default function Friends() {
}, [setUserList])
return (
<>
{ userList.length ?
(
<Panel extraStyles="flex-row">
<h2>Your friendships:</h2>
{
@@ -46,5 +53,18 @@ export default function Friends() {
})
}
</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>
)
}
</>
)
}

11
client/src/components/pages/GroceryList.tsx
View File

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

11
client/src/components/pages/GroceryListCollection.tsx Normal file
View File

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

1
client/src/components/pages/Profile.tsx
View File

@@ -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();

53
client/src/components/pages/Register/addfriends.tsx
View File

@@ -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>

2
client/src/components/pages/Welcome.tsx
View File

@@ -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>
)

56
client/src/components/ui/Widgets/FriendSearchWidget.tsx Normal file
View File

@@ -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;

2
server/controllers/UserCtl.ts
View File

@@ -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);