wip

src/App.tsx

@@ -12,7 +12,7 @@ import UnauthorizedHandler from './app/auth/components/UnauthorizedHandler.tsx'
 import Protected from './app/auth/components/Protected.tsx'
 
 function App() {
-  const [user] = useUser()
+  const { user } = useUser()
   const postService = new PostsService()
   const mediaService = new MediaService()
   const authService = new AuthService(user)

src/app/auth/components/Protected.tsx

@@ -1,13 +1,17 @@
 import { useUser } from '../../user/userStore.ts'
 import { useNavigate, Outlet } from 'react-router-dom'
+import { useEffect } from 'react'
 
 export default function Protected() {
-  const [user] = useUser()
+  const { user } = useUser()
 
   const navigate = useNavigate()
-  if (!user) {
-    navigate('/login')
-  }
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login')
+    }
+  }, [user, navigate])
 
   return <Outlet />
 }

src/app/auth/components/UnauthorizedHandler.tsx

@@ -9,7 +9,6 @@ export default function UnauthorizedHandler({
 }: PropsWithChildren<UnauthorizedHandlerProps>) {
   const navigate = useNavigate()
   useMessageListener('auth:unauthorized', async () => {
-    console.debug('unauth triggered')
     navigate('/logout')
   })
 

src/app/auth/pages/LoginPage.tsx

@@ -1,10 +1,11 @@
-import { useRef, useState, FormEvent } from 'react'
+import { useRef, useState, FormEvent, useEffect } from 'react'
 import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
 import TextInput from '../../../components/TextInput.tsx'
 import PrimaryButton from '../../../components/PrimaryButton.tsx'
 import { AuthService } from '../authService.ts'
 import { useNavigate } from 'react-router-dom'
 import SecondaryNavButton from '../../../components/SecondaryNavButton.tsx'
+import { useUser } from '../../user/userStore.ts'
 
 interface LoginPageProps {
   authService: AuthService
@@ -19,16 +20,24 @@ export default function LoginPage({ authService }: LoginPageProps) {
   const passwordInputRef = useRef<HTMLInputElement | null>(null)
   const navigate = useNavigate()
 
+  const { user } = useUser()
+
+  useEffect(() => {
+    if (user) {
+      navigate('/')
+    }
+  }, [user, navigate])
+
   const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
     if (!username) {
-      setError("you didn't username D:<")
+      setError("it's not username :(")
       return
     }
 
     if (!password) {
-      setError("you didn't password D:<")
+      setError("it's not password :(")
       return
     }
 
@@ -38,7 +47,6 @@ export default function LoginPage({ authService }: LoginPageProps) {
 
     try {
       await authService.login(username, password)
-      navigate('/')
     } catch (error: unknown) {
       setError(error instanceof Error ? error.message : 'something went terribly wrong')
     } finally {
@@ -60,6 +68,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
                 id="username"
                 value={username}
                 onInput={setUsername}
+                className={'mb-4'}
               />
             </div>
 
@@ -73,6 +82,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
                 id="password"
                 value={password}
                 onInput={setPassword}
+                className={'mb-3'}
               />
             </div>
 

src/app/auth/pages/LogoutPage.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import { AuthService } from '../authService.ts'
 import { useEffect } from 'react'
+import { useUser } from '../../user/userStore.ts'
 
 interface LogoutPageProps {
   authService: AuthService
@@ -8,15 +9,18 @@ interface LogoutPageProps {
 
 export default function LogoutPage({ authService }: LogoutPageProps) {
   const navigate = useNavigate()
+  const { user } = useUser()
 
   useEffect(() => {
-    const timeout = setTimeout(async () => {
+    if (!user) {
       navigate('/login')
-      await authService.logout()
-    })
+    }
+  }, [user, navigate])
 
+  useEffect(() => {
+    const timeout = setTimeout(() => authService.logout())
     return () => clearTimeout(timeout)
-  }, [authService, navigate])
+  }, [authService])
 
   return <></>
 }

src/app/auth/pages/SignupPage.tsx

@@ -155,7 +155,7 @@ function FormInput({ id, value, onInput, error, type = 'text', ref }: FormInputP
         {id}
       </label>
       <TextInput ref={ref} type={type} id={id} value={value} onInput={onInput} />
-      <span className="text-xs h-3 text-red-500">{error}</span>
+      <div className="text-xs h-3 text-red-500">{error}</div>
     </div>
   )
 }

src/app/feed/pages/HomePage.tsx

@@ -16,7 +16,7 @@ interface HomePageProps {
 }
 
 export default function HomePage({ postsService, mediaService }: HomePageProps) {
-  const [user] = useUser()
+  const { user } = useUser()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -36,7 +36,6 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
       try {
         const media = await Promise.all(
           files.map(async ({ file, width, height }) => {
-            console.debug('do mediaService.uploadFile', file, 'width', width, 'height', height)
             const { mediaId, url } = await mediaService.uploadFile(file)
 
             return {

src/app/feed/posts/posts.ts

@@ -23,7 +23,6 @@ export class Post {
   }
 
   public static fromDto(dto: components['schemas']['PublicPostDto']): Post {
-    console.debug('make post', dto)
     return new Post(
       dto.postId,
       dto.content,

src/app/messageBus/messageBus.ts

@@ -11,7 +11,6 @@ export function addMessageListener<E extends keyof MessageTypes>(
   listener: Listener<E>,
 ): Unlisten {
   const handler = async (event: Event) => {
-    console.debug('message received', e, event)
     await listener((event as CustomEvent).detail)
   }
 
@@ -23,6 +22,5 @@ export function addMessageListener<E extends keyof MessageTypes>(
 }
 
 export function dispatchMessage<E extends keyof MessageTypes>(e: E, message: MessageTypes[E]) {
-  console.debug('dispatching message', e, message)
   window.dispatchEvent(new CustomEvent(e, { detail: message }))
 }

src/app/user/userStore.ts

@@ -34,7 +34,11 @@ addMessageListener('auth:logged-out', () => {
   userStore.setState(null)
 })
 
-export const useUser = () => useStore(userStore)
+export const useUser = () => {
+  const [user] = useStore(userStore)
+
+  return { user }
+}
 
 function loadStoredUser(): User | null {
   const json = localStorage.getItem(UserKey)

src/components/NavBar.tsx

@@ -2,7 +2,7 @@ import { useUser } from '../app/user/userStore'
 import NavLinkButton from './NavLinkButton'
 
 export default function NavBar() {
-  const [user] = useUser()
+  const { user } = useUser()
 
   const loggedIn = user != null
 

src/components/NewPostWidget.tsx

@@ -106,7 +106,6 @@ async function createAttachment(file: File): Promise<Attachment> {
   const objectUrl = URL.createObjectURL(file)
   const { width, height } = await getImageFileDimensions(objectUrl)
 
-  console.debug('width', width, 'height', height)
   return {
     id: crypto.randomUUID(),
     file,