From 255fe90ce79269f118cf2ef82c922e1d9111a1b8 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 14 Jun 2024 21:43:37 +0300
Subject: [PATCH] Fix library view for anonymous user

---
 .../src/pages/LibraryPage/LibraryPage.tsx     | 12 +++--
 .../src/pages/LibraryPage/SearchPanel.tsx     | 49 ++++++++++---------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
index e404ef1f..9070a0e3 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import DataLoader from '@/components/wrap/DataLoader';
+import { useAuth } from '@/context/AuthContext';
 import { useLibrary } from '@/context/LibraryContext';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import { ILibraryItem, LocationHead } from '@/models/library';
@@ -15,6 +16,7 @@ import SearchPanel from './SearchPanel';
 
 function LibraryPage() {
   const library = useLibrary();
+  const { user } = useAuth();
   const [items, setItems] = useState<ILibraryItem[]>([]);
 
   const [query, setQuery] = useState('');
@@ -34,12 +36,12 @@ function LibraryPage() {
       head: head,
       path: path,
       query: query,
-      isEditor: isEditor,
-      isOwned: isOwned,
-      isSubscribed: isSubscribed,
-      isVisible: isVisible
+      isEditor: user ? isEditor : undefined,
+      isOwned: user ? isOwned : undefined,
+      isSubscribed: user ? isSubscribed : undefined,
+      isVisible: user ? isVisible : true
     }),
-    [head, path, query, isEditor, isOwned, isSubscribed, isVisible]
+    [head, path, query, isEditor, isOwned, isSubscribed, isVisible, user]
   );
 
   useLayoutEffect(() => {
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index af62af5d..f58719cb 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -11,6 +11,7 @@ import DropdownButton from '@/components/ui/DropdownButton';
 import MiniButton from '@/components/ui/MiniButton';
 import SearchBar from '@/components/ui/SearchBar';
 import SelectorButton from '@/components/ui/SelectorButton';
+import { useAuth } from '@/context/AuthContext';
 import useDropdown from '@/hooks/useDropdown';
 import { LocationHead } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
@@ -58,6 +59,7 @@ function SearchPanel({
   isEditor,
   toggleEditor
 }: SearchPanelProps) {
+  const { user } = useAuth();
   const headMenu = useDropdown();
 
   const handleChange = useCallback(
@@ -83,29 +85,32 @@ function SearchPanel({
         {filtered} из {total}
       </div>
 
-      <div className='cc-icons'>
-        <MiniButton
-          title='Видимость'
-          icon={<VisibilityIcon value={true} className={tripleToggleColor(isVisible)} />}
-          onClick={toggleVisible}
-        />
-        <MiniButton
-          title='Я - Подписчик'
-          icon={<SubscribeIcon value={true} className={tripleToggleColor(isSubscribed)} />}
-          onClick={toggleSubscribed}
-        />
-        <MiniButton
-          title='Я - Владелец'
-          icon={<IconOwner size='1.25rem' className={tripleToggleColor(isOwned)} />}
-          onClick={toggleOwned}
-        />
+      {user ? (
+        <div className='cc-icons'>
+          <MiniButton
+            title='Видимость'
+            icon={<VisibilityIcon value={true} className={tripleToggleColor(isVisible)} />}
+            onClick={toggleVisible}
+          />
+          <MiniButton
+            title='Я - Подписчик'
+            icon={<SubscribeIcon value={true} className={tripleToggleColor(isSubscribed)} />}
+            onClick={toggleSubscribed}
+          />
 
-        <MiniButton
-          title='Я - Редактор'
-          icon={<IconEditor size='1.25rem' className={tripleToggleColor(isEditor)} />}
-          onClick={toggleEditor}
-        />
-      </div>
+          <MiniButton
+            title='Я - Владелец'
+            icon={<IconOwner size='1.25rem' className={tripleToggleColor(isOwned)} />}
+            onClick={toggleOwned}
+          />
+
+          <MiniButton
+            title='Я - Редактор'
+            icon={<IconEditor size='1.25rem' className={tripleToggleColor(isEditor)} />}
+            onClick={toggleEditor}
+          />
+        </div>
+      ) : null}
 
       <div className='flex items-center h-full mx-auto'>
         <SearchBar