From 16c540181d15cb9af08227df6cde71b01700a635 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Sun, 22 May 2022 20:43:17 +0200
Subject: [PATCH] Improved the input for the pages

---
 src/components/Inputs/WithLabel.tsx | 25 ++++++++
 src/pages/contents/index.tsx        | 55 ++++++++---------
 src/pages/library/index.tsx         | 95 ++++++++++++++++-------------
 src/pages/news/index.tsx            | 51 ++++++++++++++--
 4 files changed, 149 insertions(+), 77 deletions(-)
 create mode 100644 src/components/Inputs/WithLabel.tsx

diff --git a/src/components/Inputs/WithLabel.tsx b/src/components/Inputs/WithLabel.tsx
new file mode 100644
index 0000000..0b02bce
--- /dev/null
+++ b/src/components/Inputs/WithLabel.tsx
@@ -0,0 +1,25 @@
+import { Immutable } from "helpers/types";
+
+interface Props {
+  label: string | null | undefined;
+  input: JSX.Element;
+  disabled?: boolean;
+}
+
+export function WithLabel(props: Immutable<Props>): JSX.Element {
+  const { label, input, disabled } = props;
+  return (
+    <div
+      className={`flex flex-row place-content-between place-items-center gap-2 ${
+        disabled ? "text-dark brightness-150 contrast-75 grayscale" : ""
+      }`}
+    >
+      {label && (
+        <p className={`text-left ${label.length < 10 ? "flex-shrink-0" : ""}`}>
+          {label}:
+        </p>
+      )}
+      {input}
+    </div>
+  );
+}
diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx
index d7f9fbc..55d5f4c 100644
--- a/src/pages/contents/index.tsx
+++ b/src/pages/contents/index.tsx
@@ -17,6 +17,7 @@ import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
 import { Icon } from "components/Ico";
+import { WithLabel } from "components/Inputs/WithLabel";
 
 interface Props extends AppStaticProps {
   contents: NonNullable<GetContentsQuery["contents"]>["data"];
@@ -83,36 +84,34 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
         }}
       />
 
-      <div className="flex flex-row place-items-center gap-2">
-        <p className="flex-shrink-0">{langui.group_by}:</p>
-        <Select
-          className="w-full"
-          options={[langui.category ?? "", langui.type ?? ""]}
-          state={groupingMethod}
-          setState={setGroupingMethod}
-          allowEmpty
-        />
-      </div>
+      <WithLabel
+        label={langui.group_by}
+        input={
+          <Select
+            className="w-full"
+            options={[langui.category ?? "", langui.type ?? ""]}
+            state={groupingMethod}
+            setState={setGroupingMethod}
+            allowEmpty
+          />
+        }
+      />
 
-      <div
-        className={`flex flex-row place-items-center gap-2 coarse:hidden ${
-          searchName.length > 1
-            ? "text-dark brightness-150 contrast-75 grayscale"
-            : ""
-        }`}
-      >
-        <p className="flex-shrink-0">{langui.combine_related_contents}:</p>
-        <Switch
-          setState={setCombineRelatedContent}
-          state={effectiveCombineRelatedContent}
-          disabled={searchName.length > 1}
-        />
-      </div>
+      <WithLabel
+        label={langui.combine_related_contents}
+        disabled={searchName.length > 1}
+        input={
+          <Switch
+            setState={setCombineRelatedContent}
+            state={effectiveCombineRelatedContent}
+          />
+        }
+      />
 
