From d951b1e5c648b56195b6478c8c6cd5933d41389b Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Tue, 5 Mar 2024 18:52:34 -0600
Subject: [PATCH] remove popular filter

---
 src/components/spaces/SpacesIndex/index.tsx | 116 ++++++++------------
 src/modules/search_spaces/actions.ts        |  14 +--
 2 files changed, 48 insertions(+), 82 deletions(-)

diff --git a/src/components/spaces/SpacesIndex/index.tsx b/src/components/spaces/SpacesIndex/index.tsx
index 48b53d1b..3a43155f 100644
--- a/src/components/spaces/SpacesIndex/index.tsx
+++ b/src/components/spaces/SpacesIndex/index.tsx
@@ -9,82 +9,55 @@ import { DropDown } from "~/components/utility/DropDown";
 import { Input } from "~/components/utility/forms";
 import { useAppDispatch, useAppSelector } from "~/modules/hooks";
 import * as search from "~/modules/search_spaces/actions";
-import { SearchSortBy, SearchTimeframe } from "~/modules/search_spaces/actions";
+import { SearchSortBy } from "~/modules/search_spaces/actions";
 
-const sortNames: { [k in SearchSortBy]: string } = {
-  RECOMMENDED: "Recommended",
-  RECENT: "Recent",
-  POPULAR: "Popular",
-};
-
-const timeframeNames: { [k in SearchTimeframe]: string } = {
-  MONTHLY: "Monthly",
-  ALL_TIME: "All Time",
-};
-
-const Filters: FC<{
-  sortBy: SearchSortBy;
-  timeframe: SearchTimeframe;
-  onChangeSortBy(sortBy: SearchSortBy): void;
-  onChangeTimeFrame(timeframe: SearchTimeframe): void;
-}> = ({ sortBy, timeframe, onChangeSortBy, onChangeTimeFrame }) => {
+// Previously we had more than just filter, and we might have more again, so
+// this code is more generic than necessary.
+function Filter<T extends string>({
+  selected,
+  names,
+  onChange,
+}: {
+  selected: T;
+  names: { [k in T]: string };
+  onChange(value: T): void;
+}) {
   return (
-    <div className="flex gap-4">
-      <Filter selected={sortBy} names={sortNames} onChange={onChangeSortBy} />
-      {sortBy === "POPULAR" && (
-        <Filter
-          selected={timeframe}
-          names={timeframeNames}
-          onChange={onChangeTimeFrame}
-        />
-      )}
-    </div>
+    <DropDown
+      openLink={
+        <div className="flex items-center gap-1 rounded-sm px-2 py-1 text-grey-666 hover:bg-[#e3e8ec]">
+          <div>{names[selected]}</div>
+          <Icon name="chevron-down" className="text-sm" />
+        </div>
+      }
+      position="right"
+    >
+      {Object.keys(names).map((key: T) => {
+        return (
+          <CardListElement
+            key={key}
+            header={names[key]}
+            isSelected={selected === key}
+            onClick={() => onChange(key)}
+            closeOnClick={true}
+          />
+        );
+      })}
+    </DropDown>
   );
-};
-
-const Filter: FC<{
-  // TODO - generic over SearchSortBy/SearchTimeframe?
-  selected: string;
-  names: { [k: string]: string };
-  onChange(value: string): void;
-}> = ({ selected, names, onChange }) => (
-  <DropDown
-    openLink={
-      <div className="flex items-center gap-1 rounded-sm px-2 py-1 text-grey-666 hover:bg-[#e3e8ec]">
-        <div>{names[selected]}</div>
-        <Icon name="chevron-down" className="text-sm" />
-      </div>
-    }
-    position="right"
-  >
-    {Object.keys(names).map((key) => {
-      return (
-        <CardListElement
-          key={key}
-          header={names[key]}
-          isSelected={selected === key}
-          onClick={() => {
-            onChange(key);
-          }}
-          closeOnClick={true}
-        />
-      );
-    })}
-  </DropDown>
-);
+}
 
 export const SpacesIndex: FC = () => {
   const dispatch = useAppDispatch();
   const searchSpaces = useAppSelector((state) => state.searchSpaces);
 
   const [sortBy, setSortBy] = useState<SearchSortBy>("RECOMMENDED");
-  const [timeframe, setTimeframe] = useState<SearchTimeframe>("ALL_TIME");
   const [searchValue, setSearchValue] = useState("");
 
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     inputRef.current?.focus();
-  }, [inputRef.current]);
+  }, []);
 
   const loadNextPage = () => {
     dispatch(search.fetchNextPage());
@@ -92,12 +65,11 @@ export const SpacesIndex: FC = () => {
 
   const changeSearchValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
-    setTimeframe("ALL_TIME");
   };
 
   useEffect(() => {
-    dispatch(search.fetch(searchValue, { sortBy, timeframe }));
-  }, [searchValue, sortBy, timeframe]);
+    dispatch(search.fetch(searchValue, { sortBy }));
+  }, [searchValue, sortBy]);
 
   const spaces = searchSpaces.hits || [];
   const hasMorePages =
@@ -120,12 +92,14 @@ export const SpacesIndex: FC = () => {
               onChange={changeSearchValue}
             />
           </div>
-          <div>
-            <Filters
-              sortBy={sortBy}
-              timeframe={timeframe}
-              onChangeSortBy={setSortBy}
-              onChangeTimeFrame={setTimeframe}
+          <div className="flex">
+            <Filter<SearchSortBy>
+              selected={sortBy}
+              onChange={setSortBy}
+              names={{
+                RECOMMENDED: "Recommended",
+                RECENT: "Recent",
+              }}
             />
           </div>
         </div>
diff --git a/src/modules/search_spaces/actions.ts b/src/modules/search_spaces/actions.ts
index 4457f1d5..1cef3ac6 100644
--- a/src/modules/search_spaces/actions.ts
+++ b/src/modules/search_spaces/actions.ts
@@ -7,23 +7,15 @@ import { searchSpaceIndex } from "~/server/algolia/index";
 
 import { SearchFilters } from "./reducer";
 
-export type SearchTimeframe = "ALL_TIME" | "MONTHLY";
-export type SearchSortBy = "POPULAR" | "RECENT" | "RECOMMENDED";
+export type SearchSortBy = "RECENT" | "RECOMMENDED";
 
 export function fetch(
   query = "",
-  options: { sortBy: SearchSortBy; timeframe: SearchTimeframe; page?: number }
+  options: { sortBy: SearchSortBy; page?: number }
 ): AppThunk {
   const filters: SearchFilters = { hitsPerPage: 21, page: options.page || 0 };
   const { sortBy } = options;
 
-  const secondsAtNow = new Date().getTime() / 1000;
-  const secondsInMonth = 60 * 60 * 24 * 30;
-
-  if (sortBy === "POPULAR" && _.get(options, "timeframe") === "MONTHLY") {
-    filters.numericFilters = `created_at_i>${secondsAtNow - secondsInMonth}`;
-  }
-
   if (sortBy === "RECOMMENDED") {
     filters.facetFilters = ["is_recommended: true"];
   }
@@ -54,7 +46,7 @@ export function fetchNextPage(): AppThunk {
     try {
       const results = await searchSpaceIndex().search(searchSpaces.query, {
         ...searchSpaces.filters,
-        page: searchSpaces.page + 1,
+        page: (searchSpaces.page ?? 0) + 1,
       });
       dispatch({ type: "SEARCH_SPACES_NEXT_PAGE", response: results });
       dispatch(spaceActions.fromSearch(results.hits));