added UserInteractionsFilter.tsx

alexholub113 · Nov 27, 2023 · 1a8d3ed · 1a8d3ed
1 parent 55736e9
commit 1a8d3ed
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 6 deletions.
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
@@ -22,7 +22,7 @@ const Button = ({ isLoading, isDisabled, type, className, onClick, children, dis
 
     return (
         <button disabled={isLoading === true || isDisabled === true} type={type ?? 'button'} onClick={handleOnClick} className={`
-        flex items-center justify-center text-center transition text-sm cursor-pointer
+        flex items-center justify-center text-center transition text-sm cursor-pointer outline-none
         ${textColor === 'secondary' ? 'secondary-text-color' : ''}
         ${disableAnimation ? '' : ' hover:scale-105 active:scale-95'}
         ${className} ${isLoading ? ' opacity-70 active:scale-100' : ''}`}>

diff --git a/client/src/screens/LinkList/LinkListScreen.tsx b/client/src/screens/LinkList/LinkListScreen.tsx
@@ -17,7 +17,7 @@ const LinkListScreen = observer(() => {
                 { links.map((link) => (
                     <LinkListItem key={link.id} link={link} />
                 )) }
-                { isListLoading && (
+                { !links.length && isListLoading && (
                     <>
                         <LinkListItemSkeleton />
                         <LinkListItemSkeleton />

diff --git a/client/src/screens/LinkList/components/LinkListToolbar/LinkListToolbar.tsx b/client/src/screens/LinkList/components/LinkListToolbar/LinkListToolbar.tsx
@@ -1,13 +1,15 @@
 import TopTagsList from './components/TopTagsList.tsx';
 import SearchByTitleInput from './components/SearchByTitleInput.tsx';
 import TagSearch from './components/TagSearch.tsx';
+import UserInteractionsFilter from './components/UserInteractionsFilter.tsx';
 
 const LinkListToolbar = () => {
     return (
         <div className="flex flex-col gap-4 w-full md:max-w-screen-md">
             <TopTagsList />
-            <div className="flex flex-row w-full items-center justify-center">
+            <div className="flex flex-row gap-2 w-full items-center justify-center">
                 <TagSearch />
+                <UserInteractionsFilter />
             </div>
             <SearchByTitleInput />
         </div>

diff --git a/client/src/screens/LinkList/components/LinkListToolbar/components/UserInteractionsFilter.tsx b/client/src/screens/LinkList/components/LinkListToolbar/components/UserInteractionsFilter.tsx
@@ -0,0 +1,47 @@
+import {observer} from 'mobx-react-lite';
+import {useLinkStore} from '../../../../../contexts/AppContext.tsx';
+import {PropsWithChildren} from 'react';
+
+type UserInteractionButtonProps = {
+    onClick: () => void;
+    active: boolean;
+    groupSide: 'left' | 'right' | 'middle';
+} & PropsWithChildren;
+
+const UserInteractionsButton = ({onClick, active, children, groupSide}: UserInteractionButtonProps) => (
+    <button onClick={onClick} type="button"
+            className={`inline-flex items-center px-4 py-2 text-sm font-medium border 
+                        border-zinc-800 outline-none secondary-text-color bg-zinc-900 hover:bg-zinc-800
+                                ${active ? 'dark:bg-cyan-700 dark:hover:bg-cyan-600' : ''}
+                                ${groupSide === 'left' ? 'rounded-s-full' : groupSide === 'right' ? 'rounded-e-full' : ''}`}>
+        {children}
+    </button>
+);
+
+const UserInteractionsFilter = observer(() => {
+    const { toggleLikedFilter, toggleSavedFilter, toggleOwnedFilter, state: { filter: { liked, saved, owned }}} = useLinkStore();
+    return (
+        <div className="inline-flex rounded-full shadow-sm" role="group">
+            <UserInteractionsButton onClick={() => toggleLikedFilter()} active={liked} groupSide="left">
+                <svg className="w-3 h-3 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
+                    <path d="M3 7H1a1 1 0 0 0-1 1v8a2 2 0 0 0 4 0V8a1 1 0 0 0-1-1Zm12.954 0H12l1.558-4.5a1.778 1.778 0 0 0-3.331-1.06A24.859 24.859 0 0 1 6 6.8v9.586h.114C8.223 16.969 11.015 18 13.6 18c1.4 0 1.592-.526 1.88-1.317l2.354-7A2 2 0 0 0 15.954 7Z"/>
+                </svg>
+                Liked
+            </UserInteractionsButton>
+            <UserInteractionsButton onClick={() => toggleSavedFilter()} active={saved} groupSide="middle">
+                <svg className="w-3 h-3 me-2 secondary-text-color" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
+                    <path d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z"/>
+                </svg>
+                Saved
+            </UserInteractionsButton>
+            <UserInteractionsButton onClick={() => toggleOwnedFilter()} active={owned} groupSide="right">
+                <svg className="w-3 h-3 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+                </svg>
+                Owned
+            </UserInteractionsButton>
+        </div>
+    );
+});
+
+export default UserInteractionsFilter;
diff --git a/client/src/stores/LinkStore.ts b/client/src/stores/LinkStore.ts
@@ -7,6 +7,9 @@ import PreviewLink from '../services/LinkService/interfaces/PreviewLink.ts';
 type Filter = {
     tags: string[];
     title: string;
+    liked: boolean;
+    saved: boolean;
+    owned: boolean;
 };
 
 type Preview = {
@@ -35,7 +38,10 @@ class LinkStore {
         tags: [],
         filter: {
             tags: [],
-            title: ''
+            title: '',
+            liked: false,
+            saved: false,
+            owned: false,
         },
         preview: {
         }
@@ -65,6 +71,21 @@ class LinkStore {
         await this.getList();
     };
 
+    public toggleLikedFilter = async () => {
+        this.state.filter.liked = !this.state.filter.liked;
+        await this.getList();
+    }
+
+    public toggleSavedFilter = async () => {
+        this.state.filter.saved = !this.state.filter.saved;
+        await this.getList();
+    }
+
+    public toggleOwnedFilter = async () => {
+        this.state.filter.owned = !this.state.filter.owned;
+        await this.getList();
+    }
+
     public setFilterTitle = (title: string) => {
         this.state.filter.title = title;
     };
@@ -173,7 +194,7 @@ class LinkStore {
             this.state.tags = this.state.tags.filter(tag => !tagsToRemove.includes(tag));
             this.state.filter.tags = this.state.filter.tags.filter(tagName => !tagsToRemove.some(tag => tag.name === tagName));
         });
-    }
+    };
 
     public getList = async () => {
         this.state.isListLoading = true;
@@ -186,7 +207,7 @@ class LinkStore {
             this.state.tags = [...new Set<Tag>(response.tags)];
             this.state.isListLoading = false;
         });
-    }
+    };
 }
 
 export default LinkStore;