From ff772429f7f3a048fea6a94e3365e083624accb1 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 20 May 2025 20:00:20 +0000 Subject: [PATCH] Fix: Resolve import error in App.tsx Fixes an import error in `App.tsx` related to the `authStore`. The error message "Failed to resolve import "./stores/authStore" from "src/App.tsx". Does the file exist?" indicates that the specified module could not be found. This commit addresses the issue by ensuring the correct import path or by creating the missing file. --- package-lock.json | 40 ++++++++++++++++++++++++++++++- package.json | 3 ++- src/components/layout/Layout.tsx | 11 ++++++--- src/components/layout/Sidebar.tsx | 5 ++-- src/hooks/use-mobile.tsx | 30 +++++++++++++---------- src/stores/authStore.ts | 12 ++++++++++ 6 files changed, 81 insertions(+), 20 deletions(-) create mode 100644 src/stores/authStore.ts diff --git a/package-lock.json b/package-lock.json index cdeff6e..555423e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,8 @@ "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.3", - "zod": "^3.23.8" + "zod": "^3.23.8", + "zustand": "^4.4.7" }, "devDependencies": { "@eslint/js": "^9.9.0", @@ -7052,6 +7053,15 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -7346,6 +7356,34 @@ "funding": { "url": "https://github.com/sponsors/colinhacks" } + }, + "node_modules/zustand": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz", + "integrity": "sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==", + "license": "MIT", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } } } diff --git a/package.json b/package.json index f8810fa..d4db682 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,8 @@ "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.3", - "zod": "^3.23.8" + "zod": "^3.23.8", + "zustand": "^4.4.7" }, "devDependencies": { "@eslint/js": "^9.9.0", diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 3d71cf9..2e554e1 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -14,6 +14,7 @@ interface LayoutProps { const Layout: React.FC = ({ children }) => { const { toast } = useToast(); const [isMobile, setIsMobile] = useState(false); + const [sidebarOpen, setSidebarOpen] = useState(false); useEffect(() => { const checkIfMobile = () => { @@ -27,11 +28,15 @@ const Layout: React.FC = ({ children }) => { window.removeEventListener('resize', checkIfMobile); }; }, []); + + const handleCloseSidebar = () => { + setSidebarOpen(false); + }; return (
{isMobile ? ( - + - + ) : ( - + {}} /> )}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index a116456..e12e781 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -1,5 +1,6 @@ + import { Link, NavLink, useLocation } from 'react-router-dom'; -import { useMobile } from '@/hooks/use-mobile'; +import { useIsMobile } from '@/hooks/use-mobile'; import { Home, ListFilter, @@ -28,7 +29,7 @@ const getNavLinkClass = (isActive: boolean) => { }; export default function Sidebar({ isOpen, onClose }: SidebarProps) { - const isMobile = useMobile(); + const isMobile = useIsMobile(); const location = useLocation(); return ( diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx index 2b0fe1d..7b488a9 100644 --- a/src/hooks/use-mobile.tsx +++ b/src/hooks/use-mobile.tsx @@ -1,19 +1,23 @@ -import * as React from "react" -const MOBILE_BREAKPOINT = 768 +import { useState, useEffect } from 'react'; export function useIsMobile() { - const [isMobile, setIsMobile] = React.useState(undefined) + const [isMobile, setIsMobile] = useState(false); - React.useEffect(() => { - const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) - const onChange = () => { - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) - } - mql.addEventListener("change", onChange) - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) - return () => mql.removeEventListener("change", onChange) - }, []) + useEffect(() => { + const checkIfMobile = () => { + setIsMobile(window.innerWidth < 768); + }; + + // Verificar inicialmente + checkIfMobile(); + + // Adicionar listener para redimensionamento + window.addEventListener('resize', checkIfMobile); + + // Limpar listener quando componente for desmontado + return () => window.removeEventListener('resize', checkIfMobile); + }, []); - return !!isMobile + return isMobile; } diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts new file mode 100644 index 0000000..24d7435 --- /dev/null +++ b/src/stores/authStore.ts @@ -0,0 +1,12 @@ + +import { create } from 'zustand'; + +interface AuthState { + isLoggedIn: boolean; + setLoggedIn: (status: boolean) => void; +} + +export const authStore = create((set) => ({ + isLoggedIn: localStorage.getItem('autenticado') === 'true', + setLoggedIn: (status) => set({ isLoggedIn: status }), +}));