Merge pull request #19 from LMacPhail/sort-by-winning-likelihood

Sort by winning likelihood

Author: LMacPhail

src/components/Header.tsx

@@ -3,6 +3,7 @@ import { ProjectTitle } from "./atoms/ProjectTitle";
 import { ViewType } from "../data/types";
 import { SET_VIEW_ACTION } from "../state/actions";
 import { useDispatch } from "react-redux";
+import { SearchInput } from "./filters/SearchInput";
 
 export const Header: React.FC<{
   view: "about" | "index";
@@ -15,14 +16,14 @@ export const Header: React.FC<{
   return (
     <header className="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 sm:py-4 md:pl-72 dark:bg-gray-800 dark:border-gray-700">
       <nav
-        className="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8"
+        className="flex flex-wrap justify-between flex-row gap-2 basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8"
         aria-label="Global"
       >
         <div className="mr-5 md:mr-0 md:hidden">
           <ProjectTitle />
         </div>
 
-        <div className="w-full flex items-center justify-end ml-auto sm:justify-between sm:gap-x-3 sm:order-3">
+        <div className="flex items-center justify-between sm:gap-x-3 sm:order-3">
           <div className="flex gap-2">
             <button
               className={`btn btn-${
@@ -42,6 +43,7 @@ export const Header: React.FC<{
             </button>
           </div>
         </div>
+        <SearchInput />
       </nav>
     </header>
   );

src/components/Main.tsx

@@ -4,7 +4,7 @@ import MPIndex from "./content/MPIndex";
 
 const Main: React.FC<{ view: "about" | "index" }> = ({ view }) => {
   return (
-    <div className="w-full pt-10 px-4 sm:px-6 md:px-8 md:pl-80">
+    <div className="w-full pt-4 px-4 sm:px-6 md:px-8 md:pl-80">
       {view === "about" && <About />}
       {view === "index" && <MPIndex />}
     </div>

src/components/atoms/Link.tsx

@@ -0,0 +1,10 @@
+const TextLink: React.FC<{ children: React.ReactNode; link: string }> = ({
+  children,
+  link,
+}) => (
+  <a className="text-link" href={link} target="_blank" rel="noreferrer">
+    {children}
+  </a>
+);
+
+export default TextLink;

src/components/content/About.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import TextLink from "../atoms/Link";
 
 const faqs: { question: string; answer: JSX.Element }[] = [
   {
@@ -131,14 +132,9 @@ const faqs: { question: string; answer: JSX.Element }[] = [
       <p>
         This tool was made by volunteer researchers from the{" "}
         <span>
-          <a
-            className="text-link"
-            href="http://mvmtresearch.org"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <TextLink link="http://mvmtresearch.org">
             Movement Research Unit
-          </a>
+          </TextLink>
         </span>
         . We do practical research in support of social movements and campaign
         groups.
@@ -151,25 +147,15 @@ const faqs: { question: string; answer: JSX.Element }[] = [
       <p>
         There are two ways: you can{" "}
         <span>
-          <a
-            className="text-link"
-            href="https://go.mvmtresearch.org/join"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <TextLink link="https://go.mvmtresearch.org/join">
             get involved
-          </a>
+          </TextLink>
         </span>{" "}
         (no research experience necessary) or you can{" "}
         <span>
-          <a
-            className="text-link"
-            href="https://donate.stripe.com/bIY6rig2w5ohat24gg"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <TextLink link="https://donate.stripe.com/bIY6rig2w5ohat24gg">
             donate
-          </a>
+          </TextLink>
         </span>{" "}
         to cover our running costs.
       </p>

src/components/content/FormattedContent.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { extractLinks } from "../../data/utils/string";
+import TextLink from "../atoms/Link";
 
 export const FormattedContent: React.FC<{
   subHeader: string;
@@ -21,14 +22,7 @@ export const FormattedContent: React.FC<{
             <li key={i}>
               {formattedPoint.content}{" "}
               {formattedPoint.link?.[0] && (
-                <a
-                  className="text-link"
-                  href={formattedPoint.link[0]}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  (source)
-                </a>
+                <TextLink link={formattedPoint.link[0]}>(source)</TextLink>
               )}
             </li>
           ))}
@@ -37,14 +31,7 @@ export const FormattedContent: React.FC<{
         <>
           {formattedContent[0].content}{" "}
           {formattedContent[0].link && formattedContent[0].link.length > 0 && (
-            <a
-              className="text-link"
-              href={formattedContent[0]?.link[0]}
-              target="_blank"
-              rel="noreferrer"
-            >
-              (source)
-            </a>
+            <TextLink link={formattedContent[0]?.link[0]}>(source)</TextLink>
           )}
         </>
       )}

src/components/content/MPIndex.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo, useState } from "react";
 import { Accordion } from "./Accordion";
-import { filterProfiles } from "../../data/utils/utils";
+import { filterProfiles, sortByWin } from "../../data/utils/utils";
 import { useSelector } from "react-redux";
 import { AppState } from "../../state/store";
 import { MP } from "../../data/types";
 import { Spinner } from "../atoms/Spinner";
-import { Filters } from "../filters/Filters";
 
 const MPIndex: React.FC = () => {
   const filters = useSelector((state: AppState) => state.activeFilters);
@@ -14,7 +13,16 @@ const MPIndex: React.FC = () => {
   const [mps, setMPs] = useState<MP[]>(filterProfiles(profiles, filters));
 
   useMemo(() => {
-    setMPs(filterProfiles(profiles, filters));
+    if (filters.sortDescending !== undefined) {
+      setMPs(
+        sortByWin(
+          filterProfiles(profiles, filters).slice(),
+          filters.sortDescending
+        )
+      );
+    } else {
+      setMPs(filterProfiles(profiles, filters));
+    }
   }, [filters, profiles]);
 
   return (
@@ -24,8 +32,7 @@ const MPIndex: React.FC = () => {
           <Spinner />
         </div>
       ) : (
-        <div className="flex flex-col">
-          <Filters />
+        <div className="flex flex-col gap-4">
           <Accordion mps={mps} />
         </div>
       )}

src/components/filters/Filters.tsx

@@ -1,48 +1,54 @@
-import React from "react";
-import { SearchInput } from "../SearchInput";
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { SET_SORTBY_ACTION } from "../../state/actions";
+import TextLink from "../atoms/Link";
 
-export const Filters: React.FC = () => {
-  return (
-    <div className="">
-      <SearchInput />
-    </div>
-  );
-};
-
-// type SelectedSortDirection = "ascending" | "descending";
+type SelectedSortDirection = "ascending" | "descending";
+const DESCENDING_OPT_TEXT = "Most Likely";
+const ASCENDING_OPT_TEXT = "Least Likely";
 
-// TODO: Not make this break everything
-// const SortByDropdown: React.FC = () => {
-//   const dispatch = useDispatch();
-//   const profiles = useSelector((state: AppState) => state.data.profiles);
+export const SortByDropdown: React.FC = () => {
+  const dispatch = useDispatch();
 
-//   const [sortDirection, setSortDirection] = useState<
-//     SelectedSortDirection | undefined
-//   >(undefined);
+  const [sortDirection, setSortDirection] = useState<
+    SelectedSortDirection | undefined
+  >("descending");
 
-//   const handleSelectChange = (value: SelectedSortDirection) => {
-//     const sortedProfiles = sortByWin(profiles, value === "descending");
-//     dispatch({
-//       type: SET_DATA_ACTION,
-//       payload: { profiles: sortedProfiles, status: "complete" },
-//     });
-//     setSortDirection(value);
-//   };
+  const handleSelectChange = (value: SelectedSortDirection) => {
+    dispatch({
+      type: SET_SORTBY_ACTION,
+      payload: { descending: value === "descending" },
+    });
+    setSortDirection(value);
+  };
 
-//   return (
-//     <select
-//       className="select select-ghost-primary"
-//       value={sortDirection}
-//       onChange={(event) =>
-//         handleSelectChange(event.target.value as SelectedSortDirection)
-//       }
-//       aria-label="sort profiles"
-//     >
-//       {sortDirection === undefined && (
-//         <option>Sort by chance of winning</option>
-//       )}
-//       <option>Most Likely to Win</option>
-//       <option>Least Likely to Win</option>
-//     </select>
-//   );
-// };
+  return (
+    <div>
+      <span className="text-xs">
+        Sort by likeliness to win:{" "}
+        <TextLink link="https://www.electoralcalculus.co.uk/">
+          (source)
+        </TextLink>
+      </span>
+      <select
+        className="select select-ghost-primary select-sm"
+        value={
+          sortDirection === "descending"
+            ? DESCENDING_OPT_TEXT
+            : ASCENDING_OPT_TEXT
+        }
+        onChange={(event) =>
+          handleSelectChange(
+            event.target.value === DESCENDING_OPT_TEXT
+              ? "descending"
+              : "ascending"
+          )
+        }
+        aria-label="sort profiles"
+      >
+        <option key={"descending"}>{DESCENDING_OPT_TEXT}</option>
+        <option key={"ascending"}>{ASCENDING_OPT_TEXT}</option>
+      </select>
+    </div>
+  );
+};

src/components/SearchInput.tsx renamed to src/components/filters/SearchInput.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { SET_SEARCH_INPUT_ACTION } from "../state/actions";
+import { SET_SEARCH_INPUT_ACTION } from "../../state/actions";
 
 export const SearchInput: React.FC = () => {
   const dispatch = useDispatch();
   const handleSearchChange = (value: string) => {
     dispatch({ type: SET_SEARCH_INPUT_ACTION, payload: { value } });
   };
   return (
-    <>
+    <div className="max-[300px]:w-auto min-[300px]:min-w-[280px]">
       <label htmlFor="icon" className="sr-only">
         Search
       </label>
@@ -34,6 +34,6 @@ export const SearchInput: React.FC = () => {
           onChange={(e) => handleSearchChange(e.currentTarget.value)}
         />
       </div>
-    </>
+    </div>
   );
 };

src/components/sidebar/Footer.tsx

@@ -1,38 +1,31 @@
 import React from "react";
+import TextLink from "../atoms/Link";
+import { GithubLogo } from "@phosphor-icons/react";
 
-// TODO: Make templates for some of these links that get reused
 export const Footer: React.FC = () => {
   return (
     <div className="text-sm flex flex-col gap-2">
       <div className="divider"></div>
       <p>
         Built by volunteers at the{" "}
-        <a
-          className="text-link"
-          href="http://mvmtresearch.org"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Movement Research Unit.
-        </a>
+        <TextLink link="http://mvmtresearch.org">
+          Movement Research Unit
+        </TextLink>
+        .
       </p>
       <p>Questions or changes: [email protected]</p>
-      <a
-        className="text-link"
-        href="https://donate.stripe.com/bIY6rig2w5ohat24gg"
-        target="_blank"
-        rel="noreferrer"
-      >
+      <TextLink link="https://donate.stripe.com/bIY6rig2w5ohat24gg">
         Support our work.
-      </a>
-      <a
-        className="text-link"
-        href="https://go.mvmtresearch.org/join"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Get involved.
-      </a>
+      </TextLink>
+      <TextLink link="https://go.mvmtresearch.org/join">Get involved.</TextLink>
+      <TextLink link="https://github.com/LMacPhail/labour-mru">
+        <span className="flex flex-row gap-2 items-center">
+          Contribute on Github{" "}
+          <span>
+            <GithubLogo size={18} />
+          </span>
+        </span>
+      </TextLink>
     </div>
   );
 };

src/components/sidebar/SidebarContent.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ProjectTitle } from "../atoms/ProjectTitle";
 import { Footer } from "./Footer";
 import { PolicyStance } from "../filters/PolicyStance";
+import { SortByDropdown } from "../filters/Filters";
 
 export const SidebarContent: React.FC = () => {
   return (
@@ -10,6 +11,7 @@ export const SidebarContent: React.FC = () => {
         <ProjectTitle />
         <div className="divider"></div>
       </div>
+      <SortByDropdown />
       <PolicyStance />
       <Footer />
     </div>