Search bar

src/activity-types/activity.constants.ts

@@ -0,0 +1,25 @@
+import { DEFI } from './defi.constants';
+import { ENIGME } from './enigme.constants';
+import { INDICE } from './indice.constants';
+import { REPORTAGE } from './reportage.constants';
+import { SYMBOL } from './symbol.constants';
+import { ActivityType } from 'types/activity.type';
+
+type ActivityTypeKey = keyof typeof ActivityType;
+
+export const getType = (typeValue: number): string | undefined => {
+  const type = Object.keys(ActivityType).find((key) => ActivityType[key as ActivityTypeKey] === typeValue);
+  return type;
+};
+
+const SUBTYPE_MAPPER: Record<string, Record<string, number>> = {
+  ENIGME,
+  INDICE,
+  SYMBOL,
+  DEFI,
+  REPORTAGE,
+};
+export const getSubtype = (typeName: string, subTypeValue: number): string | undefined => {
+  const result = Object.keys(SUBTYPE_MAPPER[typeName] || {}).find((key) => SUBTYPE_MAPPER[typeName][key] === subTypeValue);
+  return result;
+};

src/activity-types/activity.constants.tsx

@@ -0,0 +1,23 @@
+import { DEFI } from './defi.constants';
+import { ENIGME } from './enigme.constants';
+import { INDICE } from './indice.constants';
+import { REPORTAGE } from './reportage.constants';
+import { SYMBOL } from './symbol.constants';
+import { ActivityType } from 'types/activity.type';
+
+export const getType = (typeValue: number): string | undefined => {
+  const type = Object.keys(ActivityType).find((key) => ActivityType[key] === typeValue);
+  return type;
+};
+
+const SUBTYPE_MAPPER = {
+  ENIGME: ENIGME,
+  INDICE: INDICE,
+  SYMBOL: SYMBOL,
+  DEFI: DEFI,
+  REPORTAGE: REPORTAGE,
+};
+export const getSubtype = (typeName: string, subTypeValue: number): string | undefined => {
+  const result = Object.keys(SUBTYPE_MAPPER[typeName] || {}).find((key) => SUBTYPE_MAPPER[typeName][key] === subTypeValue);
+  return result;
+};

src/components/accueil/Accueil.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import { Button } from '@mui/material';
 
-import { isGame } from 'src/activity-types/anyActivity';
-import { isMimic } from 'src/activity-types/game.constants';
+import { filterActivitiesByTerm, filterActivitiesWithLastMimicGame } from './Filters/FilterActivities';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
 import { WorldMap } from 'src/components/WorldMap';
@@ -14,7 +13,6 @@ import { UserContext } from 'src/contexts/userContext';
 import { VillageContext } from 'src/contexts/villageContext';
 import { useActivities } from 'src/services/useActivities';
 import PelicoReflechit from 'src/svg/pelico/pelico_reflechit.svg';
-import type { Activity, AnyData } from 'types/activity.type';
 import { UserType } from 'types/user.type';
 
 export const Accueil = () => {
@@ -35,6 +33,7 @@ export const Accueil = () => {
       return acc;
     }, {}),
     pelico: true,
