Merge pull request #42 from martinbagshaw/chore-convert-logbook-to-typescript

convert logbook list to typescript, organise data and types better

Author: martinbagshaw

src/components/App.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState, FC } from "react";
 import styled from "styled-components";
 
-import { allLogs, OutputObject } from "../utils/formatData";
+import { OutputObject } from "../utils/common-types";
+import { allLogs } from "../utils/processed-data";
 import Stats from "./stats/Stats.jsx";
-import Logbook from "./logbook/Logbook.jsx";
+import Logbook from "./logbook/Logbook";
 
 import { breakpoint, colors, fonts, fontSize } from "./common/styleVars";
 import { buttonBase } from "./common/Buttons.jsx";
@@ -19,7 +20,7 @@ const Header = styled.header`
   display: flex;
 `;
 
-const Button = styled.button<{ readonly isActive: boolean }>`
+const ViewButton = styled.button<{ readonly isActive: boolean }>`
   ${buttonBase};
   display: flex;
   width: 50%;
@@ -33,12 +34,6 @@ const Button = styled.button<{ readonly isActive: boolean }>`
   &:first-child {
     justify-content: flex-end;
   }
-  > span {
-    user-select: none;
-    max-width: 23rem;
-    width: 100%;
-    display: block;
-  }
   &:hover {
     background-color: ${({ isActive }) => colors[isActive ? "lightRed" : "midGrey"]};
   }
@@ -50,6 +45,13 @@ const Button = styled.button<{ readonly isActive: boolean }>`
   `}
 `;
 
+const ViewButtonText = styled.span`
+  user-select: none;
+  max-width: 23rem;
+  width: 100%;
+  display: block;
+`;
+
 const DailyMessage = styled.p`
   text-align: center;
   padding: 0.25rem;
@@ -63,7 +65,7 @@ const ViewContainer = styled.div`
   overflow: hidden;
 `;
 
-const Views = styled.div<{ readonly isLogbook: boolean }>`
+const ViewPanel = styled.div<{ readonly isLogbook: boolean }>`
   display: flex;
   width: 200%;
   ${({ isLogbook }) =>
@@ -78,19 +80,28 @@ const Views = styled.div<{ readonly isLogbook: boolean }>`
   `}
 `;
 
