Skip to content

Commit

Permalink
chore: created an uploads on account page (#128)
Browse files Browse the repository at this point in the history
  • Loading branch information
Bendomey authored Dec 13, 2024
1 parent 6a6f25c commit ca2273c
Show file tree
Hide file tree
Showing 15 changed files with 274 additions and 132 deletions.
13 changes: 2 additions & 11 deletions apps/client/app/api/collections/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,7 @@ export const useGetCollections = (
query: FetchMultipleDataInputParams<FetchCollectionFilter>,
) =>
useQuery({
queryKey: [
QUERY_KEYS.COLLECTIONS,
query.filters?.created_by,
JSON.stringify(query),
],
queryKey: [QUERY_KEYS.COLLECTIONS, query.filters?.created_by, query],
queryFn: () => getCollections(query),
})

Expand Down Expand Up @@ -264,12 +260,7 @@ export const useGetCollectionContentsBySlug = ({
retryQuery?: boolean
}) =>
useQuery({
queryKey: [
QUERY_KEYS.COLLECTIONS,
slug,
'slug-contents',
JSON.stringify(query),
],
queryKey: [QUERY_KEYS.COLLECTIONS, slug, 'slug-contents', query],
queryFn: () => getCollectionContentsBySlug(safeString(slug), query),
enabled: Boolean(slug),
retry: retryQuery,
Expand Down
4 changes: 2 additions & 2 deletions apps/client/app/api/contents/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export const useGetUserContentLikes = (
userId: string,
) =>
useQuery({
queryKey: [QUERY_KEYS.CONTENT_LIKES, 'user', userId, JSON.stringify(query)],
queryKey: [QUERY_KEYS.CONTENT_LIKES, 'user', userId, query],
queryFn: () => getUserContentLikes(query),
enabled: !!userId,
})
Expand Down Expand Up @@ -220,7 +220,7 @@ export const useGetContentLikes = (
contentId: string,
) =>
useQuery({
queryKey: [QUERY_KEYS.CONTENT_LIKES, contentId, JSON.stringify(query)],
queryKey: [QUERY_KEYS.CONTENT_LIKES, contentId, query],
queryFn: () => getContentLikes(query, contentId),
})

Expand Down
2 changes: 1 addition & 1 deletion apps/client/app/components/like-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function LikeButton({ content, children }: Props) {

if (currentUser) {
queryClient.invalidateQueries({
queryKey: [QUERY_KEYS.CONTENT_LIKES, 'user', currentUser.id]
queryKey: [QUERY_KEYS.CONTENT_LIKES, 'user', currentUser.id],
})
}
}
Expand Down
1 change: 1 addition & 0 deletions apps/client/app/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const PAGES = {
ACCOUNT: '/account',
ACCOUNT_COLLECTIONS: '/account/collections',
ACCOUNT_LIKES: '/account/likes',
ACCOUNT_UPLOADS: '/account/uploads',
WALLET: '/account/wallet',
PACKAGE_AND_BILLINGS: '/account/package-and-billings',
},
Expand Down
13 changes: 11 additions & 2 deletions apps/client/app/modules/account/home/components/tabs.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { PlusIcon } from '@heroicons/react/24/outline'
import {
ArrowUpTrayIcon,
HeartIcon,
PhotoIcon,
RectangleStackIcon,
Expand All @@ -22,14 +23,22 @@ export function Tabs() {
const tabs = useMemo(() => {
const initTabs = [
{
name: 'Photos',
name: 'Your Photos',
href: PAGES.AUTHENTICATED_PAGES.ACCOUNT,
current: PAGES.AUTHENTICATED_PAGES.ACCOUNT === location.pathname,
icon: PhotoIcon,
},
]

if (currentUser?.role) {
if (currentUser?.role === 'CREATOR') {
initTabs.push({
name: 'Uploads',
href: PAGES.AUTHENTICATED_PAGES.ACCOUNT_UPLOADS,
current:
PAGES.AUTHENTICATED_PAGES.ACCOUNT_UPLOADS === location.pathname,
icon: ArrowUpTrayIcon,
})

initTabs.push({
name: 'Collections',
href: PAGES.AUTHENTICATED_PAGES.ACCOUNT_COLLECTIONS,
Expand Down
139 changes: 69 additions & 70 deletions apps/client/app/modules/account/home/contents/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,88 +9,87 @@ import { ErrorState } from '@/components/error-state/index.tsx'
import { Loader } from '@/components/loader/index.tsx'
import { PAGES } from '@/constants/index.ts'
import { safeString } from '@/lib/strings.ts'
import { imageUrls } from '@/modules/landing-page/index.tsx'
import { useAuth } from '@/providers/auth/index.tsx'

export function AccountContentsModule() {
const { currentUser } = useAuth()
const { data, isError, isPending } = useGetCollectionContentsBySlug({
slug: `${safeString(currentUser?.id)}_uploads`,
query: {
pagination: { page: 0, per: 50 },
populate: ['content', 'content.tags'],
},
})
// const { currentUser } = useAuth()
// const { data, isError, isPending } = useGetCollectionContentsBySlug({
// slug: `${safeString(currentUser?.id)}_uploads`,
// query: {
// pagination: { page: 0, per: 50 },
// populate: ['content', 'content.tags'],
// },
// })

if (isPending) {
return (
<div className="my-16 flex justify-center">
<Loader />
</div>
)
}
// if (isPending) {
// return (
// <div className="my-16 flex justify-center">
// <Loader />
// </div>
// )
// }

if (isError) {
return (
<ErrorState
message="An error occurred fetching your contents."
title="Something happened."
>
<Button
isLink
variant="outlined"
href={PAGES.AUTHENTICATED_PAGES.ACCOUNT}
linkProps={{
reloadDocument: true,
}}
>
<ArrowPathIcon aria-hidden="true" className="-ml-0.5 mr-1.5 size-5" />
Reload
</Button>
</ErrorState>
)
}
// if (isError) {
// return (
// <ErrorState
// message="An error occurred fetching your contents."
// title="Something happened."
// >
// <Button
// isLink
// variant="outlined"
// href={PAGES.AUTHENTICATED_PAGES.ACCOUNT}
// linkProps={{
// reloadDocument: true,
// }}
// >
// <ArrowPathIcon aria-hidden="true" className="-ml-0.5 mr-1.5 size-5" />
// Reload
// </Button>
// </ErrorState>
// )
// }

if (!data?.total) {
return (
<EmptyState
message="There are no contents found yet. You could start uploading now."
title="No content found"
>
<Button isLink href={PAGES.AUTHENTICATED_PAGES.UPLOAD}>
<PlusIcon aria-hidden="true" className="-ml-0.5 mr-1.5 size-5" />
Upload new content
</Button>
</EmptyState>
)
}
// if (!data?.total) {
// return (
// <EmptyState
// message="There are no contents found yet. You could start uploading now."
// title="No content found"
// >
// <Button isLink href={PAGES.AUTHENTICATED_PAGES.UPLOAD}>
// <PlusIcon aria-hidden="true" className="-ml-0.5 mr-1.5 size-5" />
// Upload new content
// </Button>
// </EmptyState>
// )
// }

return (
<FadeIn>
<div className="columns-1 gap-2 sm:columns-2 sm:gap-4 md:columns-2 lg:columns-3 [&>img:not(:first-child)]:mt-8">
{data.rows.map((collectionContent, index) => (
{imageUrls.map((url, index) => (
<Fragment key={index}>
{collectionContent.content ? (
<div className="mb-5 break-inside-avoid">
<Content
content={collectionContent.content}
showCreator={false}
/>
<div className="mt-1 flex items-center gap-2">
{collectionContent.content.tags?.slice(0, 4)?.map((tag) => (
<Button
key={tag.id}
size="sm"
isLink
href={PAGES.TAG.replace(':tag', tag.slug)}
variant="outlined"
className="rounded"
>
{tag.name}
</Button>
))}
</div>
<div className="mb-5 break-inside-avoid">
<Content
content={{ media: { url } } as any}
showCreator={false}
/>
<div className="mt-1 flex items-center gap-2">
{['tag1', 'tag2']?.map((tag) => (
<Button
key={tag}
size="sm"
isLink
href={PAGES.TAG.replace(':tag', tag)}
variant="outlined"
className="rounded"
>
{tag}
</Button>
))}
</div>
) : null}
</div>
</Fragment>
))}
</div>
Expand Down
99 changes: 99 additions & 0 deletions apps/client/app/modules/account/home/uploads/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { ArrowPathIcon, PlusIcon } from '@heroicons/react/24/outline'
import { Fragment } from 'react'
import { useGetCollectionContentsBySlug } from '@/api/collections/index.ts'
import { FadeIn } from '@/components/animation/FadeIn.tsx'
import { Button } from '@/components/button/index.tsx'
import { Content } from '@/components/Content/index.tsx'
import { EmptyState } from '@/components/empty-state/index.tsx'
import { ErrorState } from '@/components/error-state/index.tsx'
import { Loader } from '@/components/loader/index.tsx'
import { PAGES } from '@/constants/index.ts'
import { safeString } from '@/lib/strings.ts'
import { useAuth } from '@/providers/auth/index.tsx'

export function AccountUploadsModule() {
const { currentUser } = useAuth()
const { data, isError, isPending } = useGetCollectionContentsBySlug({
slug: `${safeString(currentUser?.id)}_uploads`,
query: {
pagination: { page: 0, per: 50 },
populate: ['content', 'content.tags'],
},
})

if (isPending) {
return (
<div className="my-16 flex justify-center">
<Loader />
</div>
)
}

if (isError) {
return (
<ErrorState
message="An error occurred fetching your contents."
title="Something happened."
>
<Button
isLink
variant="outlined"
href={PAGES.AUTHENTICATED_PAGES.ACCOUNT}
linkProps={{
reloadDocument: true,
}}
>
<ArrowPathIcon aria-hidden="true" className="-ml-0.5 mr-1.5 size-5" />
Reload
</Button>
</ErrorState>
)
}

if (!data?.total) {
return (
<EmptyState
message="There are no contents found yet. You could start uploading now."
title="No content found"
>
<Button isLink href={PAGES.AUTHENTICATED_PAGES.UPLOAD}>
<PlusIcon aria-hidden="true" className="-ml-0.5 mr-1.5 size-5" />
Upload new content
</Button>
</EmptyState>
)
}

return (
<FadeIn>
<div className="columns-1 gap-2 sm:columns-2 sm:gap-4 md:columns-2 lg:columns-3 [&>img:not(:first-child)]:mt-8">
{data.rows.map((collectionContent, index) => (
<Fragment key={index}>
{collectionContent.content ? (
<div className="mb-5 break-inside-avoid">
<Content
content={collectionContent.content}
showCreator={false}
/>
<div className="mt-1 flex items-center gap-2">
{collectionContent.content.tags?.map((tag) => (
<Button
key={tag.id}
size="sm"
isLink
href={PAGES.TAG.replace(':tag', tag.slug)}
variant="outlined"
className="rounded"
>
{tag.name}
</Button>
))}
</div>
</div>
) : null}
</Fragment>
))}
</div>
</FadeIn>
)
}
1 change: 1 addition & 0 deletions apps/client/app/modules/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export * from './account/home/index.tsx'
export * from './account/home/contents/index.tsx'
export * from './account/home/likes/index.tsx'
export * from './account/home/collections/index.tsx'
export * from './account/home/uploads/index.tsx'
export * from './account/verify/index.tsx'
export * from './account/package-and-billings/index.tsx'
export * from './account/wallet/index.tsx'
Expand Down
7 changes: 5 additions & 2 deletions apps/client/app/modules/photo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import {
LockClosedIcon,
} from '@heroicons/react/16/solid'
import { ChevronDownIcon, XCircleIcon } from '@heroicons/react/20/solid'
import { CalendarDaysIcon, ShieldCheckIcon , HeartIcon as HeartIconOutline } from '@heroicons/react/24/outline'
import {
CalendarDaysIcon,
ShieldCheckIcon,
HeartIcon as HeartIconOutline,
} from '@heroicons/react/24/outline'
import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'
import { Link, useLoaderData } from '@remix-run/react'
import dayjs from 'dayjs'
Expand All @@ -25,7 +29,6 @@ import { safeString } from '@/lib/strings.ts'
import { useAuth } from '@/providers/auth/index.tsx'
import { type loader } from '@/routes/photos.$slug.ts'


export const PhotoModule = () => {
const { currentUser } = useAuth()
const { content } = useLoaderData<typeof loader>()
Expand Down
Loading

0 comments on commit ca2273c

Please sign in to comment.