+    searchTerm: '',
   });
 
   const { activities } = useActivities({
@@ -46,19 +45,6 @@ export const Accueil = () => {
     phase: selectedPhase,
   });
 
-  function filterActivitiesWithLastMimicGame(activitiesData: Activity<AnyData>[]): Activity<AnyData>[] {
-    const indexOfLastMimic = activitiesData.findIndex((activity) => isGame(activity) && isMimic(activity)); // Get the index of this last mimic
-    if (indexOfLastMimic === -1) {
-      return activitiesData;
-    }
-    const mostRecentMimic = activitiesData[indexOfLastMimic]; // Get the last mimic created
-    const activitiesWithoutMimic = activitiesData.filter((activity) => !isGame(activity) || !isMimic(activity)); // Remove all mimics in activities
-    const activitiesWithLastMimic = [...activitiesWithoutMimic];
-    activitiesWithLastMimic.splice(indexOfLastMimic, 0, mostRecentMimic); // Put the last mimic created at the same spot in the array
-
-    return activitiesWithLastMimic;
-  }
-
   // on selected phase change, select all activities.
   React.useEffect(() => {
     setFilters((prevFilters) => ({
@@ -71,11 +57,14 @@ export const Accueil = () => {
   //Preload of the activities filtered only one mimic
   const activitiesFiltered = React.useMemo(() => {
     if (activities && activities.length > 0) {
-      return filterActivitiesWithLastMimicGame(activities);
+      const activitiesWithLastMimic = filterActivitiesWithLastMimicGame(activities);
+      const activitiesFilterBySearchTerm =
+        filters.searchTerm.length > 0 ? filterActivitiesByTerm(activitiesWithLastMimic, filters.searchTerm) : activitiesWithLastMimic;
+      return activitiesFilterBySearchTerm;
     } else {
       return [];
     }
-  }, [activities]);
+  }, [activities, filters.searchTerm]);
 
   if (!village) {
     return <Base showSubHeader></Base>;

src/components/accueil/Filters/FilterActivities.tsx

@@ -0,0 +1,46 @@
+import { getSubtype, getType } from 'src/activity-types/activity.constants';
+import { isGame } from 'src/activity-types/anyActivity';
+import { isMimic } from 'src/activity-types/game.constants';
+import type { Activity, AnyData } from 'types/activity.type';
+
+export function filterActivitiesWithLastMimicGame(activitiesData: Activity<AnyData>[]): Activity<AnyData>[] {
+  const indexOfLastMimic = activitiesData.findIndex((activity) => isGame(activity) && isMimic(activity)); // Get the index of this last mimic
+  if (indexOfLastMimic === -1) {
+    return activitiesData;
+  }
+  const mostRecentMimic = activitiesData[indexOfLastMimic]; // Get the last mimic created
+  const activitiesWithoutMimic = activitiesData.filter((activity) => !isGame(activity) || !isMimic(activity)); // Remove all mimics in activities
+  const activitiesWithLastMimic = [...activitiesWithoutMimic];
+  activitiesWithLastMimic.splice(indexOfLastMimic, 0, mostRecentMimic); // Put the last mimic created at the same spot in the array
+
+  return activitiesWithLastMimic;
+}
+
+export function filterActivitiesByTerm(activitiesData: Activity<AnyData>[], searchTerm: string): Activity<AnyData>[] {
+  const activitiesFilteredBySearchTermOnType = activitiesData.filter((activity) => {
+    const type = getType(activity.type);
+    const subType = type && activity.subType !== null && activity.subType !== undefined ? getSubtype(type, activity.subType) : undefined;
+    return subType && subType.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0;
+  });
+  const activitiesFilteredBySearchTerm = activitiesData.filter((activity) => filterActivityByTerm(activity, searchTerm));
+  let agregatedFilters = [...activitiesFilteredBySearchTerm, ...activitiesFilteredBySearchTermOnType];
+  agregatedFilters = [...new Set(agregatedFilters)];
+  return agregatedFilters;
+}
+
+// to check a given activity contains a given term
+export function filterActivityByTerm(activity: Activity, term: string) {
+  // for cas insensivitive search
+  const lowerTerm = term.toLowerCase();
+  if (activity.content[0].value.toLowerCase().indexOf(lowerTerm) !== -1) {
+    return true;
+  }
+
+  const dataStr = JSON.stringify(activity.data);
+
+  //resume if exists
+  if (dataStr.toLowerCase().indexOf(lowerTerm) !== -1) {
+    return true;
+  }
+  return false;
+}

src/components/accueil/Filters/Filters.tsx

@@ -37,6 +37,7 @@ export type FilterArgs = {
   status: number;
   countries: { [key: string]: boolean };
   pelico: boolean;
+  searchTerm: string;
 };
 
 interface FiltersProps {
@@ -68,18 +69,6 @@ export const Filters = ({ filters, onChange, countries = [], phase }: FiltersPro
           onChange({ ...filters, types: option.value, selectedType: option.key });
         }}
       />
-      {/* <FilterSelect
-        name="Status"
-        options={[
-          { key: 0, label: 'Tous' },
-          { key: 1, label: 'En cours' },
-          { key: 2, label: 'Terminées' },
-        ]}
-        value={filters.status}
-        onChange={(newStatus) => {
-          onChange({ ...filters, status: newStatus.key });
-        }}
-      /> */}
       <div style={{ display: 'flex', alignItems: 'center', userSelect: 'none' }}>
         {countries.map((c) => (
           <label key={c} style={{ display: 'inline-flex', alignItems: 'center', cursor: 'pointer', margin: '0 0.5rem 0 0.2rem' }}>
@@ -115,6 +104,20 @@ export const Filters = ({ filters, onChange, countries = [], phase }: FiltersPro
           <PelicoReflechit style={{ position: 'relative', zIndex: 10, height: '28px', width: 'auto', marginTop: '-10px', marginLeft: '-5px' }} />
         </label>
       </div>
+      <div>
+        <input
+          type="text"
+          value={filters.searchTerm}
+          placeholder="Rechercher"
+          style={{ margin: '0 0.5rem' }}
+          onChange={(event) => {
+            onChange({
+              ...filters,
+              searchTerm: event.target.value,
+            });
+          }}
+        />
+      </div>
     </div>
   );
 };

src/components/activities/ActivityCard/MimicCard.tsx

@@ -78,7 +78,7 @@ export const MimicCard = ({ activity, isSelf, noButtons, isDraft, showEditButton
                 <CommentIcon count={activity.commentCount} activityId={activity.id} />
                 <Link href="/creer-un-jeu/mimique" passHref>
                   <Button component="a" color="primary" variant="outlined" href="/creer-un-jeu/mimique">
-                    Jouer au jeu
+                    Jouer le jeu
                   </Button>
                 </Link>
               </>