diff --git a/client/src/components/layout/Layout.tsx b/client/src/components/layout/Layout.tsx index 8cdf1fb..cd9ac96 100644 --- a/client/src/components/layout/Layout.tsx +++ b/client/src/components/layout/Layout.tsx @@ -1,13 +1,26 @@ -import { Outlet } from 'react-router'; +import { Outlet, useLocation } from 'react-router'; +import { useEffect } from 'react'; import Header from './Header'; import { BottomNav } from './BottomNav'; import { MotionConfig } from 'motion/react'; +// starter øverst på siden når man går til en ny side +function ScrollToTop() { + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +} + // felles ramme for alle sider export default function Layout() { return ( // gir mulighet for bruker å skru av animasjoner +
{/* ekstra plass nederst på mobil så bunnmenyen ikke dekker innholdet */} diff --git a/client/src/components/layout/UserLink.tsx b/client/src/components/layout/UserLink.tsx index fcc5f0e..ebcc1db 100644 --- a/client/src/components/layout/UserLink.tsx +++ b/client/src/components/layout/UserLink.tsx @@ -3,6 +3,12 @@ import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined'; import PersonIcon from '@mui/icons-material/Person'; import { useCurrentUser } from '../../lib/useCurrentUser'; +// glir til toppen men hopper rett opp hvis animasjoner er skrudd av +function scrollToTop() { + const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); +} + // brukerikonet går til min side eller til innlogging export function UserLink() { const { user } = useCurrentUser(); @@ -11,6 +17,7 @@ export function UserLink() { `flex text-4xl transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-pink-light ${ isActive ? 'text-primary' : 'text-primary/80 hover:text-primary' diff --git a/client/src/lib/AuthProvider.tsx b/client/src/lib/AuthProvider.tsx index bf4d844..4bf606e 100644 --- a/client/src/lib/AuthProvider.tsx +++ b/client/src/lib/AuthProvider.tsx @@ -1,6 +1,6 @@ import { type ReactNode } from 'react'; import { CombinedGraphQLErrors } from '@apollo/client'; -import { useMutation, useQuery } from '@apollo/client/react'; +import { useMutation, useQuery, useApolloClient } from '@apollo/client/react'; import type { User } from '../types/user'; import { AuthContext } from './authContext'; import { @@ -23,7 +23,9 @@ type AuthProviderProps = { children: ReactNode }; export function AuthProvider({ children }: AuthProviderProps) { // spør serveren hvem som er logget inn - const { data, loading, refetch } = useQuery(ME); + const { data, loading } = useQuery(ME); + // tømmer cachen når bruker byttes + const client = useApolloClient(); const [loginMutation] = useMutation(LOGIN); const [registerMutation] = useMutation(REGISTER); const [logoutMutation] = useMutation(LOGOUT); @@ -38,7 +40,7 @@ export function AuthProvider({ children }: AuthProviderProps) { const continueAsGuest = async () => { try { await guestMutation(); - await refetch(); + await client.resetStore(); return null; } catch (error) { return getErrorMessage(error); @@ -49,7 +51,7 @@ export function AuthProvider({ children }: AuthProviderProps) { const login = async (username: string, password: string) => { try { await loginMutation({ variables: { username, password } }); - await refetch(); + await client.resetStore(); return null; } catch (error) { return getErrorMessage(error); @@ -60,7 +62,7 @@ export function AuthProvider({ children }: AuthProviderProps) { const register = async (username: string, password: string) => { try { await registerMutation({ variables: { username, password } }); - await refetch(); + await client.resetStore(); return null; } catch (error) { return getErrorMessage(error); @@ -69,7 +71,7 @@ export function AuthProvider({ children }: AuthProviderProps) { const logout = async () => { await logoutMutation(); - await refetch(); + await client.resetStore(); }; return ( diff --git a/client/src/routes/ProfilePage.tsx b/client/src/routes/ProfilePage.tsx index 047d777..fdbbbe0 100644 --- a/client/src/routes/ProfilePage.tsx +++ b/client/src/routes/ProfilePage.tsx @@ -241,8 +241,9 @@ export default function ProfilePage() {
{/* oppskriftsfanene */} + {/* minstehøyde så siden ikke krymper og kaster deg opp når fanen byttes */}