feat: added page /assos (#22)

* feat: added page /assos

* fix: typos

---------

Co-authored-by: Teddy Roncin <[email protected]>

public/locales/fr/assos.json.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+// For more information, check the common.json.ts file
+
+export default {
+  "browser": "UTT Travail",
+  "filter.search": "Recherche dans le guide des assos",
+  "filter.search.title": "Recherche dans le guide des assos"
+} as const;
+

src/api/assos/asso.interface.ts

@@ -0,0 +1,15 @@
+export interface Asso {
+  id: string;
+  name: string;
+  logo: string;
+  descriptionShortTranslation: string;
+  president: {
+    role: {
+      name: string;
+    };
+    user: {
+      firstName: string;
+      lastName: string;
+    };
+  };
+}

src/api/assos/searchAssos.hook.ts

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import { useAPI } from '@/api/api';
+import { Pagination } from '@/api/api.interface';
+import { Asso } from '@/api/assos/asso.interface';
+
+export function useAssos(): [Asso[], number, (query: Record<string, string>) => void] {
+  const [assos, setAssos] = useState<Asso[]>([]);
+  const [total, setTotal] = useState(0);
+  const api = useAPI();
+  const updateAssos = async (query: Record<string, string>) =>
+    api.get<Pagination<Asso>>(`/assos?${new URLSearchParams(query)}`).on('success', (body) => {
+      setAssos(body.items);
+      setTotal(body.itemCount);
+    });
+  return [assos, total, updateAssos];
+}

src/app/assos/page.tsx

@@ -0,0 +1,57 @@
+'use client';
+import styles from './style.module.scss';
+import { createInputFilter } from '@/components/filteredSearch/InputFilter';
+import FilteredSearch, { FiltersDataType, GenericFiltersType } from '@/components/filteredSearch/FilteredSearch';
+import Icons from '@/icons';
+import { ResultsList } from '@/components/ResultsList';
+import { usePageSettings } from '@/module/pageSettings';
+import { useAppTranslation } from '@/lib/i18n';
+import { useAssos } from '@/api/assos/searchAssos.hook';
+
+/**
+ * The different filters that exist.
+ */
+interface AssoFiltersType extends GenericFiltersType<FilterNames> {
+  name: { dependsOn: []; value: string };
+}
+
+type FilterNames = 'name';
+
+/**
+ * The definition of the filters. They can then be used in JavaScript code to get the filter component, the name of the filter, ...
+ */
+const assoFilters = Object.freeze({
+  name: {
+    component: createInputFilter('assos:filter.search', 'assos:filter.search.title', Icons.Book),
+    parameterName: 'q',
+    updateDelayed: true,
+  }, // This one does not need a name as it will never be displayed
+} satisfies FiltersDataType<FilterNames, AssoFiltersType>);
+
+export default function Page() {
+  usePageSettings({});
+  const { t } = useAppTranslation();
+  const [assos, totalAssosCount, updateAssos] = useAssos();
+  return (
+    <div className={styles.page}>
+      <h1 className={styles.title}>{t('assos:browser')}</h1>
+      <div className={styles.content}>
+        <FilteredSearch<FilterNames, AssoFiltersType> filtersData={assoFilters} updateSearch={updateAssos} />
+        <div className={styles.results}>
+          <ResultsList
+            data={assos}
+            totalResults={totalAssosCount}
+            baseRedirectUrl={'/assos'}
+            itemFactory={({ item }) => (
+              <div>
+                <h2>{item?.name}</h2>
+                <p>{item?.descriptionShortTranslation}</p>
+              </div>
+            )}
+            getItemId={(asso) => asso.id}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/assos/style.module.scss

@@ -0,0 +1,34 @@
+@import '@/variables.scss';
+
+.page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    text-transform: uppercase;
+    color: $ung-dark-grey;
+    font-weight: 900;
+  }
+
+  .content {
+    display: flex;
+    gap: 30px;
+    margin-top: 5vh;
+    flex-grow: 1;
+    min-height: 0;
+
+    > * {
+      background-color: white;
+      border-radius: 15px;
+      border: #E7E7E7 solid 1px;
+      padding: 1rem;
+      overflow-y: scroll;
+    }
+
+    .results {
+      flex-grow: 1;
+      height: 100%;
+    }
+  }
+}

src/lib/i18n.d.ts

@@ -5,12 +5,13 @@ import homepage from '../../public/locales/fr/homepage.json';
 import users from '../../public/locales/fr/users.json';
 import goTo from '../../public/locales/fr/goTo.json';
 import auth from '../../public/locales/fr/auth.json';
+import assos from '../../public/locales/fr/assos.json';
 import cookies from '../../public/locales/fr/cookies.json';
 import { type InitOptions } from 'i18next';
 
 declare module 'i18next' {
   interface CustomTypeOptions extends InitOptions {
-    ns: ['common', 'login', 'ues', 'homepage', 'users', 'goTo', 'auth', 'cookies'];
+    ns: ['common', 'login', 'ues', 'homepage', 'users', 'goTo', 'auth', 'assos', 'cookies'];
     nsSeparator: ':';
     defaultNS: 'common';
     // custom resources type
@@ -22,6 +23,7 @@ declare module 'i18next' {
       users: typeof users;
       goTo: typeof goTo;
       auth: typeof auth;
+      assos: typeof assos;
       cookies: typeof cookies;
     };
   }

src/lib/i18n.ts

@@ -25,7 +25,7 @@ i18n
       useSuspense: true,
     },
     supportedLngs,
-    ns: ['common', 'login', 'ues', 'homepage', 'users', 'goTo', 'auth', 'cookies'],
+    ns: ['common', 'login', 'ues', 'homepage', 'users', 'goTo', 'auth', 'assos', 'cookies'],
     preload: ['fr'],
     nsSeparator: ':',
     defaultNS: 'common',