refactor: Improved settings page

- Improved settings page
- Moved myAccount query to useMyAccount hook
- Moved search to separate component

Author: CrawlerCode

src/components/issues/Search.tsx

@@ -0,0 +1,52 @@
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useRef, useState } from "react";
+import useHotKey from "../../hooks/useHotkey";
+import InputField from "../general/InputField";
+
+type PropTypes = {
+  onSearch: (search: { searching: boolean; query: string }) => void;
+};
+
+const Search = ({ onSearch }: PropTypes) => {
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    onSearch({
+      searching,
+      query,
+    });
+  }, [searching, query]);
+
+  // hotkeys
+  useHotKey(
+    () => {
+      setSearching(true);
+      searchRef.current?.focus();
+      searchRef.current?.select();
+    },
+    { ctrl: true, key: "k" }
+  );
+  useHotKey(
+    () => {
+      setSearching(true);
+      searchRef.current?.focus();
+      searchRef.current?.select();
+    },
+    { ctrl: true, key: "f" }
+  );
+  useHotKey(
+    () => {
+      setSearching(false);
+      setQuery("");
+    },
+    { key: "Escape" },
+    searching
+  );
+
+  return <>{searching && <InputField ref={searchRef} icon={<FontAwesomeIcon icon={faSearch} />} placeholder="Search..." className="select-none mb-3" value={query} onChange={(e) => setQuery(e.target.value)} autoFocus autoComplete="off" />}</>;
+};
+
+export default Search;

src/hooks/useMyAccount.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMyAccount } from "../api/redmine";
+
+const useMyAccount = () => {
+  const myAccountQuery = useQuery({
+    queryKey: ["myAccount"],
+    queryFn: getMyAccount,
+  });
+
+  return {
+    data: myAccountQuery.data,
+    isLoading: myAccountQuery.isInitialLoading,
+    isError: myAccountQuery.isError,
+  };
+};
+
+export default useMyAccount;

src/hooks/useMyIssues.ts

