Merge pull request #37 from kudos-ink/fix/hardcoded-values

[Fix] hardcoded values
kudos-ink · Jan 28, 2024 · c731eff · c731eff
2 parents 4d9865a + c48d757
commit c731eff
Show file tree

Hide file tree

Showing 20 changed files with 228 additions and 884 deletions.
diff --git a/app/explore/[slug]/layout.tsx b/app/explore/[slug]/layout.tsx
@@ -3,17 +3,22 @@ import Toolbar from "@/components/filters/toolbar";
 import { container } from "@/components/primitives";
 import { FiltersProvider } from "@/contexts/filters";
 import { decodingSlug } from "@/utils/url";
+import { fetchFilterOptions } from "@/lib/repository-metadata";
 
-export default function ExploreLayout({
+export default async function ExploreLayout({
   children,
   params,
 }: {
   children: React.ReactNode;
   params: { slug: string };
 }) {
-  const filters = decodingSlug(params.slug);
+  const filterOptions = await fetchFilterOptions();
+  const filters = decodingSlug(params.slug, filterOptions);
   return (
-    <FiltersProvider initialFilters={filters}>
+    <FiltersProvider
+      initialFilters={filters}
+      initialFilterOptions={filterOptions}
+    >
       <div className="flex flex-col">
         <Toolbar />
         <section className={container()}>{children}</section>

diff --git a/app/explore/[slug]/page.tsx b/app/explore/[slug]/page.tsx
@@ -9,6 +9,7 @@ import {
   transformNotionDataToContributions,
 } from "@/utils/notion";
 import { decodingSlug } from "@/utils/url";
+import { fetchFilterOptions } from "@/lib/repository-metadata";
 
 interface IProps {
   params: { slug: string };
@@ -27,8 +28,9 @@ export async function generateMetadata({ params }: IProps): Promise<Metadata> {
 }
 
 export default async function ExplorePage({ params }: IProps) {
-  const filters = decodingSlug(params.slug);
-  const queryFilter = processNotionFilters(filters);
+  const filterOptions = await fetchFilterOptions();
+  const filters = decodingSlug(params.slug, filterOptions);
+  const queryFilter = processNotionFilters(filters, filterOptions.repositories);
   const data = await queryDatabase({
     page_size: DEFAULT_PAGE_SIZE,
     filter: queryFilter,
@@ -39,6 +41,7 @@ export default async function ExplorePage({ params }: IProps) {
     hasMore: data.has_more,
     nextCursor: data.next_cursor ?? undefined,
   };
+
   return (
     <ContributionsTable
       items={items}

diff --git a/app/page.tsx b/app/page.tsx
@@ -2,13 +2,15 @@ import { unstable_noStore } from "next/cache";
 import ControlledTable from "@/components/controlled-table";
 import { DEFAULT_PAGE_SIZE } from "@/data/fetch";
 import { queryDatabase } from "@/lib/notion";
+import { fetchFilterOptions } from "@/lib/repository-metadata";
 import { PaginatedCustomDataResponse } from "@/types";
 import { Contribution } from "@/types/contribution";
 import { initFilters } from "@/utils/filters";
 import { transformNotionDataToContributions } from "@/utils/notion";
 
 export default async function Home() {
   unstable_noStore();
+  const filterOptions = await fetchFilterOptions();
   const filters = initFilters();
   const data = await queryDatabase({
     page_size: DEFAULT_PAGE_SIZE,
@@ -21,6 +23,11 @@ export default async function Home() {
   };
 
   return (
-    <ControlledTable filters={filters} items={items} queryFilter={undefined} />
+    <ControlledTable
+      filters={filters}
+      items={items}
+      queryFilter={undefined}
+      filterOptions={filterOptions}
+    />
   );
 }
diff --git a/components/controlled-table.tsx b/components/controlled-table.tsx
@@ -5,21 +5,26 @@ import { container } from "@/components/primitives";
 import { FiltersProvider } from "@/contexts/filters";
 import { PaginatedCustomDataResponse } from "@/types";
 import { Contribution } from "@/types/contribution";
-import { Filters } from "@/types/filters";
+import { FilterOptions, Filters } from "@/types/filters";
 import { DEFAULT_PAGE_SIZE } from "@/data/fetch";
 
 interface IControlledTableProps {
   items: PaginatedCustomDataResponse<Contribution>;
   filters: Filters;
   queryFilter: any;
+  filterOptions: FilterOptions;
 }
 const ControlledTable = ({
   filters,
   items,
   queryFilter,
+  filterOptions,
 }: IControlledTableProps) => {
   return (
-    <FiltersProvider initialFilters={filters}>
+    <FiltersProvider
+      initialFilters={filters}
+      initialFilterOptions={filterOptions}
+    >
       <div className="flex flex-col">
         <Toolbar />
         <section className={container()}>

diff --git a/components/filters/checkbox-filter.tsx b/components/filters/checkbox-filter.tsx
@@ -6,17 +6,20 @@ import { Tooltip } from "@nextui-org/tooltip";
 import { InfoIcon } from "@/assets/icons";
 import { GOOD_FIRST_ISSUE_LABELS } from "@/data/filters";
 import { createUrl } from "@/utils/url";
+import { FilterOptions } from "@/types/filters";
 
 interface ICheckboxFilterProps {
   paramKey: string;
   placeholder: string;
   isSelected?: boolean;
+  filterOptions: FilterOptions;
   onSelect: (values: string[]) => void;
 }
 export const CheckboxFilter = ({
   paramKey,
   placeholder,
   isSelected,
+  filterOptions,
   onSelect,
 }: ICheckboxFilterProps) => {
   const router = useRouter();
@@ -26,7 +29,7 @@ export const CheckboxFilter = ({
     const newValue = value ? [value.toString()] : [];
     onSelect(newValue);
     const currentPath = pathname === "/" ? "/explore/" : pathname;
-    const newUrl = createUrl(paramKey, newValue, currentPath);
+    const newUrl = createUrl(paramKey, newValue, currentPath, filterOptions);
     router.replace(newUrl, { scroll: true });
   };
 

diff --git a/components/filters/clear-filters.tsx b/components/filters/clear-filters.tsx
@@ -4,20 +4,27 @@ import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { Chip } from "@nextui-org/chip";
 import { createUrl } from "@/utils/url";
+import { FilterOptions } from "@/types/filters";
 
 interface IClearFilters {
   param?: string;
   value: string;
+  filterOptions: FilterOptions;
   onClear: () => void;
 }
 
-export const ClearFilters = ({ param, value, onClear }: IClearFilters) => {
+export const ClearFilters = ({
+  param,
+  value,
+  onClear,
+  filterOptions,
+}: IClearFilters) => {
   const router = useRouter();
   const pathname = usePathname();
 
   const handleClear = () => {
     if (!!param) {
-      const newUrl = createUrl(param, [], pathname);
+      const newUrl = createUrl(param, [], pathname, filterOptions);
       router.replace(newUrl);
     } else {
       router.replace(pathname);

diff --git a/components/filters/select-filter.tsx b/components/filters/select-filter.tsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { Select, SelectItem } from "@nextui-org/select";
-import { FilterOption } from "@/types/filters";
+import { FilterOption, FilterOptions } from "@/types/filters";
 import { createUrl } from "@/utils/url";
 import Emoji from "../emoji";
 import { CircledCross } from "@/assets/icons";
@@ -12,13 +12,15 @@ interface ISelectFilterProps {
   mainEmoji: string;
   options: FilterOption[];
   selectKeys: string[];
+  filterOptions: FilterOptions;
   onSelect: (values: string[]) => void;
 }
 export const SelectFilter = ({
   placeholder,
   mainEmoji,
   options,
   selectKeys,
+  filterOptions,
   onSelect,
 }: ISelectFilterProps) => {
   const router = useRouter();
@@ -31,6 +33,7 @@ export const SelectFilter = ({
       placeholder,
       Array.from(selection as Set<string>),
       currentPath,
+      filterOptions,
     );
     router.replace(newUrl, { scroll: true });
   };
@@ -61,14 +64,14 @@ export const SelectFilter = ({
       selectedKeys={new Set(selectKeys)}
       onSelectionChange={handleSelectionChange}
     >
-      {options.map(({ emoji, label, value }) => {
+      {options.map(({ emoji, name, value }) => {
         return (
           <SelectItem
             key={value}
             value={value}
             startContent={<Emoji emoji={emoji} />}
           >
-            {label}
+            {name}
           </SelectItem>
         );
       })}

diff --git a/components/filters/toolbar.tsx b/components/filters/toolbar.tsx
@@ -3,9 +3,6 @@ import { useRef } from "react";
 import { container } from "@/components/primitives";
 import { useFilters } from "@/contexts/filters";
 import {
-  LANGUAGES_OPTIONS,
-  INTERESTS_OPTIONS,
-  PROJECTS_OPTIONS,
   GOOD_FIRST_ISSUE_KEY,
   INTEREST_KEY,
   LANGUAGES_KEY,
@@ -22,8 +19,9 @@ const Toolbar = () => {
   const toolbarRef = useRef<HTMLDivElement>(null);
   const isToolbarSticky = useSticky(toolbarRef);
 
-  const { filters, updateFilter, clearFilter, clearAllFilters } = useFilters();
-
+  const { filters, updateFilter, clearFilter, clearAllFilters, filterOptions } =
+    useFilters();
+  const { languages, interests, repositories } = filterOptions;
   const handleSelect = (key: FilterKeys) => (values: string[]) => {
     if (values.length > 0) {
       updateFilter(key, values);
@@ -46,34 +44,42 @@ const Toolbar = () => {
             <SelectFilter
               placeholder={LANGUAGES_KEY}
               mainEmoji="🌐"
-              options={LANGUAGES_OPTIONS}
+              options={languages}
               selectKeys={filters.languages.map(({ value }) => value)}
               onSelect={handleSelect(LANGUAGES_KEY)}
+              filterOptions={filterOptions}
             />
             <SelectFilter
               placeholder={INTEREST_KEY}
               mainEmoji="🪄"
-              options={INTERESTS_OPTIONS}
+              options={interests}
               selectKeys={filters.interests.map(({ value }) => value)}
               onSelect={handleSelect(INTEREST_KEY)}
+              filterOptions={filterOptions}
             />
             <SelectFilter
               placeholder={PROJECTS_KEY}
               mainEmoji="🖥️"
-              options={PROJECTS_OPTIONS}
+              options={repositories}
               selectKeys={filters.projects.map(({ value }) => value)}
               onSelect={handleSelect(PROJECTS_KEY)}
+              filterOptions={filterOptions}
             />
             <CheckboxFilter
               paramKey={GOOD_FIRST_ISSUE_KEY}
               placeholder="Good first issues Only"
               isSelected={filters[GOOD_FIRST_ISSUE_KEY]}
               onSelect={handleSelect(GOOD_FIRST_ISSUE_KEY)}
+              filterOptions={filterOptions}
             />
           </div>
 
           {numberOfFilters > 1 && (
-            <ClearFilters onClear={clearAllFilters} value="Clear all filters" />
+            <ClearFilters
+              onClear={clearAllFilters}
+              value="Clear all filters"
+              filterOptions={filterOptions}
+            />
           )}
         </div>
         <div className="py-4 px-3 bg-default-100 border-small rounded-t-md">