0.1.5

resources/js/components/ui/app-sidebar.jsx

@@ -8,10 +8,15 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 
+import { useToast } from '@/hooks/use-toast.js';
+
 export function AppSidebar({ auth }) {
 
     const { tags } = usePage().props;
     const [search, setSearch] = useState('');
+    const [historyDisabled, setHistoryDisabled] = useState(false);
+
+    const { toast } = useToast();
 
     const searchOnSubmitHandler = (e) => {
         e.preventDefault();
@@ -68,9 +73,22 @@ export function AppSidebar({ auth }) {
 
     const [theme, setTheme] = useState(getTheme());
 
+    const toggleHistoryButtonHandler = () => {
+        axios.post(route('comics.toggleHistory')).then(res => {
+            setHistoryDisabled(res.data.historyDisabled);
+            toast({
+                title: "All set",
+                description: `Histories are now ${ res.data.historyDisabled ? 'Disabled' : 'Enabled' }`,
+            });
+        });
+    }
+
     useEffect(() => {
         setTheme(getTheme());
         setThemeInHtml(getTheme());
+
+        // Set historyDisabled
+        setHistoryDisabled(auth.user.historyDisabled);
     }, []);
 
     return (
@@ -86,7 +104,7 @@ export function AppSidebar({ auth }) {
                                     </div>
                                     <div className="flex flex-col gap-0.5 leading-none">
                                         <span className="font-semibold">Comic</span>
-                                        <span>0.1.4</span>
+                                        <span>0.1.5</span>
                                     </div>
                                 </Link>
                             </SidebarMenuButton>
@@ -214,13 +232,13 @@ export function AppSidebar({ auth }) {
                                 </DropdownMenuLabel>
                                 <DropdownMenuSeparator />
                                 <DropdownMenuGroup>
-                                    <DropdownMenuItem>
-                                        <SquarePower /> History On
+                                    <DropdownMenuItem onClick={ () => toggleHistoryButtonHandler() }>
+                                        <SquarePower /> { (historyDisabled) ? "History Off" : "History On" }
                                     </DropdownMenuItem>
                                     <DropdownMenuItem onClick={ () => themeButtonOnclickHandler() }>
                                         <>{ theme === 'dark' ? (<Sun />) : (<Moon />) } Toggle theme</>
                                     </DropdownMenuItem>
-                                    <DropdownMenuItem asChild><a href="/queues" target="_blank"><Layers /> Queues</a></DropdownMenuItem>
+                                    <DropdownMenuItem asChild><a href="/horizon" target="_blank"><Layers /> Queues</a></DropdownMenuItem>
                                     <DropdownMenuItem asChild><Link href={ route('profile.edit') }><BadgeCheck /> Profile</Link></DropdownMenuItem>
                                     <DropdownMenuItem asChild><Link href={ route('comics.favourites') }><Star /> Favourites</Link></DropdownMenuItem>
                                     <DropdownMenuItem asChild><Link href={ route('comics.histories') }><History /> History</Link></DropdownMenuItem>