chore: integrated api (#149)

apps/client/app/api/collections/index.ts

@@ -218,6 +218,55 @@ export const useGetCollectionBySlug = ({
 		retry: retryQuery,
 	})
 
+export const getCollectionById = async (
+	id: string,
+	query: FetchMultipleDataInputParams<FetchCollectionFilter>,
+	apiConfig?: ApiConfigForServerConfig,
+) => {
+	try {
+		const removeAllNullableValues = getQueryParams<FetchCollectionFilter>(query)
+		const params = new URLSearchParams(removeAllNullableValues)
+		const response = await fetchClient<ApiResponse<Collection>>(
+			`/v1/collections/${id}?${params.toString()}`,
+			{
+				...(apiConfig ? apiConfig : {}),
+			},
+		)
+
+		if (!response.parsedBody.status && response.parsedBody.errorMessage) {
+			throw new Error(response.parsedBody.errorMessage)
+		}
+
+		return response.parsedBody.data
+	} catch (error: unknown) {
+		if (error instanceof Error) {
+			throw error
+		}
+
+		// Error from server.
+		if (error instanceof Response) {
+			const response = await error.json()
+			throw new Error(response.errorMessage)
+		}
+	}
+}
+
+export const useGetCollectionById = ({
+	id,
+	query,
+	retryQuery,
+}: {
+	id?: string
+	query: FetchMultipleDataInputParams<FetchCollectionFilter>
+	retryQuery?: boolean
+}) =>
+	useQuery({
+		queryKey: [QUERY_KEYS.COLLECTIONS, id, 'id'],
+		queryFn: () => getCollectionById(safeString(id), query),
+		enabled: Boolean(id),
+		retry: retryQuery,
+	})
+
 export const getCollectionContentsBySlug = async (
 	slug: string,
 	query: FetchMultipleDataInputParams<FetchCollectionFilter>,

apps/client/app/api/explore/index.ts

@@ -0,0 +1,30 @@
+import { getQueryParams } from '@/lib/get-param.ts'
+import { fetchClient } from '@/lib/transport/index.ts'
+
+export const getExploreSections = async (
+	props: FetchMultipleDataInputParams<FetchExploreSectionFilter>,
+	apiConfig: ApiConfigForServerConfig,
+) => {
+	try {
+		const removeAllNullableValues =
+			getQueryParams<FetchExploreSectionFilter>(props)
+		const params = new URLSearchParams(removeAllNullableValues)
+		const response = await fetchClient<
+			ApiResponse<FetchMultipleDataResponse<ExploreSection>>
+		>(`/v1/explore?${params.toString()}`, {
+			...(apiConfig ? apiConfig : {}),
+		})
+
+		return response.parsedBody.data
+	} catch (error: unknown) {
+		// Error from server.
+		if (error instanceof Response) {
+			const response = await error.json()
+			throw new Error(response.errorMessage)
+		}
+
+		if (error instanceof Error) {
+			throw error
+		}
+	}
+}

apps/client/app/components/Content/index.tsx

@@ -8,13 +8,16 @@ import {
 	HeartIcon as HeartIconSolid,
 	XCircleIcon,
 } from '@heroicons/react/24/solid'
-import { Link } from '@remix-run/react'
+import { Link, useNavigate } from '@remix-run/react'
 import { Image } from 'remix-image'
 import { Button } from '../button/index.tsx'
 import { PhotographerCreatorCard } from '../creator-card/index.tsx'
 import { FlyoutContainer } from '../flyout/flyout-container.tsx'
 import { LikeButton } from '@/components/like-button.tsx'
 import { blurDataURL, PAGES } from '@/constants/index.ts'
+import { useValidateImage } from '@/hooks/use-validate-image.tsx'
+import { getNameInitials } from '@/lib/misc.ts'
+import { safeString } from '@/lib/strings.ts'
 import { useAuth } from '@/providers/auth/index.tsx'
 
 interface Props {
@@ -25,6 +28,7 @@ interface Props {
 
 export const Content = ({ content, showCreator = true }: Props) => {
 	const { currentUser } = useAuth()
+	const navigate = useNavigate()
 
 	const isContentMine = content.createdById === currentUser?.id
 	return (
@@ -145,12 +149,19 @@ export const Content = ({ content, showCreator = true }: Props) => {
 										/>
 									}
 								>
-									<div className="flex items-center">
-										<Image
-											className="inline-block h-7 w-7 rounded-full"
-											src={content.createdBy.photo}
-											alt={content.createdBy.name}
-										/>
+									<div
+										className="flex items-center"
+										onClick={(e) => {
+											e.preventDefault()
+											navigate(
+												PAGES.CREATOR.PHOTOS.replace(
+													':username',
+													safeString(content?.createdBy?.username),
+												),
+											)
+										}}
+									>
+										<CreatedByCard createdBy={content.createdBy} />
 										<span className="ml-2 text-sm font-medium text-white">
 											{content.createdBy.name}
 										</span>
@@ -190,3 +201,28 @@ export const Content = ({ content, showCreator = true }: Props) => {
 		</Link>
 	)
 }
+
+interface CreatedByCardProps {
+	createdBy: BasicCreator
+}
+
+const CreatedByCard = ({ createdBy }: CreatedByCardProps) => {
+	const isProfilePhotoValid = useValidateImage(safeString(createdBy?.photo))
+	const initials = getNameInitials(safeString(createdBy?.name))
+
+	return (
+		<div className="flex">
+			{isProfilePhotoValid && createdBy?.photo ? (
+				<Image
+					className="inline-block h-7 w-7 rounded-full"
+					src={createdBy.photo}
+					alt={createdBy.name}
+				/>
+			) : (
+				<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-blue-600 text-white ring-1 ring-white">
+					<span className="text-xs font-medium leading-none">{initials}</span>
+				</span>
+			)}
+		</div>
+	)
+}

apps/client/app/constants/index.ts

@@ -18,6 +18,7 @@ export const QUERY_KEYS = {
 	COLLECTIONS: 'collections',
 	CONTENT_LIKES: 'content-likes',
 	CREATORS: 'creators',
+	EXPLORE: 'explore',
 } as const
 
 export const MFONI_PACKAGES: Array<PackageType> = ['FREE', 'BASIC', 'ADVANCED']
@@ -67,10 +68,10 @@ export const PAGES = {
 		PACKAGE_AND_BILLINGS: '/account/package-and-billings',
 	},
 	PHOTO: '/photos/:slug',
-	TAGS: '/tags',
-	TAG: '/tags/:tag',
-	COLLECTIONS: '/collections',
-	COLLECTION: '/collections/:collection',
+	TAGS: '/explore/tags',
+	TAG: '/explore/tags/:tag',
+	COLLECTIONS: '/explore/collections',
+	COLLECTION: '/explore/collections/:collection',
 	SEARCH: {
 		CREATORS: '/search/creators/:query',
 		PHOTOS: '/search/photos/:query',

apps/client/app/modules/account/home/components/cover.tsx

@@ -13,15 +13,10 @@ import { MFONI_PACKAGES_DETAILED } from '@/constants/index.ts'
 import { useValidateImage } from '@/hooks/use-validate-image.tsx'
 import { classNames } from '@/lib/classNames.ts'
 import { isBrowser } from '@/lib/is-browser.ts'
+import { getNameInitials } from '@/lib/misc.ts'
 import { safeString } from '@/lib/strings.ts'
 import { useAuth } from '@/providers/auth/index.tsx'
 
-const getNameInitials = (name: string) =>
-	name
-		.split(' ')
-		.map((n) => n[0])
-		.join('')
-
 interface Props {
 	application: CreatorApplication
 }

apps/client/app/modules/collections/all/index.tsx → apps/client/app/modules/explore/collections/all/index.tsx

@@ -14,7 +14,7 @@ export function CollectionsModule() {
 	const { data, isPending, isError } = useGetCollections({
 		pagination: { page: 0, per: 50 },
 		filters: { visibility: 'PUBLIC' },
-		populate: ['collection.createdBy'],
+		populate: ['collection.createdBy', 'content'],
 	})
 
 	let content = <></>

apps/client/app/modules/collections/single/components/edit-collection-modal/index.tsx → apps/client/app/modules/explore/collections/single/components/edit-collection-modal/index.tsx

@@ -1,6 +1,6 @@
+import { useState } from 'react'
 import { Button } from '@/components/button/index.tsx'
 import { Modal } from '@/components/modal/index.tsx'
-import { useState } from 'react'
 
 interface Props {
 	isOpened: boolean

apps/client/app/modules/collections/single/index.tsx → apps/client/app/modules/explore/collections/single/index.tsx

@@ -9,6 +9,7 @@ import { useLoaderData, useNavigate, useParams } from '@remix-run/react'
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { AddImageContentsModal } from './components/add-image-contents-modal.tsx'
+import { EditCollectionTitleModal } from './components/edit-collection-modal/index.tsx'
 import { RemoveImageContentModal } from './components/remove-image-content-dialog.tsx'
 import { StatusButton } from './components/status-button.tsx'
 import { useGetCollectionContentsBySlug } from '@/api/collections/index.ts'
@@ -26,8 +27,7 @@ import { PAGES } from '@/constants/index.ts'
 import { useDisclosure } from '@/hooks/use-disclosure.tsx'
 import { safeString } from '@/lib/strings.ts'
 import { useAuth } from '@/providers/auth/index.tsx'
-import { type loader } from '@/routes/collections.$collection.ts'
-import { EditCollectionTitleModal } from './components/edit-collection-modal/index.tsx'
+import { type loader } from '@/routes/explore.collections.$collection.ts'
 
 export function CollectionModule() {
 	const { collection } = useLoaderData<typeof loader>()

apps/client/app/modules/explore/components/section/collection-section.tsx

@@ -1,18 +1,35 @@
 import { Link } from '@remix-run/react'
+import { useGetCollectionById } from '@/api/collections/index.ts'
+import { CollectionCard } from '@/components/CollectionCard/index.tsx'
 
 interface Props {
-	data: Collection
+	collectionId: string
 }
 
-export function CollectionSection({}: Props) {
-	return <>Tag</>
+export function CollectionSection({ collectionId }: Props) {
+	const { isPending, data, isError } = useGetCollectionById({
+		id: collectionId,
+		query: {
+			populate: ['content'],
+		},
+	})
+
+	if (isPending) return <CollectionShimmer />
+	if (!data || isError) return null
+
+	return (
+		<div className="w-72">
+			<CollectionCard collection={data} />
+		</div>
+	)
 }
 
 export function CollectionShimmer() {
 	return (
 		<Link to="" preventScrollReset className="animate-pulse space-y-2">
-			<div className="h-36 w-44 rounded-md bg-zinc-100" />
-			<div className="h-3 w-36 rounded bg-zinc-100" />
+			<div className="h-44 w-72 rounded-md bg-zinc-100" />
+			<div className="h-3 w-56 rounded bg-zinc-100" />
+			<div className="h-2 w-40 rounded bg-zinc-100" />
 		</Link>
 	)
 }

apps/client/app/modules/explore/components/section/content-section.tsx

@@ -1,11 +1,16 @@
 import { Link } from '@remix-run/react'
+import { Content } from '@/components/Content/index.tsx'
 
 interface Props {
 	data: Content
 }
 
-export function ContentSection({}: Props) {
-	return <>Content</>
+export function ContentSection({ data }: Props) {
+	return (
+		<div className="h-auto w-80">
+			<Content content={data} />
+		</div>
+	)
 }
 
 export function ContentShimmer() {

apps/client/app/modules/explore/components/section/creator-section.tsx

@@ -1,9 +1,45 @@
+import { Link } from '@remix-run/react'
+import { Image } from 'remix-image'
+import { PAGES } from '@/constants/index.ts'
+import { useValidateImage } from '@/hooks/use-validate-image.tsx'
+import { getNameInitials } from '@/lib/misc.ts'
+import { safeString } from '@/lib/strings.ts'
+
 interface Props {
 	data: EnhancedCreator
 }
 
-export function CreatorSection({}: Props) {
-	return <>Tag</>
+export function CreatorSection({ data }: Props) {
+	const isProfilePhotoValid = useValidateImage(safeString(data.photo))
+	const initials = getNameInitials(safeString(data.name))
+
+	return (
+		<Link to={PAGES.CREATOR.PHOTOS.replace(':username', data.username)}>
+			<div className="flex max-w-64 flex-col items-center">
+				{isProfilePhotoValid && data.photo ? (
+					<Image
+						className="inline-block h-24 w-24 rounded-full"
+						src={data.photo}
+						alt={data.name}
+					/>
+				) : (
+					<span className="inline-flex h-24 w-24 items-center justify-center rounded-full bg-blue-600 text-white ring-4 ring-white">
+						<span className="text-3xl font-medium leading-none">
+							{initials}
+						</span>
+					</span>
+				)}
+				<div className="my-2 flex flex-col items-center">
+					<h1 className="max-w-60 truncate text-center font-bold">
+						{data.name}
+					</h1>
+					<p className="max-w-60 truncate text-center text-xs font-medium">
+						{data.username}
+					</p>
+				</div>
+			</div>
+		</Link>
+	)
 }
 
 export function CreatorShimmer() {