+interface Views {
+  s: string;
+  l: string;
+}
+const views: Views = {
+  s: "Stats",
+  l: "Logbook"
+};
+
 interface Filter {
   day: string;
   month: string;
   year: string;
 }
 const App: FC = () => {
-  const [view, setView] = useState<string>("Stats");
+  const [activeView, setActiveView] = useState<string>(views.s);
   const [logs, setLogs] = useState<OutputObject[]>(allLogs);
   const [message, setMessage] = useState<string | null>(null);
 
   const handleSingleDay = (logs: OutputObject[], filter: Filter) => {
     const { day, month, year } = filter;
-    setView("Logbook");
+    setActiveView(views.l);
     setLogs(logs);
     setMessage(
       `Showing ${logs.length} ${logs.length === 1 ? "log" : "logs"} for: ${day} ${month} ${year}`
@@ -99,37 +110,33 @@ const App: FC = () => {
 
   // reset to original
   useEffect(() => {
-    if (message && view === "Stats") {
+    if (message && activeView === views.s) {
       setLogs(allLogs);
       setMessage(null);
     }
-  }, [message, view]);
+  }, [message, activeView]);
 
   return (
     <Root>
       {message && <DailyMessage>{message}</DailyMessage>}
       <Header>
-        <Button
-          onClick={() => setView("Stats")}
-          isActive={view === "Stats"}
-          aria-label="Stats View"
-        >
-          <span>Stats</span>
-        </Button>
-        <Button
-          onClick={() => setView("Logbook")}
-          isActive={view === "Logbook"}
-          aria-label="Logbook View"
-        >
-          <span>Logbook</span>
-        </Button>
+        {Object.values(views).map(view => (
+          <ViewButton
+            key={view}
+            onClick={() => setActiveView(view)}
+            isActive={activeView === view}
+            aria-label={`${view} View`}
+          >
+            <ViewButtonText>{view}</ViewButtonText>
+          </ViewButton>
+        ))}
       </Header>
 
       <ViewContainer>
-        <Views isLogbook={view === "Logbook"}>
+        <ViewPanel isLogbook={activeView === views.l}>
           <Stats logs={logs} handleSingleDay={handleSingleDay} />
           <Logbook logs={logs} />
-        </Views>
+        </ViewPanel>
       </ViewContainer>
     </Root>
   );

src/components/logbook/Logbook.jsx renamed to src/components/logbook/Logbook.tsx

@@ -1,29 +1,34 @@
-import React, { useState, Fragment } from "react";
+import React, { useState, Fragment, FC } from "react";
 import styled from "styled-components";
 
-import Search from "./Search.jsx";
-import SearchReset from "./SearchReset.jsx";
-import PageNav from "./PageNav.jsx";
-import Results from "./Results.jsx";
+import { OutputObject, DefaultSearch } from "../../utils/common-types";
+
+import Search from "./Search";
+import SearchReset from "./SearchReset";
+import PageNav from "./PageNav";
+import Results from "./Results";
 import SingleLog from "../singleLog/SingleLog.jsx";
 
 const LogContainer = styled.div`
   width: 50%;
 `;
 
-const defaultSearch = {
+const defaultSearch: DefaultSearch = {
   placeholder: "Search by Climb or Crag name...",
   searchTerm: "",
-  results: [],
+  results: undefined,
 };
 
-const Logbook = ({ logs }) => {
-  const [search, setSearch] = useState({ ...defaultSearch });
-  const [page, setPage] = useState({ low: 0, high: 50 });
-  const [singleLog, setSingleLog] = useState(null);
+interface Props {
+  logs: OutputObject[];
+}
+const Logbook: FC<Props> = ({ logs }) => {
+  const [search, setSearch] = useState<DefaultSearch | void>(defaultSearch);
+  const [page, setPage] = useState<{low: number, high: number}>({ low: 0, high: 50 });
+  const [singleLog, setSingleLog] = useState<OutputObject | undefined>(undefined);
 
-  const handleSearch = value => {
-    const resultsFind = (value, logs) => {
+  const handleSearch = (value: string): DefaultSearch | void => {
+    const findResults = (value: string, logs: OutputObject[]): OutputObject[] | void => {
       if (value.length < 3) return;
       return logs.filter(log => {
         const regex = new RegExp(value, "gi");
@@ -32,11 +37,11 @@ const Logbook = ({ logs }) => {
         return cl.match(regex) || cr.match(regex);
       });
     };
-    const placeholder = value.length > 0 ? "" : "Search by Climb or Crag name...";
-    return setSearch({ placeholder, searchTerm: value, results: resultsFind(value, logs) });
+    const placeholder: string = value.length > 0 ? "" : "Search by Climb or Crag name...";
+    return setSearch({ placeholder, searchTerm: value, results: findResults(value, logs) });
   };
 
-  const handlePageChange = direction => {
+  const handlePageChange = (direction: string) => {
     let { low: newLow, high: newHigh } = page;
     if (direction === "older") {
       setPage({ low: (newLow += 50), high: (newHigh += 50) });
@@ -46,7 +51,8 @@ const Logbook = ({ logs }) => {
     }
   };
 
-  const handleSingleView = index => {
+  // TODO: stricter checking here. Should be ascent-<number>, see OutputObject
+  const handleSingleView = (index: string): void => {
     return setSingleLog(logs.find(i => i.key === index));
   };
 
@@ -56,9 +62,12 @@ const Logbook = ({ logs }) => {
         {!singleLog && (
           <Fragment>
             <Search
-              {...search}
-              handleSearch={e => handleSearch(e.target.value)}
+              handleSearch={handleSearch}
               handleSingleView={handleSingleView}
+              {...search}
+              // placeholder={search.placeholder}
+              // results={search.results}
+              // searchTerm={search.searchTerm}
             />
             <PageNav {...page} logs={logs} handlePageChange={handlePageChange} />
             <Results {...page} logs={logs} handleSingleView={handleSingleView} />
@@ -68,7 +77,7 @@ const Logbook = ({ logs }) => {
       </div>
       <SearchReset
         onClose={() => {
-          setSearch({ ...defaultSearch });
+          setSearch(defaultSearch);
         }}
       />
     </LogContainer>

src/components/logbook/PageNav.jsx renamed to src/components/logbook/PageNav.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import React, { FC } from "react";
 import styled, { css } from "styled-components";
 
+import { OutputObject } from "../../utils/common-types";
+
 import useIsWidth from "../common/useIsWidth.jsx";
 import Chevron from "../common/icons/Chevron.jsx";
 import { buttonBase } from "../common/Buttons.jsx";
@@ -45,6 +47,10 @@ const High = styled(Low)`
   background-color: ${colors.lightRed};
 `;
 
+type ButtonOptions = "left" | "right"
+type ButtonCss = {
+  [key in ButtonOptions]: string;
+}
 const buttonCss = {
   left: css`
     padding-right: 1rem;
@@ -55,7 +61,7 @@ const buttonCss = {
   `,
 };
 
-const Button = styled.button`
+const Button = styled.button<{ readonly direction: keyof ButtonCss }>`
   ${buttonBase};
   line-height: 1;
   display: flex;
@@ -81,9 +87,19 @@ const Button = styled.button`
   }
 `;
 
-const PageNav = ({ logs, low, high, handlePageChange }) => {
+interface Buttons {
+  [key: string]: { condition: boolean, direction: ButtonOptions }
+}
+
+interface Props {
+  logs: OutputObject[];
+  low: number;
+  high: number;
+  handlePageChange: (direction: string) => void;
+}
+const PageNav: FC<Props> = ({ logs, low, high, handlePageChange }) => {
   const { isWidth: isDesktop } = useIsWidth("large");
-  const buttons = {
+  const buttons: Buttons = {
     older: {
       condition: high < logs.length,
       direction: "left",
@@ -102,7 +118,7 @@ const PageNav = ({ logs, low, high, handlePageChange }) => {
           <High>{`${logs.length - low}`}</High> {`of ${logs.length} logs.`}
         </Pagination>
       )}
-      {Object.keys(buttons).map(i => {
+      {Object.keys(buttons).map((i) => {
         const { condition, direction } = buttons[i];
         return (
           condition && (

src/components/logbook/Results.jsx renamed to src/components/logbook/Results.tsx

@@ -1,13 +1,14 @@
-import React from "react";
+import React, { FC } from "react";
 import styled from "styled-components";
 
+import { OutputObject } from "../../utils/common-types";
+
 import useIsWidth from "../common/useIsWidth.jsx";
 import Chevron from "../common/icons/Chevron.jsx";
 import { breakpoint, colors } from "../common/styleVars";
 import { searchResultText } from "../common/Layout.jsx";
 import { buttonBase } from "../common/Buttons.jsx";
-
-import { getDate } from "../../utils/getDate";
+import { getDate } from "../../utils/get-date";
 
 const ResultsList = styled.ul`
   margin: 0 0 3rem;
@@ -82,9 +83,15 @@ const Date = styled.span`
   align-items: center;
 `;
 
-const Results = ({ logs, low, high, handleSingleView }) => {
+interface Props {
+  logs: OutputObject[];
+  low: number;
+  high: number;
+  handleSingleView: (index: string) => void;
+}
+const Results: FC<Props> = ({ logs, low, high, handleSingleView }) => {
   const { isWidth: isDesktop } = useIsWidth("large");
-
+  // TODO: run getDate in processed-data.ts
   return (
     <ResultsList>
       {logs