Refactoring session 2: select component

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

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { breakpoint } from "@styles/theme";
+import { Select as UnstyledSelect, Input as UnstyledInput } from "@features/ui";
 
 export const Container = styled.div`
   display: flex;
@@ -12,7 +13,20 @@ export const Container = styled.div`
     flex-direction: row;
     justify-content: flex-end;
     order: initial;
-    gap: 3rem;
     flex-wrap: wrap;
   }
 `;
+
+export const Select = styled(UnstyledSelect)`
+  width: 100%;
+  @media (min-width: ${breakpoint("desktop")}) {
+    width: 10rem;
+  }
+` as typeof UnstyledSelect;
+
+export const Input = styled(UnstyledInput)`
+  width: 100%;
+  @media (min-width: ${breakpoint("desktop")}) {
+    width: 17.5rem;
+  }
+`;

features/issues/components/filters/filters.tsx

@@ -1,157 +1,55 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useContext,
-} from "react";
-import { useRouter } from "next/router";
-import { useWindowSize } from "react-use";
-import { Select, Option, Input, NavigationContext } from "@features/ui";
-import { useFilters } from "../../hooks/use-filters";
+import React, { useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { IssueLevel, IssueStatus } from "@api/issues.types";
-import { useProjects } from "@features/projects";
+import { useFilters } from "../../hooks/use-filters";
 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 statusOptions = [
+  { value: undefined, label: "--None--" },
+  { value: IssueStatus.open, label: "Unresolved" },
+  { value: IssueStatus.resolved, label: "Resolved" },
+];
 
-    const name = projectNames?.find((name) =>
-      name?.toLowerCase().includes(inputValue.toLowerCase())
-    );
+const levelOptions = [
+  { value: undefined, label: "--None--" },
+  { value: IssueLevel.error, label: "Error" },
+  { value: IssueLevel.warning, label: "Warning" },
+  { value: IssueLevel.info, label: "Info" },
+];
 
-    if (name) {
-      handleProjectName(name);
-    }
-  };
+export function Filters() {
+  const { handleFilters, filters } = useFilters();
 
-  const handleLevel = (level?: string) => {
-    if (level) {
-      level = level.toLowerCase();
-    }
-    handleFilters({ level: level as IssueLevel });
-  };
+  const debouncedHandleFilters = useDebouncedCallback(handleFilters, 300);
+  const [inputValue, setInputValue] = useState(filters.project || "");
 
-  const handleStatus = (status?: string) => {
-    if (status === "Unresolved") {
-      status = "open";
-    }
-    if (status) {
-      status = status.toLowerCase();
-    }
-    handleFilters({ status: status as IssueStatus });
+  const handleChange = (project: string) => {
+    setInputValue(project);
+    debouncedHandleFilters({ project: project.toLowerCase() });
   };
 
-  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
+      <S.Select
         placeholder="Status"
-        defaultValue="Status"
-        width={isMobileScreen ? "97%" : "8rem"}
-        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>
+        value={filters.status}
+        options={statusOptions}
+        onChange={(status) => handleFilters({ status })}
+      />
 
-      <Select
+      <S.Select
         placeholder="Level"
-        defaultValue="Level"
-        width={isMobileScreen ? "97%" : "8rem"}
-        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>
+        value={filters.level}
+        options={levelOptions}
+        onChange={(level) => handleFilters({ level })}
+      />
 
-      <Input
+      <S.Input
         handleChange={handleChange}
         value={inputValue}
         label="project name"
         placeholder="Project Name"
         iconSrc="/icons/search-icon.svg"
-        style={{
-          ...(isMobileScreen && { width: "94%", marginRight: "3rem" }),
-          ...(isMobileMenuOpen && {
-            opacity: 0,
-          }),
-        }}
       />
     </S.Container>
   );

features/issues/hooks/use-filters.ts

@@ -1,4 +1,19 @@
-import { useContext } from "react";
-import { FiltersContext } from "../context/filters-context";
+import { useRouter } from "next/router";
+import { IssueFilters } from "@api/issues.types";
 
-export const useFilters = () => useContext(FiltersContext);
+export const useFilters = () => {
+  const router = useRouter();
+
+  const filters = {
+    status: router.query.status,
+    level: router.query.level,
+    project: router.query.project,
+  } as IssueFilters;
+
+  const handleFilters = (newFilters: IssueFilters) => {
+    const query = { ...router.query, ...newFilters };
+    router.push({ query });
+  };
+
+  return { filters, handleFilters };
+};

features/issues/index.ts

@@ -1,3 +1,2 @@
 export * from "./api";
 export * from "./components/issue-list";
-export * from "./context";

features/ui/input/input.styled.ts

@@ -17,6 +17,7 @@ export const InputContainer = styled.input<{
   border-radius: 7px;
   width: calc(${space(20)} * 4 - ${space(6)});
   padding: ${space(2, 3)};
+  box-sizing: border-box;
   letter-spacing: 0.05rem;
   color: ${color("gray", 900)};
   ${textFont("md", "regular")};

features/ui/page-container/page-container.tsx

@@ -3,7 +3,6 @@ import Head from "next/head";
 import styled from "styled-components";
 import { SidebarNavigation } from "../sidebar-navigation";
 import { color, displayFont, textFont, space, breakpoint } from "@styles/theme";
-import { FiltersProvider } from "@features/issues";
 
 type PageContainerProps = {
   children: React.ReactNode;
@@ -58,23 +57,21 @@ export function PageContainer({ children, title, info }: PageContainerProps) {
   // "Warning: A title element received an array with more than 1 element as children."
   const documentTitle = `ProLog - ${title}`;
   return (
-    <FiltersProvider>
-      <Container>
-        <Head>
-          <title>{documentTitle}</title>
-          <meta name="description" content="Error monitoring" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
+    <Container>
+      <Head>
+        <title>{documentTitle}</title>
+        <meta name="description" content="Error monitoring" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
 
-        <SidebarNavigation />
-        <Main>
-          <ContentContainer>
-            <Title>{title}</Title>
-            <Info>{info}</Info>
-            {children}
-          </ContentContainer>
-        </Main>
-      </Container>
-    </FiltersProvider>
+      <SidebarNavigation />
+      <Main>
+        <ContentContainer>
+          <Title>{title}</Title>
+          <Info>{info}</Info>
+          {children}
+        </ContentContainer>
+      </Main>
+    </Container>
   );
 }