165 refactor project and satellite (#190)

* refactor(frontend): ♻️ Refactor slicing content into a preview to a seperate component * fix(frontend): 🐛 Fix eslint warnings about img tag and unused import * fix(frontend): 🐛 Add width and height to Image tag * refactor(frontend): ♻️ Remove description from projects and refactor to use same naming schemes as satellites --------- Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
NTNU-SmallSatLab · Apr 4, 2024 · d300eff · d300eff
1 parent e36dc4c
commit d300eff
Show file tree

Hide file tree

Showing 13 changed files with 210 additions and 263 deletions.
diff --git a/backend/src/api/project/content-types/project/schema.json b/backend/src/api/project/content-types/project/schema.json
@@ -4,7 +4,8 @@
   "info": {
     "singularName": "project",
     "pluralName": "projects",
-    "displayName": "Project"
+    "displayName": "Project",
+    "description": ""
   },
   "options": {
     "draftAndPublish": true
@@ -16,23 +17,21 @@
       "required": true,
       "unique": true
     },
-    "description": {
-      "type": "string"
-    },
-    "article": {
+    "content": {
       "type": "blocks"
     },
     "slug": {
       "type": "uid",
       "targetField": "title",
       "required": true
     },
-    "coverImage": {
+    "previewImage": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
       "allowedTypes": [
         "images"
-      ],
-      "type": "media",
-      "multiple": false
+      ]
     },
     "satellites": {
       "type": "relation",

diff --git a/backend/types/generated/contentTypes.d.ts b/backend/types/generated/contentTypes.d.ts
@@ -908,16 +908,16 @@ export interface ApiProjectProject extends Schema.CollectionType {
     singularName: 'project';
     pluralName: 'projects';
     displayName: 'Project';
+    description: '';
   };
   options: {
     draftAndPublish: true;
   };
   attributes: {
     title: Attribute.String & Attribute.Required & Attribute.Unique;
-    description: Attribute.String;
-    article: Attribute.Blocks;
+    content: Attribute.Blocks;
     slug: Attribute.UID<'api::project.project', 'title'> & Attribute.Required;
-    coverImage: Attribute.Media;
+    previewImage: Attribute.Media;
     satellites: Attribute.Relation<
       'api::project.project',
       'manyToMany',

diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts
diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts
diff --git a/frontend/src/app/blog/blogDataCards.tsx b/frontend/src/app/blog/blogDataCards.tsx
@@ -29,7 +29,7 @@ export default async function BlogDataCards({
                         }
                     >
                         <FullBlogCard
-                            key={article.id} // A unique ID for each blog post
+                            key={article.id}
                             firstArticle={article.firstArticle}
                             content={article.content}
                             coverImage={article.coverImage}

diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
@@ -8,13 +8,13 @@ export interface BlogPost {
     key: string | null | undefined;
     firstArticle?: boolean | null | undefined;
     title: string | undefined;
-    content: BlocksContent; // Or a more appropriate type if your content is structured
-    coverImage?: string; // Optional cover image
+    content: BlocksContent;
+    coverImage?: string;
     datePublished: any;
-    tag?: Enum_Article_Tag | null | undefined; // Optional tag
-    HOST_URL?: string; // It's common to keep the host URL separate from post data
+    tag?: Enum_Article_Tag | null | undefined;
+    HOST_URL?: string;
     authorName?: string;
-    avatarURL?: string; // Optional avatar URL
+    avatarURL?: string;
     slug: string | undefined;
 }
 

diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -3,9 +3,8 @@ import { gql } from "@/__generated__/gql";
 import BlockRendererClient from "@/components/BlockRendererClient";
 import { getClient } from "@/lib/ApolloClient";
 import { BlocksContent } from "@strapi/blocks-react-renderer";
-import Image from "next/image";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import Link from "next/link";
+import RelatedProjectsAndSatellites from "@/components/RelatedProjectsAndSatellites";
+import { ProjectOrSatellite } from "@/app/satellites/[satelliteSlug]/page";
 const HOST_URL = process.env.HOST_URL;
 
 const GET_PROJECT_BY_SLUG = gql(`
@@ -14,8 +13,7 @@ query Projects($projectFilters: ProjectFiltersInput) {
     data {
       attributes {
         title
-        description
-        article
+        content
         satellites {
           data {
             id
@@ -32,7 +30,7 @@ query Projects($projectFilters: ProjectFiltersInput) {
           }
         }
         slug
-        coverImage {
+        previewImage {
           data {
             id
             attributes {
@@ -68,7 +66,7 @@ export default async function Page({
     }
 
     const projects = graphqlData.data.projects?.data[0];
-    const content: BlocksContent = projects?.attributes?.article ?? [];
+    const content: BlocksContent = projects?.attributes?.content ?? [];
 
     let projectTitle = projects?.attributes?.slug;
 
@@ -89,42 +87,20 @@ export default async function Page({
             <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
                 {graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
                     (satellite: any) => {
-                        let coverImage =
-                            satellite.attributes?.previewImage?.data?.attributes
-                                ?.url;
-
-                        if (HOST_URL && coverImage != undefined) {
-                            coverImage = HOST_URL + coverImage;
-                        }
+                        const satelliteObject: ProjectOrSatellite = {
+                            id: satellite.id,
+                            title: satellite.attributes.name,
+                            previewImage:
+                                satellite.attributes.previewImage.data
+                                    .attributes.url,
+                            slug: satellite.attributes.name,
+                            isProject: false,
+                        };
                         return (
-                            <Link
-                                className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
-                                href={
-                                    "/satellites/" + satellite?.attributes?.name
-                                }
+                            <RelatedProjectsAndSatellites
+                                project={satelliteObject}
                                 key={satellite.id}
-                            >
-                                <Card className="md:w-68 flex h-full w-64 flex-col lg:w-72">
-                                    <CardHeader>
-                                        <CardTitle className="mb-2 mt-2 text-center text-xl font-bold">
-                                            {satellite?.attributes?.name}
-                                        </CardTitle>
-                                    </CardHeader>
-                                    <CardContent>
-                                        <div className="h-48">
-                                            {coverImage && (
-                                                <Image
-                                                    className="max-h-full max-w-full object-contain"
-                                                    src={coverImage}
-                                                    alt={coverImage}
-                                                    width={500}
-                                                    height={0}
-                                                />
-                                            )}
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            </Link>
+                            />
                         );
                     },
                 )}

diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
@@ -2,9 +2,9 @@ export const runtime = "edge";
 import { gql } from "@/__generated__/gql";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { getClient } from "@/lib/ApolloClient";
-import { BlocksContent } from "@strapi/blocks-react-renderer";
 import Link from "next/link";
 import Image from "next/image";
+import { SlicePreviewText } from "@/components/SlicePreviewText";
 const HOST_URL = process.env.HOST_URL;
 
 const GET_PROJECTS = gql(`
@@ -14,7 +14,7 @@ const GET_PROJECTS = gql(`
           id
           attributes {
             title
-            article
+            content
             satellites {
               data {
                 attributes {
@@ -23,17 +23,13 @@ const GET_PROJECTS = gql(`
               }
             }
             slug
-            coverImage {
+            previewImage {
               data {
                 attributes {
                   url
                 }
               }
             }
-            updatedAt
-            publishedAt
-            createdAt
-            description
           }
         }
       }
@@ -63,33 +59,13 @@ export default async function ProjectsPage() {
             </div>
 
             <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
-                {graphqlData.data.projects.data.map((project: any) => {
-                    let coverImage =
-                        project?.attributes?.coverImage?.data?.attributes?.url;
+                {graphqlData.data.projects.data.map((project) => {
+                    let previewImage =
+                        project?.attributes?.previewImage?.data?.attributes
+                            ?.url;
 
-                    if (HOST_URL && coverImage != undefined) {
-                        coverImage = HOST_URL + coverImage;
-                    }
-                    let content: BlocksContent =
-                        project?.attributes?.article ?? [];
-                    let text = "";
-                    for (const block of content) {
-                        if (block.type === "paragraph") {
-                            const paragraphBlock = block as {
-                                type: "paragraph";
-                                children: { type: "text"; text: string }[];
-                            };
-
-                            if (paragraphBlock.children[0].text == "") {
-                                continue;
-                            }
-
-                            text =
-                                paragraphBlock.children[0].text.slice(0, 100) +
-                                "...";
-
-                            break;
-                        }
+                    if (HOST_URL && previewImage != undefined) {
+                        previewImage = HOST_URL + previewImage;
                     }
                     return (
                         <Link
@@ -101,11 +77,11 @@ export default async function ProjectsPage() {
                                 <CardHeader></CardHeader>
                                 <CardContent>
                                     <div className="h-64">
-                                        {coverImage && (
+                                        {previewImage && (
                                             <Image
                                                 className="max-h-full max-w-full object-contain"
-                                                src={coverImage}
-                                                alt={coverImage}
+                                                src={previewImage}
+                                                alt={previewImage}
                                                 width={500}
                                                 height={0}
                                             />
@@ -114,7 +90,11 @@ export default async function ProjectsPage() {
                                     <CardTitle className="mb-2 mt-2 text-xl font-bold">
                                         {project?.attributes?.title}
                                     </CardTitle>
-                                    <p className="break-words">{text}</p>
+                                    <p className="break-words">
+                                        {SlicePreviewText(
+                                            project?.attributes?.content ?? [],
+                                        )}
+                                    </p>
                                 </CardContent>
                             </Card>
                         </Link>