-      <div className="flex flex-row place-items-center gap-2 coarse:hidden">
-        <p className="flex-shrink-0">{langui.always_show_info}:</p>
-        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
-      </div>
+      <WithLabel
+        label={langui.always_show_info}
+        input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
+      />
     </SubPanel>
   );
   const contentPanel = (
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index 2023d04..d1cf157 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -22,6 +22,7 @@ import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
 import { Icon } from "components/Ico";
+import { WithLabel } from "components/Inputs/WithLabel";
 
 interface Props extends AppStaticProps {
   items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@@ -104,54 +105,62 @@ export default function Library(props: Immutable<Props>): JSX.Element {
         }}
       />
 
-      <div className="flex flex-row place-items-center gap-2">
-        <p className="flex-shrink-0">{langui.group_by}:</p>
-        <Select
-          className="w-full"
-          options={[
-            langui.category ?? "Category",
-            langui.type ?? "Type",
-            langui.release_year ?? "Year",
-          ]}
-          state={groupingMethod}
-          setState={setGroupingMethod}
-          allowEmpty
-        />
-      </div>
+      <WithLabel
+        label={langui.group_by}
+        input={
+          <Select
+            className="w-full"
+            options={[
+              langui.category ?? "Category",
+              langui.type ?? "Type",
+              langui.release_year ?? "Year",
+            ]}
+            state={groupingMethod}
+            setState={setGroupingMethod}
+            allowEmpty
+          />
+        }
+      />
 
-      <div className="flex flex-row place-items-center gap-2">
-        <p className="flex-shrink-0">{langui.order_by}:</p>
-        <Select
-          className="w-full"
-          options={[
-            langui.name ?? "Name",
-            langui.price ?? "Price",
-            langui.release_date ?? "Release date",
-          ]}
-          state={sortingMethod}
-          setState={setSortingMethod}
-        />
-      </div>
+      <WithLabel
+        label={langui.order_by}
+        input={
+          <Select
+            className="w-full"
+            options={[
+              langui.name ?? "Name",
+              langui.price ?? "Price",
+              langui.release_date ?? "Release date",
+            ]}
+            state={sortingMethod}
+            setState={setSortingMethod}
+          />
+        }
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2">
-        <p className="text-left">{langui.show_subitems}:</p>
-        <Switch state={showSubitems} setState={setShowSubitems} />
-      </div>
+      <WithLabel
+        label={langui.show_subitems}
+        input={<Switch state={showSubitems} setState={setShowSubitems} />}
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2">
-        <p className="text-left">{langui.show_primary_items}:</p>
-        <Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
-      </div>
+      <WithLabel
+        label={langui.show_primary_items}
+        input={
+          <Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
+        }
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2">
-        <p className="text-left">{langui.show_secondary_items}:</p>
-        <Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
-      </div>
+      <WithLabel
+        label={langui.show_secondary_items}
+        input={
+          <Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
+        }
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2 coarse:hidden">
-        <p className="text-left">{langui.always_show_info}:</p>
-        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
-      </div>
+      <WithLabel
+        label={langui.always_show_info}
+        input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
+      />
     </SubPanel>
   );
   const contentPanel = (
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index dc54c4a..710b8d4 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -13,8 +13,9 @@ import { getReadySdk } from "graphql/sdk";
 import { prettyDate, prettySlug } from "helpers/formatters";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Icon } from "components/Ico";
+import { WithLabel } from "components/Inputs/WithLabel";
 
 interface Props extends AppStaticProps {
   posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
@@ -25,6 +26,15 @@ export default function News(props: Immutable<Props>): JSX.Element {
   const posts = sortPosts(props.posts);
 
   const [keepInfoVisible, setKeepInfoVisible] = useState(true);
+  const [searchName, setSearchName] = useState("");
+
+  const [filteredItems, setFilteredItems] = useState(
+    filterItems(posts, searchName)
+  );
+
+  useEffect(() => {
+    setFilteredItems(filterItems(posts, searchName));
+  }, [posts, searchName]);
 
   const subPanel = (
     <SubPanel>
@@ -34,10 +44,22 @@ export default function News(props: Immutable<Props>): JSX.Element {
         description={langui.news_description}
       />
 
-      <div className="flex flex-row place-items-center gap-2 coarse:hidden">
-        <p className="flex-shrink-0">{langui.always_show_info}:</p>
-        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
-      </div>
+      <input
+        className="mb-6 w-full"
+        type="text"
+        name="name"
+        id="name"
+        placeholder={langui.search_title ?? undefined}
+        onChange={(event) => {
+          const input = event.target as HTMLInputElement;
+          setSearchName(input.value);
+        }}
+      />
+
+      <WithLabel
+        label={langui.always_show_info}
+        input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
+      />
     </SubPanel>
   );
 
@@ -47,7 +69,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
         className="grid grid-cols-1 items-end gap-8
         desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
       >
-        {posts.map((post) => (
+        {filteredItems.map((post) => (
           <Fragment key={post.id}>
             {post.attributes && (
               <PreviewCard
@@ -80,6 +102,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
       navTitle={langui.news}
       subPanel={subPanel}
       contentPanel={contentPanel}
+      subPanelIcon={Icon.Search}
       {...props}
     />
   );
@@ -115,3 +138,19 @@ function sortPosts(
     .reverse();
   return sortedPosts as Immutable<Props["posts"]>;
 }
+
+function filterItems(posts: Immutable<Props["posts"]>, searchName: string) {
+  return [...posts].filter((post) => {
+    if (searchName.length > 1) {
+      if (
+        post.attributes?.translations?.[0]?.title
+          .toLowerCase()
+          .includes(searchName.toLowerCase())
+      ) {
+        return true;
+      }
+      return false;
+    }
+    return true;
+  });
+}