improvement: update Content layout

zhanglun · May 20, 2024 · ed312d8 · ed312d8
1 parent 42655b7
commit ed312d8
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 99 deletions.
diff --git a/src/components/ArticleView/adpater/Podcast.tsx b/src/components/ArticleView/adpater/Podcast.tsx
@@ -1,6 +1,6 @@
 import linkifyStr from "linkify-string";
 import he from "he";
-import { Button } from "@/components/ui/button";
+import { Button } from "@radix-ui/themes";
 import { Podcast, db } from "@/helpers/podcastDB";
 import { toast } from "sonner";
 import { busChannel } from "@/helpers/busChannel";

diff --git a/src/components/Subscribes/useRefresh.tsx b/src/components/Subscribes/useRefresh.tsx
@@ -95,21 +95,21 @@ export const useRefresh = () => {
       return ;
     }
 
-    if (!store.userConfig.last_sync_time) {
-      startRefresh();
-    }
-
-    if (
-      store.userConfig.update_interval &&
-      store.userConfig.last_sync_time &&
-      new Date().getTime() -
-        new Date(store.userConfig.last_sync_time).getTime() >
-        store.userConfig.update_interval * 60 * 60 * 1000
-    ) {
-      startRefresh();
-    }
-
-    loop();
+    // if (!store.userConfig.last_sync_time) {
+    //   startRefresh();
+    // }
+
+    // if (
+    //   store.userConfig.update_interval &&
+    //   store.userConfig.last_sync_time &&
+    //   new Date().getTime() -
+    //     new Date(store.userConfig.last_sync_time).getTime() >
+    //     store.userConfig.update_interval * 60 * 60 * 1000
+    // ) {
+    //   startRefresh();
+    // }
+
+    // loop();
 
     return () => {
       clearTimeout(timeRef.current);

diff --git a/src/layout/Setting/Content/DataTable.tsx b/src/layout/Setting/Content/DataTable.tsx
@@ -59,7 +59,7 @@ export function DataTable<TData, TValue>({
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    // getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
@@ -118,7 +118,7 @@ export function DataTable<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <DataTablePagination table={table} />
+      {/* <DataTablePagination table={table} /> */}
     </div>
   );
 }
diff --git a/src/layout/Setting/Content/DataTableFacetedFilter.tsx b/src/layout/Setting/Content/DataTableFacetedFilter.tsx
@@ -3,8 +3,8 @@ import { Column } from "@tanstack/react-table";
 import { Check, LucideIcon, PlusCircle } from "lucide-react";
 
 import { cn } from "@/helpers/cn";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
+import { Button, Badge, Popover, Separator } from "@radix-ui/themes";
+import {} from "@/components/ui/badge";
 import {
   Command,
   CommandEmpty,
@@ -14,12 +14,6 @@ import {
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Separator } from "@/components/ui/separator";
 
 interface DataTableFacetedFilter<TData, TValue> {
   column?: Column<TData, TValue>;
@@ -40,40 +34,27 @@ export function DataTableFacetedFilter<TData, TValue>({
   const selectedValues = new Set(column?.getFilterValue() as string[]);
 
   return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className="text-xs border-dashed"
-        >
-          <PlusCircle className="mr-2 h-4 w-4" />
+    <Popover.Root>
+      <Popover.Trigger>
+        <Button variant="outline">
+          <PlusCircle size={16} />
           {title}
           {selectedValues?.size > 0 && (
             <>
               <Separator orientation="vertical" className="mx-2 h-4" />
-              <Badge
-                variant="secondary"
-                className="rounded-sm px-1 font-normal lg:hidden"
-              >
+              <Badge className="rounded-sm px-1 font-normal lg:hidden">
                 {selectedValues.size}
               </Badge>
               <div className="hidden space-x-1 lg:flex">
                 {selectedValues.size > 2 ? (
-                  <Badge
-                    variant="secondary"
-                    className="rounded-sm px-1 font-normal"
-                  >
+                  <Badge className="rounded-sm px-1 font-normal">
                     {selectedValues.size} selected
                   </Badge>
                 ) : (
                   options
                     .filter((option) => selectedValues.has(option.value))
                     .map((option) => (
-                      <Badge
-                        variant="secondary"
-                        key={option.value}
-                        className="rounded-sm px-1 font-normal"
-                      >
+                      <Badge key={option.value} className="rounded-sm px-1 font-normal">
                         {option.label}
                       </Badge>
                     ))
@@ -82,8 +63,8 @@ export function DataTableFacetedFilter<TData, TValue>({
             </>
           )}
         </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
+      </Popover.Trigger>
+      <Popover.Content className="w-[200px] p-0" align="start">
         <Command>
           <CommandInput placeholder={title} />
           <CommandList>
@@ -101,24 +82,18 @@ export function DataTableFacetedFilter<TData, TValue>({
                         selectedValues.add(option.value);
                       }
                       const filterValues = Array.from(selectedValues);
-                      column?.setFilterValue(
-                        filterValues.length ? filterValues : undefined,
-                      );
+                      column?.setFilterValue(filterValues.length ? filterValues : undefined);
                     }}
                   >
                     <div
                       className={cn(
                         "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible",
+                        isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                       )}
                     >
                       <Check className={cn("h-4 w-4")} />
                     </div>
-                    {option.icon && (
-                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                    )}
+                    {option.icon && <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />}
                     <span>{option.label}</span>
                     {facets?.get(option.value) && (
                       <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
@@ -144,7 +119,7 @@ export function DataTableFacetedFilter<TData, TValue>({
             )}
           </CommandList>
         </Command>
-      </PopoverContent>
-    </Popover>
+      </Popover.Content>
+    </Popover.Root>
   );
 }
diff --git a/src/layout/Setting/Content/DataTableToolbar.tsx b/src/layout/Setting/Content/DataTableToolbar.tsx
@@ -2,12 +2,11 @@
 
 import { X, Frown, Laugh, FolderIcon } from "lucide-react";
 import { Table } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import * as dataAgent from "@/helpers/dataAgent";
 import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
 import { useEffect, useState } from "react";
 import { Folder } from "@/db";
+import { TextField, Button } from "@radix-ui/themes";
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
@@ -33,8 +32,8 @@ export function DataTableToolbar<TData>({
   const [folderList, setFolderList] = useState<Folder[]>([]);
 
   const getFolderList = () => {
-    dataAgent.getFolders().then((res) => {
-      setFolderList(res || []);
+    dataAgent.getFolders().then(({ data }) => {
+      setFolderList(data || []);
     });
   };
 
@@ -45,7 +44,7 @@ export function DataTableToolbar<TData>({
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-2">
-        <Input
+        <TextField.Root
           placeholder="Filter feeds..."
           value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
           onChange={(event) =>

diff --git a/src/layout/Setting/Content/Feed.tsx b/src/layout/Setting/Content/Feed.tsx
@@ -145,13 +145,6 @@ export const Feed = () => {
     }),
   ];
 
-  const handleSearch = (v: string) => {
-    setFilterParams({
-      ...filterParams,
-      searchText: v,
-    });
-  };
-
   const getList = async (params = {}) => {
     dataAgent.getChannels(params).then(({ data }) => {
       console.log("%c Line:157 🍢 data", "color:#3f7cff", data);
@@ -186,7 +179,7 @@ export const Feed = () => {
   }, []);
 
   return (
-    <div className="pt-2">
+    <div className="">
       <DataTable
         // @ts-ignore
         columns={columns}

diff --git a/src/layout/Setting/Content/FolderList.tsx b/src/layout/Setting/Content/FolderList.tsx
@@ -65,12 +65,13 @@ export const FolderList = () => {
   ];
 
   const getFolderList = () => {
-    dataAgent.getFolders().then((res) => {
-      setFolderList(res || []);
+    dataAgent.getFolders().then(({ data }) => {
+      setFolderList(data || []);
     });
   };
 
   useEffect(() => {
+    console.log('folder effect')
     getFolderList();
   }, []);
 

diff --git a/src/layout/Setting/Content/index.tsx b/src/layout/Setting/Content/index.tsx
@@ -1,34 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Panel } from "../Panel";
 import { Feed } from "./Feed";
 import { FolderList } from "./FolderList";
-import { Callout } from "@radix-ui/themes";
-import { AlertCircleIcon } from "lucide-react";
+import { SegmentedControl } from "@radix-ui/themes";
 
 export const FeedManager = () => {
+  const [currentSegmented, setCurrentSegmented] = useState("1");
+
   return (
     <Panel title="Content">
-      <Callout.Root color="red" role="alert">
-        <Callout.Icon>
-          <AlertCircleIcon />
-        </Callout.Icon>
-        <Callout.Text>
-          This feature will be removed in the future, and Letura will provide a better content management feature.{" "}
-        </Callout.Text>
-      </Callout.Root>
-      <Tabs defaultValue="1">
-        <TabsList className="grid w-[240px] grid-cols-2">
-          <TabsTrigger value="1">Feeds</TabsTrigger>
-          <TabsTrigger value="2">Folders</TabsTrigger>
-        </TabsList>
-        <TabsContent value="1">
-          <Feed />
-        </TabsContent>
-        <TabsContent value={"2"}>
-          <FolderList />
-        </TabsContent>
-      </Tabs>
+      <SegmentedControl.Root
+        defaultValue="1"
+        onValueChange={(v: string) => {
+          setCurrentSegmented(v);
+        }}
+      >
+        <SegmentedControl.Item value="1">Feeds</SegmentedControl.Item>
+        <SegmentedControl.Item value="2">Folders</SegmentedControl.Item>
+      </SegmentedControl.Root>
+      <div>
+        {currentSegmented === "1" && <Feed />}
+        {currentSegmented === "2" && <FolderList />}
+      </div>
     </Panel>
   );
 };
diff --git a/src/layout/Setting/index.tsx b/src/layout/Setting/index.tsx
@@ -43,8 +43,8 @@ export function SettingPage() {
             </nav>
           </div>
         </div>
-        <div className="flex-1 pt-16 flex justify-center overflow-auto h-[calc(100vh-theme(margin.4))] rounded-md lg:px-0 px-5">
-          <div className="max-w-[640px] w-full">
+        <div className="flex-1 pt-16 flex justify-center overflow-auto rounded-md px-5">
+          <div className="max-w-[980px] w-full">
             <Outlet />
           </div>
         </div>