Fix projects

actions/fetchProjectsData.ts

@@ -2,8 +2,8 @@
 
 import {
   IProjectsDataResponse,
-  Project,
   ProjectPaginationFilter,
+  SummaryProjectType,
 } from '@/types/project';
 
 export type ProjectPaginationRequest = {
@@ -13,25 +13,48 @@ export type ProjectPaginationRequest = {
 };
 
 const PROJECT_API_ENDPOINT = 'https://baas-data-provider.onrender.com/projects';
+const localy = `http://localhost:8080/projects`;
 
 async function fetchProjectsData({
   page = 1,
   limit = 100,
   filter = ProjectPaginationFilter.ALL,
 }: ProjectPaginationRequest): Promise<IProjectsDataResponse> {
-  const response = await fetch(PROJECT_API_ENDPOINT, {
+  const response = await fetch(localy, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ page, limit, filter }),
   });
-
+  
   // fetch from endpoint POST with page, limit, filter as IProjectsDataResponse
-  const { projects, total, languages, pageLanguages, timestamp } =
-    await response.json();
+  const {
+    projects,
+    total,
+    languages,
+    pageLanguages,
+    timestamp,
+  } =
+  await response.json() as IProjectsDataResponse;
+
+
+  const parsedProjects = SummaryProjectType.array().safeParse(projects);
+
+
+  if (!parsedProjects.success) {
+    throw new Error(`Failed to parse projects: ${parsedProjects.error}`);
+  }
+
 
-  return { projects, total, languages, pageLanguages, timestamp };
+  const send = {
+    projects: parsedProjects.data,
+    total: total,
+    languages: languages,
+    pageLanguages: pageLanguages,
+    timestamp: new Date(timestamp),
+  };
+  return send;
 }
 
-export default fetchProjectsData;
+export default fetchProjectsData;

app/[locale]/projects/page.tsx

