ProjectFilters are now dynamicly calculated based on projectFilterTag…

…s of projects. If not projectFilter name is provided, tag is used as a name. Fixes #25

src/composables/useProjectFilters.ts

@@ -0,0 +1,24 @@
+import type { IProjectFilter } from "@/types";
+import { allFilterTag } from "@/types";
+import { useDB } from "./useDB";
+import { useProjectFiltersTags } from "./useProjectFiltersTags";
+
+const { projectFilters } = useDB();
+const { projectFilterTags } = useProjectFiltersTags();
+
+export function useProjectFilters(): { projectFilters: IProjectFilter[] } {
+  const dynamiclyCalculatedProjectFilters = projectFilterTags.map(
+    (tag) =>
+      projectFilters.find((f) => f.tag === tag) || {
+        name: tag,
+        tag,
+      }
+  );
+
+  return {
+    projectFilters: [
+      ...dynamiclyCalculatedProjectFilters,
+      { name: "All", tag: allFilterTag },
+    ],
+  };
+}

src/composables/useProjectFiltersTags.ts

@@ -0,0 +1,19 @@
+import type { IProjectFilterTag } from "@/types";
+import { useDB } from "./useDB";
+
+export function useProjectFiltersTags(): {
+  projectFilterTags: IProjectFilterTag[];
+} {
+  const { projects } = useDB();
+  const projectFilterTags = new Set<IProjectFilterTag>();
+
+  projects.forEach(({ filterTags: tags }) => {
+    tags.forEach((tag) => {
+      projectFilterTags.add(tag);
+    });
+  });
+
+  return {
+    projectFilterTags: [...projectFilterTags],
+  };
+}

src/db.ts

@@ -1,4 +1,4 @@
-import { allFilterTag } from "./types";
+import { allFilterTag, type IProjectFilter } from "./types";
 import type { IDB } from "./types/IDB";
 
 const db: IDB = {
@@ -100,7 +100,7 @@ const db: IDB = {
       thumbnail: "opera-mobile.png",
       summaryTitle: "Example title",
       summary: "Opera Mobile was a mobile application for",
-      filterTags: ["android", "java", "ccpp"],
+      filterTags: ["android", "java", "c-cpp"],
       badges: ["Java", "C/C++", "Android", "Python"],
       technologies: ["android", "c", "cpp", "java"],
       thumbnailLogo: "logo-opera.svg",
@@ -173,7 +173,7 @@ const db: IDB = {
     { name: "Angular", tag: "angular" },
     { name: "React", tag: "react" },
     { name: "Android", tag: "android" },
-    { name: "C/C++", tag: "ccpp" },
+    { name: "C/C++", tag: "c-cpp" },
     { name: "Java", tag: "java" },
     { name: "Blockchain", tag: "blockchain" },
   ],
@@ -283,7 +283,7 @@ const db: IDB = {
       description: "",
       date: "Feb 5, 2018",
       filterTags: ["blockchain"],
-    }
+    },
     // {
     //   source: "youtube",
     //   id: "",

src/types/IProject.ts

@@ -9,7 +9,8 @@ export type IProjectFilterTag =
   | "java"
   | "blockchain"
   | "react"
-  | "ccpp";
+  | "c-cpp";
+
 export type IProjectBadge =
   | "Angular"
   | "Java"

src/views/Projects.vue

@@ -14,9 +14,12 @@
 <script setup lang="ts">
 import { Filters, PageHeader, ProjectsGrid } from "@/components";
 import { useDB } from "@/composables";
+import { useProjectFilters } from "@/composables/useProjectFilters";
 import { setupIsotopeFilters } from "@/libs/isotope-custom";
 import { onMounted } from "vue";
 
-const { projects, projectFilters } = useDB();
+const { projects } = useDB();
+const { projectFilters } = useProjectFilters();
+
 onMounted(() => setupIsotopeFilters(["project-filters"]));
 </script>

src2/components/__tests__/HelloWorld.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 
 import { mount } from "@vue/test-utils";
 import HelloWorld from "../HelloWorld.vue";