chore: use common accession search input field

MassBank · Jan 6, 2025 · cb4c52e · cb4c52e
1 parent 063f6fe
commit cb4c52e
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 86 deletions.
diff --git a/web-frontend/src/elements/common/AccessionSearchInputField.tsx b/web-frontend/src/elements/common/AccessionSearchInputField.tsx
@@ -0,0 +1,81 @@
+import { Button, Input } from 'antd';
+import { Content, Header } from 'antd/es/layout/layout';
+import {
+  ChangeEvent,
+  CSSProperties,
+  KeyboardEvent,
+  useCallback,
+  useState,
+} from 'react';
+import { createSearchParams, useNavigate } from 'react-router-dom';
+import routes from '../../constants/routes';
+
+type InputProps = {
+  width: CSSProperties['width'];
+  height: CSSProperties['height'];
+};
+
+function AccessionSearchInputField({ width, height }: InputProps) {
+  const [accession, setAccession] = useState<string>('');
+  const navigate = useNavigate();
+
+  const handleOnChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setAccession(e.target.value.trim());
+  }, []);
+
+  const handleOnClick = useCallback(
+    () =>
+      navigate({
+        pathname: routes.accession.path,
+        search: `?${createSearchParams({ id: accession })}`,
+      }),
+    [accession, navigate],
+  );
+
+  const handleOnKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleOnClick();
+      }
+    },
+    [handleOnClick],
+  );
+
+  return (
+    <Content style={{ width, height }}>
+      <Header
+        style={{
+          width,
+          height,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+          backgroundColor: 'beige',
+        }}
+      >
+        <Input
+          type="text"
+          placeholder="e.g. MSBNK-AAFC-AC000114"
+          value={accession && accession !== '' ? accession : undefined}
+          addonBefore="Go to accession:"
+          onChange={handleOnChange}
+          onKeyDown={handleOnKeyDown}
+          allowClear
+          style={{ width: 500 }}
+        />
+        <Button
+          children="Search"
+          onClick={handleOnClick}
+          disabled={accession.trim() === ''}
+          style={{ width: 100, marginLeft: 20 }}
+        />
+      </Header>
+    </Content>
+  );
+}
+
+export default AccessionSearchInputField;
diff --git a/web-frontend/src/elements/header/Header.tsx b/web-frontend/src/elements/header/Header.tsx
@@ -53,7 +53,11 @@ function Header() {
           >
             <Link
               to={route.path}
-              style={route.path == location.pathname ? { color: 'blue' } : {}}
+              style={
+                route.path == location.pathname
+                  ? { color: 'blue', fontSize: 16 }
+                  : { fontSize: 16 }
+              }
             >
               {route.label}
             </Link>

diff --git a/web-frontend/src/elements/routes/pages/accession/AccessionView.tsx b/web-frontend/src/elements/routes/pages/accession/AccessionView.tsx
@@ -1,34 +1,21 @@
-import {
-  ChangeEvent,
-  KeyboardEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import RecordView from '../../../record/RecordView';
 import generateID from '../../../../utils/generateID';
 import Record from '../../../../types/Record';
-import {
-  createSearchParams,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
-import routes from '../../../../constants/routes';
+import { useSearchParams } from 'react-router-dom';
 import fetchData from '../../../../utils/fetchData';
-import { Button, Input, Layout, Spin } from 'antd';
+import { Layout, Spin } from 'antd';
 import useContainerDimensions from '../../../../utils/useContainerDimensions';
-import { Content, Header } from 'antd/es/layout/layout';
+import { Content } from 'antd/es/layout/layout';
+import AccessionSearchInputField from '../../../common/AccessionSearchInputField';
 
 function AccessionView() {
   const ref = useRef(null);
   const { height } = useContainerDimensions(ref);
-  const navigate = useNavigate();
+
   const [searchParams] = useSearchParams();
 
   const [isRequesting, setIsRequesting] = useState<boolean>(false);
-  const [accession, setAccession] = useState<string>('');
   const [requestedAccession, setRequestedAccession] = useState<string>('');
   const [record, setRecord] = useState<Record | undefined>();
 
@@ -60,15 +47,6 @@ function AccessionView() {
     setIsRequesting(false);
   }, []);
 
-  const handleOnClick = useCallback(
-    () =>
-      navigate({
-        pathname: routes.accession.path,
-        search: `?${createSearchParams({ id: accession })}`,
-      }),
-    [accession, navigate],
-  );
-
   const recordView = useMemo(
     () =>
       record ? (
@@ -84,60 +62,16 @@ function AccessionView() {
   useEffect(() => {
     const id = searchParams.get('id');
     if (id) {
-      setAccession(id);
       handleOnSearch(id);
     }
   }, [handleOnSearch, searchParams]);
 
-  const handleOnChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setAccession(e.target.value.trim());
-  }, []);
-
-  const handleOnKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleOnClick();
-      }
-    },
-    [handleOnClick],
-  );
-
   const headerHeight = 50;
 
   return useMemo(
     () => (
       <Layout ref={ref} style={{ width: '100%', height: '100%' }}>
-        <Header
-          style={{
-            width: '100%',
-            height: headerHeight,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            textAlign: 'center',
-            backgroundColor: 'beige',
-          }}
-        >
-          <Input
-            type="text"
-            placeholder="e.g. MSBNK-AAFC-AC000114"
-            value={accession && accession !== '' ? accession : undefined}
-            addonBefore="Go to accession:"
-            onChange={handleOnChange}
-            onKeyDown={handleOnKeyDown}
-            allowClear
-            style={{ width: 500 }}
-          />
-          <Button
-            children="Search"
-            onClick={handleOnClick}
-            disabled={accession.trim() === ''}
-            style={{ width: 100, marginLeft: 20 }}
-          />
-        </Header>
+        <AccessionSearchInputField width="100%" height={headerHeight} />
         <Content
           style={{
             width: '100%',
@@ -152,15 +86,7 @@ function AccessionView() {
       </Layout>
     ),
 
-    [
-      accession,
-      handleOnChange,
-      handleOnClick,
-      handleOnKeyDown,
-      height,
-      isRequesting,
-      recordView,
-    ],
+    [height, isRequesting, recordView],
   );
 }
 

diff --git a/web-frontend/src/elements/routes/pages/home/HomeView.tsx b/web-frontend/src/elements/routes/pages/home/HomeView.tsx
@@ -1,8 +1,50 @@
+import Layout, { Content } from 'antd/es/layout/layout';
+import { useRef } from 'react';
+import AccessionSearchInputField from '../../../common/AccessionSearchInputField';
+import useContainerDimensions from '../../../../utils/useContainerDimensions';
+
+const accessionSearchInputFieldHeight = 50;
+
 function HomeView() {
+  const ref = useRef(null);
+  const { height } = useContainerDimensions(ref);
+
   return (
-    <div>
-      <h2>Home View</h2>
-    </div>
+    <Layout
+      ref={ref}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <AccessionSearchInputField
+        width="100%"
+        height={accessionSearchInputFieldHeight}
+      />
+      <Content
+        style={{
+          width: '100%',
+          height: height - accessionSearchInputFieldHeight,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <p style={{ fontWeight: 'bold', fontSize: 18 }}>
+          Welcome to MassBank Europe!
+        </p>
+        <p style={{ textAlign: 'center' }}>
+          MassBank is a community effort and you are invited to contribute.
+          Please refer to our contributor documentation and get in touch via
+          github or email.
+        </p>
+      </Content>
+    </Layout>
   );
 }