@@ -27,12 +27,13 @@ const ProjectsPage = () => {
    */
   const projectIncludesActiveTags = useCallback(
     (project: Project) => {
-      return project.item.data.repository.languages.edges.some(edge =>
-        tags.some(tag => tag.isActive && tag.name === edge.node.name)
+      return project.item.languages?.some(edge =>
+        tags.some(tag => tag.isActive && tag.name === edge)
       );
     },
     [tags]
   );
+
 
   /**
    *
@@ -83,32 +84,38 @@ const ProjectsPage = () => {
         filter,
       });
 
-      setProjects(
-        projects.filter((p: Project) =>
-          p.item.data.repository.name
-            .toLocaleLowerCase()
-            .trim()
-            .includes(searchByProjectNameValue.toLocaleLowerCase().trim())
-        )
+      const projectsFilteredByName = projects.filter((p: Project) =>
+        p.item?.name?.toLowerCase()
+          .trim()
+          .includes(searchByProjectNameValue.toLowerCase().trim())
       );
 
       const newTags: ProjectFilter[] = [];
       pageLanguages.forEach((lang: string) => {
         newTags.push({ name: lang, isActive: true });
       });
-      setTags(newTags);
+
+      return {
+        newTags,
+        projectsFilteredByName,
+      }
     } catch (error) {
       console.error('Failed to fetch projects:', error);
-    } finally {
-      setLoading(false);
     }
   }, [filter, searchByProjectNameValue]);
 
   useEffect(() => {
-    debouncedFetchProjectsData();
+    debouncedFetchProjectsData().then((data) => {
+      if (!data) return;
+      setProjects(data.projectsFilteredByName);
+      setTags(data.newTags);
+    }).finally(() => {
+      setLoading(false);
+    });
+
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filter, searchByProjectNameValue]);
+  }, [filter, searchByProjectNameValue, debouncedFetchProjectsData]);
 
   return (
     <div className="projects flex flex-col gap-4" dir={direction}>
@@ -149,4 +156,5 @@ const ProjectsPage = () => {
   );
 };
 
+
 export default ProjectsPage;

components/Projects/ProjectCard/ProjectCard.tsx

@@ -10,40 +10,36 @@ import { getChannelUrl } from '../linkToDiscordChannel';
 import { Project } from '@/types/project';
 import { useTranslations } from 'next-intl';
 
-export interface ProjectCardProps {
-  project: Project;
+type ProjectItem = Project["item"]
+
+export interface ProjectCardProps extends Required<ProjectItem> {
   activeLanguagesNames: string[];
 }
 
 export default function ProjectCard({
-  project: {
-    item: {
-      data: {
-        repository: {
-          openGraphImageUrl,
-          updatedAt,
-          createdAt,
-          name,
-          url,
-          description,
-          languages,
-          contributors: { edges: contributors },
-        },
-      },
-    },
-  },
+  owner,
+  updatedAt,
+  createdAt,
+  name,
+  url,
+  description,
+  languages,
+  contributors,
   activeLanguagesNames,
 }: ProjectCardProps) {
-  const updatedDateString = new Date(updatedAt)
+
+  const updatedDateString = new Date(updatedAt ?? "")
     .toLocaleDateString('he-IL')
     .replaceAll('.', '/');
 
-  const createdDateString = new Date(createdAt)
+  const createdDateString = new Date(createdAt ?? "")
     .toLocaleDateString('he-IL')
     .replaceAll('.', '/');
 
   const t = useTranslations('Projects');
 
+  console.log(owner, name)
+
   return (
     <article
       className="w-full flex p-4 sm:p-6 gap-7 rounded-lg bg-purple-100 dark:bg-darkAccBg
@@ -53,7 +49,7 @@ export default function ProjectCard({
         <ImageWithFallback
           width="108"
           height="108"
-          src={openGraphImageUrl}
+          src={`https://opengraph.githubassets.com/1/${owner.login}/${name}`}
           alt="project name"
           fallback={ProjectImagePlaceholder}
         ></ImageWithFallback>
@@ -76,8 +72,8 @@ export default function ProjectCard({
               </div>
               <AvatarList
                 avatars={contributors.map(c => ({
-                  imageSrc: c.node.avatarUrl,
-                  name: c.node.login,
+                  imageSrc: c.avatarUrl,
+                  name: c.login,
                 }))}
               ></AvatarList>
             </div>
@@ -89,7 +85,7 @@ export default function ProjectCard({
         <div className="flex flex-wrap justify-between flex-col sm:flex-row gap-y-6 sm:items-end">
           <TagList
             className="flex-wrap grow basis-[min-content]"
-            tags={languages.edges.map(l => l.node.name)}
+            tags={languages}
             activeLanguagesNames={activeLanguagesNames}
           ></TagList>
           <div className="flex gap-2">

components/Projects/ProjectDisplay.tsx

@@ -13,13 +13,15 @@ const ProjectsDisplay = ({
 }: ProjectsDisplayProps) => {
   return (
     <div className="flex flex-col gap-4 h-[75vh] overflow-y-scroll mb-10 w-[90%] md:w-full max-w-[1240px] mx-auto pl-2">
-      {projects.map((project, i) => (
-        <ProjectCard
-          key={project.item.data.repository.url + i}
-          project={project}
+      {projects.map((project, i) => {
+
+        return <ProjectCard
+          key={project.item.url + i}
+          {...project.item}
           activeLanguagesNames={activeLanguagesNames}
         />
-      ))}
+      }
+    )}
     </div>
   );
 };

tests/newbiesPage.spec.ts

@@ -11,7 +11,7 @@ test.describe('Test Newbies page', () => {
     await page.waitForNavigation();
 
     const pageTitle = await page.title();
-    expect(pageTitle).toContain('Newbies');
+    expect(pageTitle).toContain('מצטרפים חדשים - Newbies | מעקף');
   });
 
   test('should render NEWBIES', async ({ page }) => {

types/project.ts

@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 export enum ProjectPaginationFilter {
   ALL = 'all',
   RECENTLY_UPDATED = 'recently_updated',
@@ -13,68 +15,48 @@ export type IProjectsDataResponse = {
   timestamp: Date;
 };
 
-export type Project = {
-  _id: string;
-  timestamp: Date;
-  item: Item;
-  error: null;
-  meta: Meta;
-  __v: number;
-};
-
-export type Item = {
-  data: Data;
-};
-
-export type Data = {
-  repository: Repository;
-};
-
-export type Repository = {
-  name: string;
-  owner: Owner;
-  openGraphImageUrl: string;
-  description: string;
-  url: string;
-  createdAt: Date;
-  updatedAt: Date;
-  stargazerCount: number;
-  languages: Languages;
-  collaborators: null;
-  contributors: Contributors;
-};
-
-export type Contributors = {
-  edges: ContributorsEdge[];
-};
-
-export type ContributorsEdge = {
-  node: ContributorNode;
-};
-
-export type ContributorNode = {
-  avatarUrl: string;
-  login: string;
-};
-
-export type Languages = {
-  edges: LanguagesEdge[];
-};
-
-export type LanguagesEdge = {
-  node: LanguageNode;
-};
-
-export type LanguageNode = {
-  name: string;
-};
+const dateToString = z.coerce.date().or(z.string());
+
+const SummarySchema = z.object({
+  timestamp: z.string(),
+  item: z.object({
+    name: z.string(),
+    owner: z
+      .object({
+        id: z.string(),
+        login: z.string(),
+        avatarUrl: z.string(),
+      })
+      ,
+    description: z.string().nullable(),
+    url: z.string(),
+    stargazerCount: z.number(),
+    languages: z.array(z.string()),
+    contributors: z
+      .array(
+        z
+          .object({
+            login: z.string(),
+            avatarUrl: z.string(),
+          })
+          ,
+      ),
+    createdAt: dateToString,
+    updatedAt: dateToString,
+  }),
+  errorsData: z
+    .array(
+      z
+        .object({
+          type: z.string(),
+          message: z.string(),
+        })
+        ,
+    )
+    ,
+});
+
+export const SummaryProjectType = SummarySchema;
+
+export type Project = z.infer<typeof SummarySchema>;
 
-export type Owner = {
-  id: string;
-  login: string;
-  avatarUrl: string;
-};
-
-export type Meta = {
-  link: string;
-};