@@ -1,17 +1,12 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
-import { getAllMyOpenIssues, getMyAccount, getOpenIssues, searchOpenIssues } from "../api/redmine";
+import { getAllMyOpenIssues, getOpenIssues, searchOpenIssues } from "../api/redmine";
 import useDebounce from "./useDebounce";
 import useSettings from "./useSettings";
 
 const useMyIssues = (additionalIssuesIds: number[], search: string) => {
   const { settings } = useSettings();
 
-  const myAccountQuery = useQuery({
-    queryKey: ["myAccount"],
-    queryFn: getMyAccount,
-  });
-
   const issuesQuery = useInfiniteQuery({
     queryKey: ["issues"],
     queryFn: ({ pageParam = 0 }) => getAllMyOpenIssues(pageParam * 100, 100),
@@ -60,7 +55,6 @@ const useMyIssues = (additionalIssuesIds: number[], search: string) => {
   let extendedSearchIssues = extendedSearchIssuesQuery.data ?? [];
 
   return {
-    account: myAccountQuery.data,
     data: issues,
     extendedSearch: extendedSearchIssues,
     isLoading: issuesQuery.isInitialLoading || additionalIssuesQuery.isInitialLoading,

src/pages/IssuesPage.tsx

@@ -1,11 +1,9 @@
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useRef, useState } from "react";
-import InputField from "../components/general/InputField";
+import { useEffect, useState } from "react";
 import Toast from "../components/general/Toast";
 import IssuesList, { IssuesData } from "../components/issues/IssuesList";
 import IssuesListSkeleton from "../components/issues/IssuesListSkeleton";
-import useHotKey from "../hooks/useHotkey";
+import Search from "../components/issues/Search";
+import useMyAccount from "../hooks/useMyAccount";
 import useMyIssues from "../hooks/useMyIssues";
 import useSettings from "../hooks/useSettings";
 import useStorage from "../hooks/useStorage";
@@ -15,32 +13,15 @@ const IssuesPage = () => {
 
   const issuesData = useStorage<IssuesData>("issues", {});
 
-  const searchRef = useRef<HTMLInputElement>(null);
-  const [searching, setSearching] = useState(false);
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState<{ searching: boolean; query: string }>({ searching: false, query: "" });
+
   const myIssuesQuery = useMyIssues(
     Object.keys(issuesData.data)
       .map((id) => Number(id))
       .filter((id) => issuesData.data[id].remembered || issuesData.data[id].remember || issuesData.data[id].active || issuesData.data[id].time > 0),
-    searching ? search : ""
-  );
-
-  // hotkeys
-  useHotKey(
-    () => {
-      setSearching(true);
-      searchRef.current?.focus();
-    },
-    { ctrl: true, key: "k" }
-  );
-  useHotKey(
-    () => {
-      setSearching(true);
-      searchRef.current?.focus();
-    },
-    { ctrl: true, key: "f" }
+    search.searching ? search.query : ""
   );
-  useHotKey(() => setSearching(false), { key: "Escape" }, searching);
+  const myAccount = useMyAccount();
 
   useEffect(() => {
     const count = Object.values(issuesData.data).reduce((count, data) => count + (data.active ? 1 : 0), 0);
@@ -53,13 +34,13 @@ const IssuesPage = () => {
 
   return (
     <>
-      {searching && <InputField ref={searchRef} icon={<FontAwesomeIcon icon={faSearch} />} placeholder="Search..." className="select-none mb-3" onChange={(e) => setSearch(e.target.value)} autoFocus autoComplete="off" />}
+      <Search onSearch={setSearch} />
       <div className="flex flex-col gap-y-2">
         {myIssuesQuery.isLoading && <IssuesListSkeleton />}
 
-        <IssuesList account={myIssuesQuery.account} issues={myIssuesQuery.data} issuesData={issuesData} />
+        <IssuesList account={myAccount.data} issues={myIssuesQuery.data} issuesData={issuesData} />
 
-        {searching && settings.options.extendedSearch && (
+        {search.searching && settings.options.extendedSearch && (
           <>
             <div className="relative">
               <div className="absolute inset-0 flex items-center" aria-hidden="true">
@@ -70,7 +51,7 @@ const IssuesPage = () => {
               </div>
             </div>
 
-            <IssuesList account={myIssuesQuery.account} issues={myIssuesQuery.extendedSearch} issuesData={issuesData} />
+            <IssuesList account={myAccount.data} issues={myIssuesQuery.extendedSearch} issuesData={issuesData} />
           </>
         )}
 

src/pages/SettingsPage.tsx

@@ -6,6 +6,7 @@ import * as Yup from "yup";
 import CheckBox from "../components/general/CheckBox";
 import InputField from "../components/general/InputField";
 import Toast from "../components/general/Toast";
+import useMyAccount from "../hooks/useMyAccount";
 import useSettings, { Settings } from "../hooks/useSettings";
 
 const SettingsPage = () => {
@@ -20,6 +21,8 @@ const SettingsPage = () => {
 
   const [saved, setSaved] = useState(false);
 
+  const myAccount = useMyAccount();
+
   return (
     <>
       <Formik
@@ -42,13 +45,28 @@ const SettingsPage = () => {
         {({ submitForm, touched, errors }) => (
           <>
             <Form>
-              <div className="flex flex-col gap-y-2">
-                <Field type="text" name="redmineURL" title="Redmine URL" placeholder="Redmine URL" required as={InputField} error={touched.redmineURL && errors.redmineURL} />
-                <Field type="password" name="redmineApiKey" title="Redmine API-Key" placeholder="Redmine API-Key" required as={InputField} error={touched.redmineApiKey && errors.redmineApiKey} />
-                <h2 className="text-lg font-semibold">Options:</h2>
-                <Field type="checkbox" name="options.autoPauseOnSwitch" title="Auto pause" description="Automatic pause timers when changing issue" as={CheckBox} />
-                <Field type="checkbox" name="options.extendedSearch" title="Extended search" description="Allows to search issues that are not assigned to you" as={CheckBox} />
-                <Field type="checkbox" name="options.roundTimeNearestQuarterHour" title="Round to nearest 15 min" description="Round timer to nearest quarter hour" as={CheckBox} />
+              <div className="flex flex-col gap-y-1">
+                <fieldset className="p-1.5 rounded-lg border border-gray-300 dark:border-gray-600">
+                  <legend className="px-2 text-base font-semibold">Redmine</legend>
+                  <div className="flex flex-col gap-y-2">
+                    <Field type="text" name="redmineURL" title="Redmine URL" placeholder="Redmine URL" required as={InputField} error={touched.redmineURL && errors.redmineURL} />
+                    <Field type="password" name="redmineApiKey" title="Redmine API-Key" placeholder="Redmine API-Key" required as={InputField} error={touched.redmineApiKey && errors.redmineApiKey} />
+                    {myAccount.data && (
+                      <p>
+                        User: {myAccount.data.firstname} {myAccount.data.lastname} ({myAccount.data.login})
+                      </p>
+                    )}
+                  </div>
+                </fieldset>
+                <fieldset className="p-1.5 rounded-lg border border-gray-300 dark:border-gray-600">
+                  <legend className="px-2 text-base font-semibold">Options</legend>
+                  <div className="flex flex-col gap-y-2">
+                    <Field type="checkbox" name="options.autoPauseOnSwitch" title="Auto pause" description="Automatic pause timers when changing issue" as={CheckBox} />
+                    <Field type="checkbox" name="options.extendedSearch" title="Extended search" description="Allows to search issues that are not assigned to you" as={CheckBox} />
+                    <Field type="checkbox" name="options.roundTimeNearestQuarterHour" title="Round to nearest 15 min" description="Round timer to nearest quarter hour" as={CheckBox} />
+                  </div>
+                </fieldset>
+
                 <button
                   type="button"
                   className={clsx(
@@ -64,7 +82,7 @@ const SettingsPage = () => {
           </>
         )}
       </Formik>
-      <div className="absolute bottom-0 w-full flex flex-col items-center p-2">
+      <div className="w-full flex flex-col items-center p-2 mt-3">
         <g>{chrome.runtime.getManifest().name}</g>
         <p>Version: {chrome.runtime.getManifest().version}</p>
       </div>

src/types/redmine.ts

@@ -71,8 +71,9 @@ export type TSearchResult = {
 
 export type TAccount = {
   id: number;
-  fistname: string;
-  lastname: string;
   login: string;
+  firstname: string;
+  lastname: string;
   mail: string;
+  last_login_on: string;
 };