mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 20:13:49 +00:00
Feat: add user posts functionality for account page
This commit is contained in:
Aaron William Po
82
src/components/Account/BeerPostsByUser.tsx
Normal file
82
src/components/Account/BeerPostsByUser.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import UserContext from '@/contexts/UserContext';
|
||||
import useBeerPostsByUser from '@/hooks/data-fetching/beer-posts/useBeerPostsByUser';
|
||||
import { FC, useContext, MutableRefObject, useRef } from 'react';
|
||||
import { FaArrowUp } from 'react-icons/fa';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import BeerCard from '../BeerIndex/BeerCard';
|
||||
import LoadingCard from '../ui/LoadingCard';
|
||||
import Spinner from '../ui/Spinner';
|
||||
|
||||
const BeerPostsByUser: FC = () => {
|
||||
const { user } = useContext(UserContext);
|
||||
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||
const PAGE_SIZE = 2;
|
||||
const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } =
|
||||
useBeerPostsByUser({ pageSize: PAGE_SIZE, userId: user!.id });
|
||||
const { ref: lastBeerPostRef } = useInView({
|
||||
onChange: (visible) => {
|
||||
if (!visible || isAtEnd) return;
|
||||
setSize(size + 1);
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="mt-4" ref={pageRef}>
|
||||
<div className="grid gap-6 xl:grid-cols-2">
|
||||
{!!beerPosts.length && !isLoading && (
|
||||
<>
|
||||
{beerPosts.map((beerPost, i) => {
|
||||
return (
|
||||
<div
|
||||
key={beerPost.id}
|
||||
ref={beerPosts.length === i + 1 ? lastBeerPostRef : undefined}
|
||||
>
|
||||
<BeerCard post={beerPost} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
{(isLoading || isLoadingMore) && (
|
||||
<>
|
||||
{Array.from({ length: PAGE_SIZE }, (_, i) => (
|
||||
<LoadingCard key={i} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(isLoading || isLoadingMore) && (
|
||||
<div className="flex h-32 w-full items-center justify-center">
|
||||
<Spinner size="sm" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!beerPosts.length && isAtEnd && !isLoading && (
|
||||
<div className="flex h-20 items-center justify-center text-center">
|
||||
<div className="tooltip tooltip-bottom" data-tip="Scroll back to top of page.">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-ghost btn-sm btn"
|
||||
aria-label="Scroll back to top of page."
|
||||
onClick={() => {
|
||||
pageRef.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FaArrowUp />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!beerPosts.length && !isLoading && (
|
||||
<div className="flex h-24 w-full items-center justify-center">
|
||||
<p className="text-lg font-bold">No posts yet.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeerPostsByUser;
|
||||
84
src/components/Account/BreweryPostsByUser.tsx
Normal file
84
src/components/Account/BreweryPostsByUser.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import UserContext from '@/contexts/UserContext';
|
||||
import { FC, useContext, MutableRefObject, useRef } from 'react';
|
||||
import { FaArrowUp } from 'react-icons/fa';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import useBreweryPostsByUser from '@/hooks/data-fetching/brewery-posts/useBreweryPostsByUser';
|
||||
import LoadingCard from '../ui/LoadingCard';
|
||||
import Spinner from '../ui/Spinner';
|
||||
import BreweryCard from '../BreweryIndex/BreweryCard';
|
||||
|
||||
const BreweryPostsByUser: FC = () => {
|
||||
const { user } = useContext(UserContext);
|
||||
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||
const PAGE_SIZE = 2;
|
||||
const { breweryPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } =
|
||||
useBreweryPostsByUser({ pageSize: PAGE_SIZE, userId: user!.id });
|
||||
|
||||
const { ref: lastBreweryPostRef } = useInView({
|
||||
onChange: (visible) => {
|
||||
if (!visible || isAtEnd) return;
|
||||
setSize(size + 1);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mt-4" ref={pageRef}>
|
||||
<div className="grid gap-6 xl:grid-cols-2">
|
||||
{!!breweryPosts.length && !isLoading && (
|
||||
<>
|
||||
{breweryPosts.map((breweryPost, i) => {
|
||||
return (
|
||||
<div
|
||||
key={breweryPost.id}
|
||||
ref={breweryPosts.length === i + 1 ? lastBreweryPostRef : undefined}
|
||||
>
|
||||
<BreweryCard brewery={breweryPost} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
{isLoadingMore && (
|
||||
<>
|
||||
{Array.from({ length: PAGE_SIZE }, (_, i) => (
|
||||
<LoadingCard key={i} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(isLoading || isLoadingMore) && (
|
||||
<div className="flex h-32 w-full items-center justify-center">
|
||||
<Spinner size="sm" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!!breweryPosts.length && isAtEnd && !isLoading && (
|
||||
<div className="flex h-20 items-center justify-center text-center">
|
||||
<div className="tooltip tooltip-bottom" data-tip="Scroll back to top of page.">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-ghost btn-sm btn"
|
||||
aria-label="Scroll back to top of page."
|
||||
onClick={() => {
|
||||
pageRef.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FaArrowUp />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!breweryPosts.length && !isLoading && (
|
||||
<div className="flex h-24 w-full items-center justify-center">
|
||||
<p className="text-lg font-bold">No posts yet.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BreweryPostsByUser;
|
||||
31
src/components/Account/UserPosts.tsx
Normal file
31
src/components/Account/UserPosts.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Tab } from '@headlessui/react';
|
||||
import { FC } from 'react';
|
||||
import BeerPostsByUser from './BeerPostsByUser';
|
||||
import BreweryPostsByUser from './BreweryPostsByUser';
|
||||
|
||||
const UserPosts: FC = () => {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div>
|
||||
<Tab.Group>
|
||||
<Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
|
||||
<Tab className="tab tab-xl w-1/2 uppercase ui-selected:tab-active">Beers</Tab>
|
||||
<Tab className="tab tab-xl w-1/2 uppercase ui-selected:tab-active">
|
||||
Breweries
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<BeerPostsByUser />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<BreweryPostsByUser />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserPosts;
|
||||
Reference in New Issue
Block a user