Fix #17 - filter-modules-reviews (#18)

Reviewed-on: #18
Co-authored-by: Luciano Giacchetta <giacchetta-@outlook.com>
Co-committed-by: Luciano Giacchetta <giacchetta-@outlook.com>

src/components/course/course-accordion-list.astro

@@ -7,7 +7,19 @@ type Props = {
 
 const { course }: Props = Astro.props;
 
-const courseDurations = course.modules.flatMap((time:any) => (time.duration));
+const isDev = import.meta.env.DEV;
+const statusFilter = isDev ? { '_neq': 'archived' } : { '_eq': 'published' };
+
+const filteredModules = course.modules.filter((module: any) => {
+  if (statusFilter._neq) {
+    return module.status !== statusFilter._neq;
+  } else if (statusFilter._eq) {
+    return module.status === statusFilter._eq;
+  }
+  return true;
+});
+
+const courseDurations = filteredModules.flatMap((time:any) => (time.duration));
 const totalCourseDuration = sumTimes(courseDurations);
 ---
 
@@ -28,7 +40,7 @@ const totalCourseDuration = sumTimes(courseDurations);
       </div>
     </div>
     <div class="accordion accordion-btn-icon-start">
-	{course.modules.map((item: any, index:number) => (
+	{filteredModules.map((item: any, index:number) => (
 		<div class="accordion-item">
 			<div class="accordion-header" id={`headingCourse${index}`}>
 				<a

src/components/course/course-card.astro

@@ -16,10 +16,10 @@ const tier_one = getPrices('price_tier_one',import.meta.env.ASTRO_CURRENCY.toLow
     <figure class="figure">
       <Image
         class="card-img"
-        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${course.image}`}
-        alt="Image Description"
-        width=-1
-        height=-1
+        src={`${import.meta.env.ASTRO_ASSETS}/${course.image}`}
+        alt={`${course.name} Image Description`}
+        width={325}
+        height={455}
         />
     </figure>
   </a>

src/components/course/course-hero.astro

@@ -19,12 +19,12 @@ const { course }: Props = Astro.props;
     <div class="d-flex align-items-center flex-wrap">
       <div class="d-flex align-items-center me-4">
         <div class="flex-shrink-0 avatar-group avatar-group-xs">
-          {course?.image && (
+          {course.user_created.avatar && (
             <figure class="avatar avatar-xs avatar-circle">
               <Image 
                 class="avatar-img"
-                src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${course.user_created.avatar}`}
-                alt="Course Image"
+                src={`${import.meta.env.ASTRO_ASSETS}/${course.user_created.avatar}`}
+                alt={`${course.user_created.first_name} Avatar`}
                 width={40}
                 height={40}
                 />

src/components/course/course-reviews.astro

@@ -71,10 +71,10 @@ const getOverallRating = (reviews: any) => {
                 <div class="flex-shrink-0">
                   <Image
                       class="avatar avatar-sm avatar-circle"
-                      src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${review.user_created.avatar}`}
-                      alt="Image Description"
-                      width="50"
-                      height="50"
+                      src={`${import.meta.env.ASTRO_ASSETS}/${review.user_created.avatar}`}
+                      alt={`${review.user_created.avatar} Avatar`}
+                      width={50}
+                      height={50}
                     />
                 </div>
 

src/components/header/header.astro

@@ -2,11 +2,13 @@
 import { Image } from 'astro:assets';
 import Logo from '../../assets/svg/logo.svg';
 import { getAllCourses, filterCoursesByCloud } from '../../libs/courses';
+import { getCareers } from '../../libs/careers';
 import { slugifyCourse } from '../../utils/text';
 
 const awsCourses = filterCoursesByCloud(getAllCourses(), ['aws']);
 const gcpCourses = filterCoursesByCloud(getAllCourses(), ['gcp']);
 const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
+const careers = await getCareers();
 ---
 
 <header id="header" class={`navbar navbar-expand-lg navbar-end navbar-sticky-top navbar-dark root`}>
@@ -49,30 +51,17 @@ const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
               aria-labelledby="dropdownSubMenu"
               style="min-width: 14rem"
             >
-              <a
-                class="dropdown-item text-white"
-                id="devops_header"
-                href=`/carreras/devops/`
-                role="button"
-                aria-expanded="false"
-                >DevOps Engineer
-              </a>
-              <a
-                class="dropdown-item text-white"
-                id="cloud_header"
-                href=`/carreras/cloudops/`
-                role="button"
-                aria-expanded="false"
-                >Cloud Engineer
-              </a>
-              <a
-                class="dropdown-item text-white"
-                id="aws_devops_header"
-                href=`/carreras/aws-devops/`
-                role="button"
-                aria-expanded="false"
-                >AWS DevOps
-              </a>
+              {careers.map((career: any) => (
+                <a
+                  class="dropdown-item text-white"
+                  id={career.slug + '_header'}
+                  href={`/carreras/${career.slug}/`}
+                  role="button"
+                  aria-expanded="false"
+                >
+                  {career.name}
+                </a>
+              ))}
             </div>
             <div class="nav-indicator nav-indicator--blue"></div>
           </li>
@@ -176,4 +165,4 @@ const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
 		font-size: large;
 	}
 }
-</style>
+</style>

src/components/post/post-card-column.astro

@@ -11,8 +11,8 @@ const { post }: Props = Astro.props;
     <figure class="shape-container">
       <Image
         class="card-img img-fluid"
-        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
-        alt="Image placeholder"
+        src={`${import.meta.env.ASTRO_ASSETS}/${post.cover_image}`}
+        alt={`${post.title} Image`}
         inferSize={true}
       />
       <div class="shape shape-bottom zi-1" style="margin-bottom: -0.25rem">

src/components/post/post-card-row.astro

@@ -12,8 +12,8 @@ const { post }: Props = Astro.props;
         <figure class="shape-container overflow-hidden" style="height: 100%">
           <Image
             class="card-img"
-            src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
-            alt="Image placeholder"
+            src={`${import.meta.env.ASTRO_ASSETS}/${post.cover_image}`}
+            alt={`${post.title} Image`}
             style="height: 100%"
             inferSize={true}
           />

src/libs/careers.ts

@@ -3,11 +3,14 @@ import { readItems, type Query } from '@directus/sdk';
 import type { CodyopsCareers, Careers } from '../types/codyops-careers';
 import { sumTimes } from '../utils/time';
 
+const isDev = import.meta.env.DEV; // Astro's way to check for development mode
+
 export async function getCareers(): Promise<Careers[]> {
   const careers = await directus.request(
     readItems<CodyopsCareers, 'codyops_careers', Query<CodyopsCareers, Careers>>('codyops_careers', {
       fields: [
         'slug',
+        'status',
         'name',
         'description',
         'banner',
@@ -28,6 +31,9 @@ export async function getCareers(): Promise<Careers[]> {
           ],
         },
       ],
+      filter: {
+        status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
+    },    
     })
   );
 

src/libs/courses.ts

@@ -2,10 +2,20 @@ import directus from "./directus";
 import { readItems, type Query } from "@directus/sdk";
 import type { CodyopsCourses, Courses } from "../types/codyops-courses";
 
+const isDev = import.meta.env.DEV; // Astro's way to check for development mode
+
 export const courses = await directus.request(
   readItems<CodyopsCourses, 'codyops_courses', Query<CodyopsCourses, Courses>>("codyops_courses", {
         fields: [
-            '*',
+            'id',
+            'name',
+            'level',
+            'category',
+            'cloud',
+            'image',
+            'description',
+            'features',
+            'status',
             {
               codyops_careers: [
                 {
@@ -29,10 +39,15 @@ export const courses = await directus.request(
                     'duration',
                     'title',
                     'description',
-                    'video'
+                    'video',
+                    'status'
                 ]
             }
-        ]}
+        ],
+        filter: {
+          status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
+        },
+      }
     )
 );
 

src/libs/reviews.ts

@@ -1,10 +1,28 @@
 import directus from "./directus";
-import { readItems } from "@directus/sdk";
+import { readItems, type Query } from "@directus/sdk";
+import type { DirectusSchema, Review } from "../types/codyops-reviews";
+
+const isDev = import.meta.env.DEV; // Astro's way to check for development mode
 
 export const reviews = await directus.request(
-    readItems("codyops_reviews", {
-        fields: ['*', 'user_created.*']
-        }
+    readItems<DirectusSchema, 'codyops_reviews', Query<DirectusSchema, Review>>("codyops_reviews", {
+        fields: [
+            'stars',
+            'date_created',
+            'course_id',
+            'feedback',
+            {
+              user_created: [
+                  'first_name',
+                  'last_name',
+                  'avatar'
+              ]
+            },
+        ],
+        filter: {
+            status: isDev ? { '_neq': 'archived' } : { '_eq': 'published' }
+        },
+      }
     )
 );
 

src/pages/blog/[slug].astro

@@ -26,8 +26,8 @@ const { post } = Astro.props;
         <h1 class="h2 text-white text-center">{post.title}</h1><br>
         <Image
         class="card-img"
-        src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
-        alt="Image placeholder"
+        src={`${import.meta.env.ASTRO_ASSETS}/${post.cover_image}`}
+        alt={`${post.title} Image`}
         inferSize={true}
         />
         <div class="container content-space-1">

src/types/codyops-reviews.ts

@@ -0,0 +1,17 @@
+import type { Users } from "./codyops-users";
+
+export interface Review {
+    slug: string;
+    status: string;
+    user_created?: Partial<Users>;
+    user_updated: string | null;
+    date_created: string | null;
+    date_updated: string | null;
+    stars: number;
+    course_id: number;
+    feedback: string;
+}
+
+export interface DirectusSchema {
+  codyops_reviews: Review[];
+}