feat: update grid and api

pexels-api/package.json

@@ -18,7 +18,7 @@
     "test:cov": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
     "test:e2e": "jest --config ./test/jest-e2e.json",
-    "docker":"docker build -t pmicro:latest ."
+    "docker": "docker build -t pmicro:latest ."
   },
   "dependencies": {
     "@nestjs/bullmq": "^10.2.3",
@@ -35,6 +35,7 @@
     "cache-manager-redis-store": "^3.0.1",
     "cache-manager-redis-yet": "^5.1.5",
     "ioredis": "^5.4.2",
+    "naughty-words": "^1.2.0",
     "pexels": "^1.4.0",
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1"

pexels-api/src/pexels.service.ts

@@ -5,7 +5,14 @@ import { Cron } from '@nestjs/schedule';
 import { Queue } from 'bullmq';
 import { createClient } from 'pexels';
 import { config } from './config';
+import * as naughty from 'naughty-words'
+const allNaughtyWords = Object.values(naughty).flat() as string[]
+console.info('allNaughtyWords', allNaughtyWords)
 const maxRequestsPerSecond = config.maxRequestsPerSecond;
+const replaceAllNaughty = (query:string) => {
+  let cleanquery = allNaughtyWords.reduce((a,i)=>a.replaceAll(i, ''), query);
+  return cleanquery
+}
 @Injectable()
 export class PexelsService {
   pexelsClient: ReturnType<typeof createClient>;
@@ -19,10 +26,10 @@ export class PexelsService {
     return this.pexelsClient.photos.curated({ per_page: perPage, page });
   }
   async searchPhotos(query: string, perPage: number = 16, page: number = 1) {
-    return this.pexelsClient.photos.search({ query, per_page: perPage, page });
+    return this.pexelsClient.photos.search({ query:replaceAllNaughty(query), per_page: perPage, page });
   }
   async searchVideos(query: string, perPage: number = 16, page: number = 1) {
-    return this.pexelsClient.videos.search({ query, per_page: perPage, page });
+    return this.pexelsClient.videos.search({ query:replaceAllNaughty(query), per_page: perPage, page });
   }
   async getVideo(id: number) {
     return this.pexelsClient.videos.show({ id });

pexels-api/yarn.lock

@@ -3944,6 +3944,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+naughty-words@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/naughty-words/-/naughty-words-1.2.0.tgz#255f60bad94b430fb1216d05a3f4eec3e1061d64"
+  integrity sha512-0iadX6fN+3NsfvIRtWmmpEX9VsoIQ6n9FwyIxmew9w5yzFNqMgs/Ky0eAC/z5xXSHtqlVoByiovdROikwH9SXQ==
+
 [email protected]:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"

pexels-grid/src/api/pexels.ts

@@ -0,0 +1,14 @@
+import { getServerEnv } from "@/utils/getServerEnv";
+
+export const getGallery = async (query?:string, page?:number, video?:boolean) => {
+  const API_URL = (await getServerEnv()).API_URL;
+  let uri = query
+    ? `${API_URL}pexels/search/${query}?page=${page || 1}`
+    : API_URL + "pexels/curated/" + (page || '');
+  if (video) {
+    uri = `${API_URL}pexels/videos/search/${query || "cats"}?page=${page || 1}`;
+  }
+  const f = await fetch(uri);
+  const d = await f.json();
+  return d
+}

pexels-grid/src/app/@modal/p/[id]/page.tsx

@@ -15,7 +15,6 @@ export default async function PhotoPage({
       config.SSR_API_URL + (video ? "pexels/video/" : "pexels/") + p.id,
     )
   ).json();
-  // console.info("photo", photo, {video});
   return (
     <StorageWrapper>
       <PhotoImage

pexels-grid/src/app/globals.css

@@ -19,3 +19,17 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+.gallery-item {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  will-change: transform, opacity;
+}
+
+.gallery-item-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.gallery-item-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+}

pexels-grid/src/hooks/useWindowSize.ts

@@ -0,0 +1,48 @@
+'use client';
+import { useEffect, useState } from "react";
+
+export function useWindowSize() {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<{width?:number,height?:number,columnWidth?:number}>({
+    width: undefined,
+    height: undefined,
+    columnWidth: undefined
+  });
+  const getColumnWidth = () => {
+    if (typeof window === "undefined") {
+      return 640;
+    }
+    let columnWidth =
+      window?.innerWidth < 1536
+        ? window?.innerWidth * 0.33
+        : window?.innerWidth / 4;
+    if (window?.innerWidth < 1280) columnWidth = window?.innerWidth / 2;
+
+    // if (window.innerWidth < 640) columnWidth = window.innerWidth;
+    return columnWidth;
+  };
+
+  useEffect(() => {
+    // only execute all the code below in client side
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        columnWidth: getColumnWidth()
+      });
+    }
+
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}