Add filters

api/issues.ts

@@ -1,15 +1,16 @@
 import { axios } from "./axios";
-import type { Issue } from "./issues.types";
+import type { Issue, IssueFilters } from "./issues.types";
 import type { Page } from "@typings/page.types";
 
 const ENDPOINT = "/issue";
 
 export async function getIssues(
   page: number,
+  filters: IssueFilters,
   options?: { signal?: AbortSignal }
 ) {
   const { data } = await axios.get<Page<Issue>>(ENDPOINT, {
-    params: { page },
+    params: { page, ...filters },
     signal: options?.signal,
   });
   return data;

api/issues.types.ts

@@ -1,3 +1,8 @@
+export enum IssueStatus {
+  open = "open",
+  resolved = "resolved",
+}
+
 export enum IssueLevel {
   info = "info",
   warning = "warning",
@@ -11,5 +16,12 @@ export type Issue = {
   message: string;
   stack: string;
   level: IssueLevel;
+  status: IssueStatus;
   numEvents: number;
 };
+
+export type IssueFilters = {
+  level?: IssueLevel;
+  status?: IssueStatus;
+  project?: string;
+};

features/issues/api/use-get-issues.tsx

@@ -2,32 +2,34 @@ import { useEffect } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getIssues } from "@api/issues";
 import type { Page } from "@typings/page.types";
-import type { Issue } from "@api/issues.types";
+import type { Issue, IssueFilters } from "@api/issues.types";
+import { useFilters } from "../hooks/use-filters";
 
 const QUERY_KEY = "issues";
 
-export function getQueryKey(page?: number) {
+export function getQueryKey(page?: number, filters?: IssueFilters) {
   if (page === undefined) {
     return [QUERY_KEY];
   }
-  return [QUERY_KEY, page];
+  return [QUERY_KEY, page, filters];
 }
 
 export function useGetIssues(page: number) {
+  const { filters } = useFilters();
   const query = useQuery<Page<Issue>, Error>(
-    getQueryKey(page),
-    ({ signal }) => getIssues(page, { signal }),
+    getQueryKey(page, filters),
+    ({ signal }) => getIssues(page, filters, { signal }),
     { keepPreviousData: true }
   );
 
   // Prefetch the next page!
   const queryClient = useQueryClient();
   useEffect(() => {
     if (query.data?.meta.hasNextPage) {
-      queryClient.prefetchQuery(getQueryKey(page + 1), ({ signal }) =>
-        getIssues(page + 1, { signal })
+      queryClient.prefetchQuery(getQueryKey(page + 1, filters), ({ signal }) =>
+        getIssues(page + 1, filters, { signal })
       );
     }
-  }, [query.data, page, queryClient]);
+  }, [query.data, page, filters, queryClient]);
   return query;
 }

features/issues/components/filters/filters.styled.ts

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { breakpoint } from "@styles/theme";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-block: 1rem;
+  gap: 1rem;
+  width: 100%;
+  @media (min-width: ${breakpoint("desktop")}) {
+    flex-direction: row;
+    justify-content: flex-end;
+    order: initial;
+    gap: 3rem;
+    flex-wrap: wrap;
+  }
+`;
+
+export const RightContainer = styled.div`
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  order: -1;
+  @media (min-width: ${breakpoint("desktop")}) {
+    flex-direction: row;
+    gap: 3rem;
+    order: initial;
+  }
+`;

features/issues/components/filters/filters.tsx

@@ -0,0 +1,162 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useContext,
+} from "react";
+import { useRouter } from "next/router";
+import { useWindowSize } from "react-use";
+import { Select, Option, Input } from "@features/ui";
+import { NavigationContext } from "@features/layout";
+import { useFilters } from "../../hooks/use-filters";
+import { IssueLevel, IssueStatus } from "@api/issues.types";
+import { useProjects } from "@features/projects";
+import * as S from "./filters.styled";
+
+export function Filters() {
+  const { handleFilters, filters } = useFilters();
+  const { data: projects } = useProjects();
+  const router = useRouter();
+  const routerQueryProjectName =
+    (router.query.projectName as string)?.toLowerCase() || undefined;
+  const [inputValue, setInputValue] = useState<string>("");
+  const projectNames = projects?.map((project) => project.name.toLowerCase());
+  const isFirst = useRef(true);
+  const { width } = useWindowSize();
+  const isMobileScreen = width <= 1023;
+  const { isMobileMenuOpen } = useContext(NavigationContext);
+  const handleChange = (input: string) => {
+    setInputValue(input);
+
+    if (inputValue?.length < 2) {
+      handleProjectName(undefined);
+      return;
+    }
+
+    const name = projectNames?.find((name) =>
+      name?.toLowerCase().includes(inputValue.toLowerCase())
+    );
+
+    if (name) {
+      handleProjectName(name);
+    }
+  };
+
+  const handleLevel = (level?: string) => {
+    if (level) {
+      level = level.toLowerCase();
+    }
+    handleFilters({ level: level as IssueLevel });
+  };
+
+  const handleStatus = (status?: string) => {
+    if (status === "Unresolved") {
+      status = "open";
+    }
+    if (status) {
+      status = status.toLowerCase();
+    }
+    handleFilters({ status: status as IssueStatus });
+  };
+
+  const handleProjectName = useCallback(
+    (projectName?: string) =>
+      handleFilters({ project: projectName?.toLowerCase() }),
+    [handleFilters]
+  );
+
+  useEffect(() => {
+    const newObj: { [key: string]: string } = {
+      ...filters,
+    };
+
+    Object.keys(newObj).forEach((key) => {
+      if (newObj[key] === undefined) {
+        delete newObj[key];
+      }
+    });
+
+    const url = {
+      pathname: router.pathname,
+      query: {
+        page: router.query.page || 1,
+        ...newObj,
+      },
+    };
+
+    if (routerQueryProjectName && isFirst) {
+      handleProjectName(routerQueryProjectName);
+      setInputValue(routerQueryProjectName || "");
+      isFirst.current = false;
+    }
+
+    router.push(url, undefined, { shallow: false });
+  }, [filters.level, filters.status, filters.project, router.query.page]);
+
+  return (
+    <S.Container>
+      <Select
+        placeholder="Status"
+        defaultValue="Status"
+        width={isMobileScreen ? "97%" : "8rem"}
+        data-cy="filter-by-status"
+        style={{
+          ...(isMobileMenuOpen && {
+            opacity: 0,
+          }),
+        }}
+      >
+        <Option value={undefined} handleCallback={handleStatus}>
+          --None--
+        </Option>
+        <Option value="Unresolved" handleCallback={handleStatus}>
+          Unresolved
+        </Option>
+        <Option value="Resolved" handleCallback={handleStatus}>
+          Resolved
+        </Option>
+      </Select>
+
+      <Select
+        placeholder="Level"
+        defaultValue="Level"
+        width={isMobileScreen ? "97%" : "8rem"}
+        data-cy="filter-by-level"
+        style={{
+          ...(isMobileMenuOpen && {
+            opacity: 0,
+          }),
+        }}
+      >
+        <Option value={undefined} handleCallback={handleLevel}>
+          --None--
+        </Option>
+        <Option value="Error" handleCallback={handleLevel}>
+          Error
+        </Option>
+        <Option value="Warning" handleCallback={handleLevel}>
+          Warning
+        </Option>
+        <Option value="Info" handleCallback={handleLevel}>
+          Info
+        </Option>
+      </Select>
+
+      <Input
+        handleChange={handleChange}
+        value={inputValue}
+        label="project name"
+        placeholder="Project Name"
+        iconSrc="/icons/search-icon.svg"
+        data-cy="filter-by-project"
+        style={{
+          ...(isMobileScreen && { width: "94%", marginRight: "3rem" }),
+          ...(isMobileMenuOpen && {
+            opacity: 0,
+          }),
+        }}
+      />
+    </S.Container>
+  );
+}

features/issues/components/filters/index.ts

@@ -0,0 +1 @@
+export * from "./filters";

features/issues/components/issue-list/issue-list.tsx

@@ -5,6 +5,7 @@ import { ProjectLanguage } from "@api/projects.types";
 import { useProjects } from "@features/projects";
 import { useGetIssues } from "../../api";
 import { IssueRow } from "./issue-row";
+import { Filters } from "../filters";
 
 const Container = styled.div`
   background: white;
@@ -98,46 +99,49 @@ export function IssueList() {
   const { items, meta } = issuesPage.data || {};
 
   return (
-    <Container>
-      <Table>
-        <thead>
-          <HeaderRow>
-            <HeaderCell>Issue</HeaderCell>
-            <HeaderCell>Level</HeaderCell>
-            <HeaderCell>Events</HeaderCell>
-            <HeaderCell>Users</HeaderCell>
-          </HeaderRow>
-        </thead>
-        <tbody>
-          {(items || []).map((issue) => (
-            <IssueRow
-              key={issue.id}
-              issue={issue}
-              projectLanguage={projectIdToLanguage[issue.projectId]}
-            />
-          ))}
-        </tbody>
-      </Table>
-      <PaginationContainer>
-        <div>
-          <PaginationButton
-            onClick={() => navigateToPage(page - 1)}
-            disabled={page === 1}
-          >
-            Previous
-          </PaginationButton>
-          <PaginationButton
-            onClick={() => navigateToPage(page + 1)}
-            disabled={page === meta?.totalPages}
-          >
-            Next
-          </PaginationButton>
-        </div>
-        <PageInfo>
-          Page <PageNumber>{meta?.currentPage}</PageNumber> of{" "}
-          <PageNumber>{meta?.totalPages}</PageNumber>
-        </PageInfo>
-      </PaginationContainer>
-    </Container>
+    <>
+      <Filters />
+      <Container>
+        <Table>
+          <thead>
+            <HeaderRow>
+              <HeaderCell>Issue</HeaderCell>
+              <HeaderCell>Level</HeaderCell>
+              <HeaderCell>Events</HeaderCell>
+              <HeaderCell>Users</HeaderCell>
+            </HeaderRow>
+          </thead>
+          <tbody>
+            {(items || []).map((issue) => (
+              <IssueRow
+                key={issue.id}
+                issue={issue}
+                projectLanguage={projectIdToLanguage[issue.projectId]}
+              />
+            ))}
+          </tbody>
+        </Table>
+        <PaginationContainer>
+          <div>
+            <PaginationButton
+              onClick={() => navigateToPage(page - 1)}
+              disabled={page === 1}
+            >
+              Previous
+            </PaginationButton>
+            <PaginationButton
+              onClick={() => navigateToPage(page + 1)}
+              disabled={page === meta?.totalPages}
+            >
+              Next
+            </PaginationButton>
+          </div>
+          <PageInfo>
+            Page <PageNumber>{meta?.currentPage}</PageNumber> of{" "}
+            <PageNumber>{meta?.totalPages}</PageNumber>
+          </PageInfo>
+        </PaginationContainer>
+      </Container>
+    </>
   );
 }