frontend: add 'ProjectSelect' to the navbar

twenty-frontend/src/js/components/NavBar.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useContext } from "react";
+import { ParamContext } from "/Context";
 import { Maybe } from "/types/schema";
-
+import { ProjectSelect } from "/components/ProjectSelect";
 const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
 const ACTIVE_CLASSNAMES = [
   ...BASE_CLASSNAMES,
@@ -30,6 +31,7 @@ const find = (path: string, bar: Bar): Maybe<Item> => {
 };
 
 export function NavBar() {
+  const params = useContext(ParamContext);
   const bar: Bar = {
     Tasks: [
       { text: "All tasks", href: "/tasks/" },
@@ -67,6 +69,18 @@ export function NavBar() {
           </>
         );
       })}
+      <h3>Filters</h3>
+      <ProjectSelect
+        selected={params.projectId}
+        onChange={project => {
+          if (project) {
+            location.hash = `projectId=${project.id}`;
+          } else {
+            location.hash = "";
+          }
+          location.reload();
+        }}
+      />
     </>
   );
 }

twenty-frontend/src/js/components/ProjectSelect.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+import { useProjects } from "/hooks/queries/useProjects";
+import { Project, Maybe } from "/types/schema";
+
+type Props = {
+  selected: Maybe<string>;
+  onChange: (project: Maybe<Project>) => void;
+};
+
+export function ProjectSelect({ onChange, selected }: Props) {
+  const { data, loading } = useProjects();
+  const projects: Project[] = data?.projects || [];
+  const options = [
+    <option>Any project</option>,
+    ...projects.map(project => {
+      return <option value={project.id}>{project.name}</option>;
+    }),
+  ];
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <select
+      className="flex p-3 w-3/4"
+      defaultValue={selected}
+      onChange={event => {
+        const { target } = event;
+        const project = projects.find(p => p.id === Number(target.value));
+        onChange(project);
+      }}
+    >
+      {...options}
+    </select>
+  );
+}