fix: add values in filters

Author: lili668668

src/components/Filter.tsx

@@ -1,7 +1,23 @@
-import React, { useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { ConnectOprtator, FilterItem, FilterKey, FilterOperator } from "../types/FilterItem";
 import { Chip } from './Chip';
 import { Menu } from 'primereact/menu';
+import { gql, useQuery } from "@apollo/client";
+import { Tag } from "../types/Tag";
+
+const GET_TAGS = gql`
+query GetTags {
+  tag {
+    nodes {
+      id,
+      name,
+      description,
+      note,
+      tagType
+    }
+  }
+}
+`;
 
 export interface FilterProps {
   item: FilterItem;
@@ -10,6 +26,23 @@ export interface FilterProps {
 }
 
 export const Filter: React.FC<FilterProps> = (props) => {
+  const { data: raw, loading, error } = useQuery(GET_TAGS);
+
+  const data = useMemo(() => {
+    if (raw?.tag?.nodes) {
+      return raw.tag.nodes.filter((item: Tag) => item.description !== '測試');
+    }
+    return [];
+  }, [raw]);
+
+  const photographers = useMemo(() => {
+    return data.filter((item: Tag) => item.tagType === 'photographer')
+  }, [data]);
+
+  const categories = useMemo(() => {
+    return data.filter((item: Tag) => item.tagType === 'category')
+  }, [data]);
+
   const onConnectChange = (value: ConnectOprtator) => {
     props.setPayloads((prev) => {
       const updated = prev.map((item) => {
@@ -59,6 +92,44 @@ export const Filter: React.FC<FilterProps> = (props) => {
     { label: '包含', value: FilterOperator.IN, command: () => onOperatorChange(FilterOperator.IN) },
     { label: '不包含', value: FilterOperator.NOT_IN, command: () => onOperatorChange(FilterOperator.NOT_IN) },
   ]
+  const onValueChange = (value: string) => {
+    props.setPayloads((prev) => {
+      const updated = prev.map((item) => {
+        if (item.id === props.item.id) {
+          if (item.values.includes(value)) {
+            const values = item.values.filter((v) => v !== value);
+            return { ...item, values };
+          } else {
+            const values =item.values.concat(value);
+            return { ...item, values };
+          }
+        }
+        return item;
+      });
+      return updated;
+    });
+  }
+  const makeValueeOption = useCallback((value: string, selecteds: string[]) => {
+    return { label: value, icon: selecteds.includes(value) ? 'pi pi-check' : '', value, command: () => onValueChange(value) };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const valueMenu = useRef<Menu | null>(null);
+  const valueOptions = useMemo(() => {
+    switch (props.item.label) {
+      case FilterKey.REACTIONS:
+        return ['正向', '負向'].map((item) => makeValueeOption(item, props.item.values));
+      case FilterKey.AUTHORS:
+        return photographers.map((item: Tag) => makeValueeOption(item.name, props.item.values));
+      case FilterKey.CATEGORIES:
+        return categories.map((item: Tag) => makeValueeOption(item.name, props.item.values));
+      default:
+        return [];
+    }
+  }, [props.item, photographers, categories, makeValueeOption]);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
   return (
     <>
       {props.showConnect && (
@@ -80,7 +151,11 @@ export const Filter: React.FC<FilterProps> = (props) => {
         onClick={(event) => operatorMenu?.current?.toggle(event)}
       />
       <Menu popup ref={operatorMenu} model={operatorOptions} />
-      <Chip label={props.item.values.join(', ')} />
+      <Chip
+        label={props.item.values.join(', ')}
+        onClick={(event) => valueMenu?.current?.toggle(event)}
+      />
+      <Menu popup ref={valueMenu} model={valueOptions} />
       <Chip label='x' onClick={() => {
         props.setPayloads((prev) => {
           const removed = prev.filter((item) => item.id !== props.item.id);