Skip to content
Snippets Groups Projects
Commit 1d1e8e93 authored by Matt Kirby's avatar Matt Kirby
Browse files

prettier

parent f6251814
No related branches found
No related tags found
1 merge request!24Fe questions and posts (This one is big)
Hide whitespace changes
Inline Side-by-side
daily-thought-frontend/src/components/form/FriendRequests.tsx
+ 47
− 45
View file @ 1d1e8e93
import { useRequests } from "@/hooks/useRequests"; import { useRequests } from '@/hooks/useRequests';
import { CheckIcon, XCircleIcon } from "@heroicons/react/24/outline"; import { CheckIcon, XCircleIcon } from '@heroicons/react/24/outline';
import { FC, PropsWithChildren, useEffect, useState } from "react" import { FC, PropsWithChildren, useEffect, useState } from 'react';
import UserAvatar from "../user/UserAvatar"; import UserAvatar from '../user/UserAvatar';
const FriendRequestMenu: FC<PropsWithChildren> = ({}) => {
const FriendRequestMenu:FC<PropsWithChildren> = ({ const [userRequestList, setUserRequestList] = useState<Map<string, any>>(new Map());
}) => { const { requests, rehydrateRequests, setRehydrateRequests } = useRequests();
const [userRequestList, setUserRequestList] = useState<Map<string, any>>(new Map())
const {requests, rehydrateRequests, setRehydrateRequests} = useRequests();
const fetchUserDetails = async () => { const fetchUserDetails = async () => {
const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/userlist` const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/userlist`;
if(requests){ if (requests) {
const JsonData = JSON.stringify({userIdList: Array.from(requests?.keys())}) const JsonData = JSON.stringify({ userIdList: Array.from(requests?.keys()) });
const options = { const options = {
method: 'POST', method: 'POST',
headers: {'Content-Type': 'application/json',}, headers: { 'Content-Type': 'application/json' },
body: JsonData, body: JsonData
} };
const response = await fetch(endpoint, options)
const data = await response.json()
console.log(data) const response = await fetch(endpoint, options);
setUserRequestList(new Map(data.userList)) const data = await response.json();
setUserRequestList(new Map(data.userList));
} }
} };
const handleRequest = async (userId: string, accept: boolean) => { const handleRequest = async (userId: string, accept: boolean) => {
const endpoint = `${process.env.NEXT_PUBLIC_FRIEND_SERVICE_URL}friends/requests/${accept ? "accept" : "reject"}` const endpoint = `${process.env.NEXT_PUBLIC_FRIEND_SERVICE_URL}friends/requests/${
const JsonData = JSON.stringify({request_id: requests?.get(userId)._id}) accept ? 'accept' : 'reject'
}`;
const JsonData = JSON.stringify({ request_id: requests?.get(userId)._id });
const options = { const options = {
method: 'PUT', method: 'PUT',
headers: {'Content-Type': 'application/json','Authorization': `Bearer ${sessionStorage.getItem("token")}`}, headers: {
body: JsonData, 'Content-Type': 'application/json',
} Authorization: `Bearer ${sessionStorage.getItem('token')}`
},
body: JsonData
};
const response = await fetch(endpoint, options) const response = await fetch(endpoint, options);
if(!response.ok){ if (!response.ok) {
const data = await response.json() const data = await response.json();
console.log(data)
} else { } else {
setRehydrateRequests(true) setRehydrateRequests(true);
} }
} };
useEffect(() => { useEffect(() => {
fetchUserDetails() fetchUserDetails();
},[rehydrateRequests]) }, [rehydrateRequests]);
return ( return (
<div className="p-1"> <div className="p-1">
<div className="text-xs text-gray-400 border-b w-full pb-1"> <div className="text-xs text-gray-400 border-b w-full pb-1">Friend requests</div>
Friend requests
</div>
<div> <div>
{Array.from(userRequestList?.values()).map((req, index) => { {Array.from(userRequestList?.values()).map((req, index) => {
const {profile, username, firstName, lastName} = req[1] const { profile, username, firstName, lastName } = req[1];
return ( return (
<div key={req[0]}> <div key={req[0]}>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
...@@ -82,14 +80,18 @@ const FriendRequestMenu:FC<PropsWithChildren> = ({ ...@@ -82,14 +80,18 @@ const FriendRequestMenu:FC<PropsWithChildren> = ({
</div> </div>
</div> </div>
</div> </div>
) );
})} })}
</div> </div>
{userRequestList.size === 0 && <div className="text-xs text-gray-400 flex justify-center mt-2"> No pending friend requests</div>} {userRequestList.size === 0 && (
<div className="text-xs text-gray-400 flex justify-center mt-2">
{' '}
No pending friend requests
</div>
)}
</div> </div>
) );
} };
export default FriendRequestMenu export default FriendRequestMenu;
\ No newline at end of file
daily-thought-frontend/src/components/form/UserSearch.tsx
+ 108
− 95
View file @ 1d1e8e93
import useDebounce from "@/hooks/useDebounce"; import useDebounce from '@/hooks/useDebounce';
import { useFriends } from "@/hooks/useFriends"; import { useFriends } from '@/hooks/useFriends';
import { useSentRequests } from "@/hooks/useSentRequests"; import { useSentRequests } from '@/hooks/useSentRequests';
import { useUser } from "@/hooks/useUser"; import { useUser } from '@/hooks/useUser';
import { UserPlusIcon } from "@heroicons/react/24/outline"; import { UserPlusIcon } from '@heroicons/react/24/outline';
import { FC, PropsWithChildren, useEffect, useState } from "react"; import { FC, PropsWithChildren, useEffect, useState } from 'react';
import UserAvatar from "../user/UserAvatar"; import UserAvatar from '../user/UserAvatar';
import BasicField from "./BasicField"; import BasicField from './BasicField';
type UserSearchProps = { type UserSearchProps = {
limit?: number; limit?: number;
} };
const UserSearch:FC<PropsWithChildren<UserSearchProps>> = ({ const UserSearch: FC<PropsWithChildren<UserSearchProps>> = ({ limit = 6 }) => {
limit = 6 const [searchQuery, setSearchQuery] = useState<string>('');
}) => { const debouncedSearchQuery = useDebounce<string>(searchQuery, 500);
const [searchQuery, setSearchQuery] = useState<string>("");
const debouncedSearchQuery = useDebounce<string>(searchQuery, 500)
const [searchResults, setSearchResults] = useState<Map<string, any>>(new Map([])); const [searchResults, setSearchResults] = useState<Map<string, any>>(new Map([]));
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const {sentRequests, rehydrateSentRequests, setRehydrateSentRequests} = useSentRequests(); const { sentRequests, rehydrateSentRequests, setRehydrateSentRequests } = useSentRequests();
const {friends, rehydrateFriends, setRehydrateFriends} = useFriends(); const { friends, rehydrateFriends, setRehydrateFriends } = useFriends();
const [sentRequestsIds, setSentRequestIds] = useState<Set<string>>(new Set([])) const [sentRequestsIds, setSentRequestIds] = useState<Set<string>>(new Set([]));
const {user, setRehydrateUser} = useUser() const { user, setRehydrateUser } = useUser();
useEffect(() => { useEffect(() => {
if(sentRequests !== undefined){ if (sentRequests !== undefined) {
setSentRequestIds(new Set(Array.from(sentRequests?.keys()))) setSentRequestIds(new Set(Array.from(sentRequests?.keys())));
} }
}, [rehydrateSentRequests]) }, [rehydrateSentRequests]);
useEffect(() => { useEffect(() => {
setLoading(true) setLoading(true);
if(searchQuery.length === 0){ if (searchQuery.length === 0) {
setSearchResults(new Map([])) setSearchResults(new Map([]));
} }
}, [searchQuery, setSearchResults]) }, [searchQuery, setSearchResults]);
useEffect(() => { useEffect(() => {
if(debouncedSearchQuery.length > 0){ if (debouncedSearchQuery.length > 0) {
const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/search?searchQuery=${debouncedSearchQuery}`; const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/search?searchQuery=${debouncedSearchQuery}`;
fetch(endpoint).then(async (result) => { fetch(endpoint).then(async (result) => {
const data = await result.json(); const data = await result.json();
setLoading(false) setLoading(false);
const newResults = new Map<string, any>(data.result) const newResults = new Map<string, any>(data.result);
if(user) if (user) newResults.delete(user?.id);
newResults.delete(user?.id) setSearchResults(newResults);
setSearchResults(newResults)
}); });
} }
}, [debouncedSearchQuery]) }, [debouncedSearchQuery]);
const sendRequest = async (receiverId: string) => { const sendRequest = async (receiverId: string) => {
const endpoint = `${process.env.NEXT_PUBLIC_FRIEND_SERVICE_URL}friends/requests` const endpoint = `${process.env.NEXT_PUBLIC_FRIEND_SERVICE_URL}friends/requests`;
const JSONdata = JSON.stringify({receiver_id: receiverId}) const JSONdata = JSON.stringify({ receiver_id: receiverId });
const headers = {'Authorization': `Bearer ${sessionStorage.getItem("token")}`, 'Content-Type': 'application/json'} const headers = {
const response = await fetch(endpoint, {method: "POST",headers, body: JSONdata}) Authorization: `Bearer ${sessionStorage.getItem('token')}`,
'Content-Type': 'application/json'
if(!response.ok){ };
const data = await response.json() const response = await fetch(endpoint, { method: 'POST', headers, body: JSONdata });
console.log(data.error)
if (!response.ok) {
const data = await response.json();
} else { } else {
setRehydrateSentRequests(true) setRehydrateSentRequests(true);
} }
} };
return ( return (
<div> <div>
<BasicField name="search" placeholder="Search users" onChange={setSearchQuery} autocomplete={false}/> <BasicField
<div className="border-t pt-2 flex item-center flex-col"> name="search"
{!searchQuery && placeholder="Search users"
<div className='flex items-center justify-center mb-2'> onChange={setSearchQuery}
<p className='text-xs text-gray-500'> autocomplete={false}
Enter a search query to find friends />
</p> <div className="border-t pt-2 flex item-center flex-col">
{!searchQuery && (
<div className="flex items-center justify-center mb-2">
<p className="text-xs text-gray-500">Enter a search query to find friends</p>
</div> </div>
} )}
<div className="border-b"> <div className="border-b">
{searchQuery && !loading && Array.from(searchResults.values()).map((result, index) => { {searchQuery &&
if(index < limit && !friends?.has(result._id) && result._id !== user?.id){ !loading &&
return ( Array.from(searchResults.values()).map((result, index) => {
<div className="flex justify-between items-center hover:bg-gray-100 rounded-md mb-2" key={index}> if (index < limit && !friends?.has(result._id) && result._id !== user?.id) {
<UserAvatar key={result._id} username={result.username} firstName={result.firstName} lastName={result.lastName} /> return (
<div
{!sentRequestsIds.has(result._id) && className="flex justify-between items-center hover:bg-gray-100 rounded-md mb-2"
<button key={index}
type="button"
className="ml-auto mr-1 flex-shrink-1 rounded-full text-c-pink p-1 hover:text-gray-200 focus:outline-none "
onClick={() => sendRequest(result._id)}
> >
<UserPlusIcon className="h-6 w-6" aria-hidden="true" /> <UserAvatar
</button> key={result._id}
} username={result.username}
firstName={result.firstName}
{sentRequestsIds.has(result._id) && lastName={result.lastName}
<p className="text-xs text-gray-400 mr-3">Pending</p> />
}
{!sentRequestsIds.has(result._id) && (
</div> <button
) type="button"
className="ml-auto mr-1 flex-shrink-1 rounded-full text-c-pink p-1 hover:text-gray-200 focus:outline-none "
onClick={() => sendRequest(result._id)}
>
<UserPlusIcon className="h-6 w-6" aria-hidden="true" />
</button>
)}
{sentRequestsIds.has(result._id) && (
<p className="text-xs text-gray-400 mr-3">Pending</p>
)}
</div>
);
} }
})} })}
{searchQuery && loading && {searchQuery && loading && (
<div className="flex justify-center mb-2"> <div className="flex justify-center mb-2">
<div <div
className="h-6 w-6 animate-spin text-gray-300 rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" className="h-6 w-6 animate-spin text-gray-300 rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status"> role="status"
</div> ></div>
</div>} </div>
)}
{searchQuery && !loading && searchResults.size === 0 && {searchQuery && !loading && searchResults.size === 0 && (
<div> <div>
<p className='text-xs text-gray-500 flex justify-center mb-2'> <p className="text-xs text-gray-500 flex justify-center mb-2">No results found</p>
No results found
</p>
</div> </div>
} )}
</div> </div>
<div className="w-full pt-2 text-xs mx-auto flex text-c-pink justify-center"> <div className="w-full pt-2 text-xs mx-auto flex text-c-pink justify-center">
{friends && friends.size > 0? "Friends" : "No friends added"} {friends && friends.size > 0 ? 'Friends' : 'No friends added'}
</div> </div>
{friends && Array.from(friends.values()).map((result, index) => { {friends &&
return ( Array.from(friends.values()).map((result, index) => {
<div className="flex justify-between hover:bg-gray-100 rounded-md" key={index}> return (
<UserAvatar key={index} username={result[1].username} firstName={result[1].firstName} lastName={result[1].lastName} /> <div className="flex justify-between hover:bg-gray-100 rounded-md" key={index}>
</div> <UserAvatar
) key={index}
username={result[1].username}
firstName={result[1].firstName}
lastName={result[1].lastName}
/>
</div>
);
})} })}
</div>
</div> </div>
) </div>
} );
};
export default UserSearch; export default UserSearch;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment