chore: integrated homepade

Bendomey · Jan 8, 2025 · 1ee05fd · 1ee05fd
1 parent 176619c
commit 1ee05fd
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 20 deletions.
diff --git a/apps/client/app/constants/index.ts b/apps/client/app/constants/index.ts
@@ -89,3 +89,18 @@ export const PAGES = {
 const placeholderColor =
 	'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8+/79fwAJaAPMsmQeyQAAAABJRU5ErkJggg==' // grey-10 as 1px png in base64
 export const blurDataURL = `data:image/png;base64,${placeholderColor}`
+
+export const imageUrls = [
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg',
+	'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg',
+]
diff --git a/apps/client/app/modules/landing-page/index.tsx b/apps/client/app/modules/landing-page/index.tsx
@@ -1,11 +1,13 @@
 import { useInView } from 'react-intersection-observer'
 import { HeroSection } from './components/hero-section/index.tsx'
 import { Pricing } from './components/pricing/index.tsx'
+import { useGetContents } from '@/api/contents/index.ts'
 import { FadeIn, FadeInStagger } from '@/components/animation/FadeIn.tsx'
+import { Button } from '@/components/button/index.tsx'
 import { Content } from '@/components/Content/index.tsx'
 import { Footer } from '@/components/footer/index.tsx'
 import { Header } from '@/components/layout/index.ts'
-import { Button } from '@/components/button/index.tsx'
+import { Loader } from '@/components/loader/index.tsx'
 import { PAGES } from '@/constants/index.ts'
 
 export const imageUrls = [
@@ -28,28 +30,54 @@ export const LandingPageModule = () => {
 		threshold: 0,
 	})
 
+	const { data, isPending } = useGetContents({
+		query: {
+			pagination: { page: 0, per: 20 },
+			filters: {
+				// is_featured: true,
+			},
+			populate: ['content.createdBy'],
+		},
+	})
+
+	let content = <></>
+
+	if (isPending) {
+		content = (
+			<div className="flex h-[50vh] flex-1 items-center justify-center">
+				<Loader />
+			</div>
+		)
+	}
+
+	if (data?.total) {
+		content = (
+			<FadeInStagger faster>
+				<div className="columns-1 gap-2 sm:columns-2 sm:gap-4 md:columns-3 lg:columns-4 [&>img:not(:first-child)]:mt-8">
+					{data.rows.map((content) => (
+						<div className="mb-5" key={content.id}>
+							<FadeIn>
+								<Content content={content} />
+							</FadeIn>
+						</div>
+					))}
+				</div>
+
+				<div className='flex justify-center'>
+					<Button isLink href={PAGES.CONTENTS} variant='solid' color='secondaryGhost' size='xl'>See More Contents</Button>
+				</div>
+			</FadeInStagger>
+		)
+	}
+
 	return (
 		<div className="relative">
 			<div ref={heroRef}>
 				<HeroSection />
 			</div>
 			{inView ? null : <Header isHeroSearchInVisible={false} />}
 			<div className="max-w-8xl mx-auto my-10 items-center px-3 sm:px-3 md:px-8">
-				<FadeInStagger faster>
-					<div className="columns-1 gap-2 sm:columns-2 sm:gap-4 md:columns-3 lg:columns-4 [&>img:not(:first-child)]:mt-8">
-						{imageUrls.map((url, index) => (
-							<div className="mb-5" key={index}>
-								<FadeIn>
-									<Content content={{ media: { url } } as any} />
-								</FadeIn>
-							</div>
-						))}
-					</div>
-
-					<div className='flex justify-center'>
-						<Button isLink href={PAGES.CONTENTS} variant='solid' color='secondaryGhost' size='xl'>See More Contents</Button>
-					</div>
-				</FadeInStagger>
+				{content}
 				<Pricing />
 			</div>
 			<Footer />

diff --git a/apps/client/app/routes/_index.ts b/apps/client/app/routes/_index.ts
@@ -1,4 +1,10 @@
-import { type MetaFunction } from '@remix-run/node'
+import { type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node'
+import { dehydrate, QueryClient } from '@tanstack/react-query'
+import { getContents } from '@/api/contents/index.ts'
+import { QUERY_KEYS } from '@/constants/index.ts'
+import { environmentVariables } from '@/lib/actions/env.server.ts'
+import { extractAuthCookie } from '@/lib/actions/extract-auth-cookie.ts'
+import { jsonWithCache } from '@/lib/actions/json-with-cache.server.ts'
 import { LandingPageModule } from '@/modules/index.ts'
 
 export const meta: MetaFunction = () => {
@@ -9,4 +15,35 @@ export const meta: MetaFunction = () => {
 	]
 }
 
+export async function loader(loaderArgs: LoaderFunctionArgs) {
+	const queryClient = new QueryClient()
+
+	const authCookie = await extractAuthCookie(
+		loaderArgs.request.headers.get('cookie'),
+	)
+
+	const baseUrl = `${environmentVariables().API_ADDRESS}/api`
+
+	const query = {
+		pagination: { page: 0, per: 20 },
+		filters: {
+			// is_featured: true,
+		},
+		populate: ['content.createdBy'],
+	}
+	await queryClient.prefetchQuery({
+		queryKey: [QUERY_KEYS.CONTENTS, query],
+		queryFn: () =>
+			getContents(query, {
+				authToken: authCookie?.token,
+				baseUrl,
+			}),
+	})
+
+	const dehydratedState = dehydrate(queryClient)
+	return jsonWithCache({
+		dehydratedState,
+	})
+}
+
 export default LandingPageModule
diff --git a/apps/client/types/content.d.ts b/apps/client/types/content.d.ts
@@ -75,4 +75,5 @@ interface FetchContentLikeFilter {
 interface FetchContentFilter {
 	orientation?: string
 	license?: string
+	is_featured?: boolean
 }
diff --git a/services/main/Controllers/Content.cs b/services/main/Controllers/Content.cs
@@ -483,6 +483,7 @@ public async Task<IActionResult> TextualSearch(
     /// <summary>
     /// Retrieves all contents
     /// </summary>
+    /// <param name="is_featured">Can be `true` or `false`</param>
     /// <param name="license">Can be `ALL` or `FREE` or `PREMIUM`</param>
     /// <param name="orientation">Can be `ALL` or `LANDSCAPE` or `PORTRAIT` or `SQUARE`</param>
     /// <param name="populate">Comma separated values to populate fields</param>
@@ -509,7 +510,8 @@ public async Task<IActionResult> GetAllContents(
         [FromQuery] string populate = "",
         [FromQuery] string sortBy = "created_at",
         [FromQuery] string license = "ALL",
-        [FromQuery] string orientation = "ALL"
+        [FromQuery] string orientation = "ALL",
+        [FromQuery] bool is_featured = false
     )
     {
 
@@ -531,13 +533,15 @@ public async Task<IActionResult> GetAllContents(
             var contents = await _searchContentService.GetContents(queryFilter, new GetContentsInput
             {
                 License = license,
-                Orientation = orientation
+                Orientation = orientation,
+                IsFeatured = is_featured
             });
 
             var count = await _searchContentService.GetContentsCount(new GetContentsInput
             {
                 License = license,
-                Orientation = orientation
+                Orientation = orientation,
+                IsFeatured = is_featured
             });
 
 

diff --git a/services/main/Domains/Content/SearchContentService.cs b/services/main/Domains/Content/SearchContentService.cs
@@ -270,6 +270,11 @@ GetContentsInput input
             }
         }
 
+        if (input.IsFeatured)
+        {
+            filter &= builder.Eq(r => r.IsFeatured, true);
+        }
+
         var contents = await _contentsCollection
             .Find(filter)
             .Skip(queryFilter.Skip)
@@ -308,6 +313,11 @@ GetContentsInput input
             }
         }
 
+        if (input.IsFeatured)
+        {
+            filter &= builder.Eq(r => r.IsFeatured, true);
+        }
+
         var contents = await _contentsCollection.CountDocumentsAsync(filter);
 
         return contents;

diff --git a/services/main/Domains/Content/dto.cs b/services/main/Domains/Content/dto.cs
@@ -5,6 +5,7 @@ public class GetContentsInput
 {
     public string Orientation { get; set; } = "ALL";
     public string License { get; set; } = "ALL";
+    public bool IsFeatured { get; set; } = false;
 }
 
 public class ContentLikeInput