Merge pull request #527 from openchatai/staging_ui

Remove sorting copilots
openchatai · Jan 16, 2024 · 3173654 · 3173654
2 parents ae0ced2 + 555b228
commit 3173654
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 58 deletions.
diff --git a/dashboard/app/(main)/_parts/CopilotsContainer.tsx b/dashboard/app/(main)/_parts/CopilotsContainer.tsx
@@ -3,9 +3,8 @@ import React from "react";
 import { GalleryHorizontalEnd } from "lucide-react";
 import { Link } from "@/lib/router-events";
 import useSwr from "swr";
-import { CopilotType, listCopilots } from "@/data/copilot";
+import { listCopilots } from "@/data/copilot";
 import Loading from "../loading";
-import { Filter } from "./Search";
 import _ from "lodash";
 import { EmptyBlock } from "@/components/domain/EmptyBlock";
 import { filterAtom } from "./Search";
@@ -14,34 +13,26 @@ import { Button } from "@/components/ui/button";
 import { format } from "timeago.js";
 import { motion, AnimatePresence } from 'framer-motion';
 
-function customSort(list: CopilotType[], sortBy: Filter["sort"]) {
-  if (sortBy === "last-viewed") {
-    return _.orderBy(list, ["last_viewed", "name"], ["desc", "asc"]);
-  } else if (sortBy === "date-created") {
-    return _.orderBy(list, ["created_at", "name"], ["desc", "asc"]);
-  } else if (sortBy === "alphapetically") {
-    return _.orderBy(list, ["name", "created_at"], ["asc", "desc"]);
-  } else {
-    // Default to alphabetical sorting if sortBy is not recognized
-    return _.orderBy(list, ["name", "created_at"], ["asc", "desc"]);
-  }
-}
 const AnimatedLink = motion(Link);
 
 export function CopilotsContainer() {
   const { data: copilots, isLoading } = useSwr("copilotsList", listCopilots);
-  const { sort, query } = useAtomValue(filterAtom);
+  const { query } = useAtomValue(filterAtom);
 
-  if (isLoading && !copilots)
+  const $copilots = React.useMemo(() => {
+    if (!copilots?.data) return [];
+    if (!query) return copilots.data;
+    return copilots.data.filter((copilot) => {
+      return copilot.name.toLowerCase().includes(query.toLowerCase());
+    });
+  }, [copilots, query]);
+  if (isLoading)
     return (
       <div className="flex-center py-4">
         <Loading />
       </div>
     );
-  const $copilots = customSort(
-    _.filter(copilots?.data, (item) => item.name.toLowerCase().includes(query)),
-    sort,
-  );
+
   return _.isEmpty($copilots) ? (
     <EmptyBlock>
       {_.isEmpty(query) ? (
@@ -61,7 +52,7 @@ export function CopilotsContainer() {
     </EmptyBlock>
   ) : (
     <div className="grid gap-4 py-4 grid-cols-12 copilot__container">
-      {$copilots?.map((copilot, index) => {
+      {$copilots.map((copilot, index) => {
         const copilotUrl = "/copilot/" + copilot.id;
         return (
           <AnimatePresence

diff --git a/dashboard/app/(main)/_parts/Search.tsx b/dashboard/app/(main)/_parts/Search.tsx
@@ -2,31 +2,17 @@
 import { SearchIcon } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { SelectTrigger } from "@radix-ui/react-select";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectValue,
-} from "@/components/ui/select";
 import { atom, useAtom } from "jotai";
 import { DebounceInput } from "react-debounce-input";
 
-const sortFilter = [
-  { label: "Last Viewed", value: "last-viewed" },
-  { label: "Date Created", value: "date-created" },
-  { label: "Alphapetically", value: "alphapetically" },
-  { label: "None", value: "none" },
-] as const;
-
 export type Filter = {
   query: string;
-  sort: (typeof sortFilter)[number]["value"];
 };
+
 export const filterAtom = atom<Filter>({
   query: "",
-  sort: "none",
 });
+
 export const QUERY_KEY = "q";
 export const SORT_KEY = "sort";
 export function Search() {
@@ -57,27 +43,6 @@ export function Search() {
           placeholder="Search Copilots..."
         />
       </div>
-
-      <Select
-        defaultValue={filter.sort}
-        onValueChange={(v) =>
-          setFilter({
-            ...filter,
-            sort: v as Filter["sort"],
-          })
-        }
-      >
-        <SelectTrigger className="text-sm font-semibold">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {sortFilter.map((item) => (
-            <SelectItem className="py-2" key={item.value} value={item.value}>
-              {item.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
     </div>
   );
 }