From 36f5eef84917bdb22d0b527e03e3868fca989c58 Mon Sep 17 00:00:00 2001
From: john <me@johnmorr.is>
Date: Sat, 17 May 2025 23:18:37 +0200
Subject: [PATCH] wip

---
 src/App.tsx                                    |  2 +-
 src/app/auth/components/Protected.tsx          | 12 ++++++++----
 .../auth/components/UnauthorizedHandler.tsx    |  1 -
 src/app/auth/pages/LoginPage.tsx               | 18 ++++++++++++++----
 src/app/auth/pages/LogoutPage.tsx              | 12 ++++++++----
 src/app/auth/pages/SignupPage.tsx              |  2 +-
 src/app/feed/pages/HomePage.tsx                |  3 +--
 src/app/feed/posts/posts.ts                    |  1 -
 src/app/messageBus/messageBus.ts               |  2 --
 src/app/user/userStore.ts                      |  6 +++++-
 src/components/NavBar.tsx                      |  2 +-
 src/components/NewPostWidget.tsx               |  1 -
 12 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bba7b0f..09459fe 100644
--- a/src/App.tsx
+++ b/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)
diff --git a/src/app/auth/components/Protected.tsx b/src/app/auth/components/Protected.tsx
index c875f0d..ad72109 100644
--- a/src/app/auth/components/Protected.tsx
+++ b/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 />
 }
diff --git a/src/app/auth/components/UnauthorizedHandler.tsx b/src/app/auth/components/UnauthorizedHandler.tsx
index 0c34d64..ed86b31 100644
--- a/src/app/auth/components/UnauthorizedHandler.tsx
+++ b/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')
   })
 
diff --git a/src/app/auth/pages/LoginPage.tsx b/src/app/auth/pages/LoginPage.tsx
index e4cc09b..ec4f0e1 100644
--- a/src/app/auth/pages/LoginPage.tsx
+++ b/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>
 
diff --git a/src/app/auth/pages/LogoutPage.tsx b/src/app/auth/pages/LogoutPage.tsx
index 5311344..8ae4ef4 100644
--- a/src/app/auth/pages/LogoutPage.tsx
+++ b/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 <></>
 }
diff --git a/src/app/auth/pages/SignupPage.tsx b/src/app/auth/pages/SignupPage.tsx
index 61ada31..228fc61 100644
--- a/src/app/auth/pages/SignupPage.tsx
+++ b/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>
   )
 }
diff --git a/src/app/feed/pages/HomePage.tsx b/src/app/feed/pages/HomePage.tsx
index cbb106d..10105af 100644
--- a/src/app/feed/pages/HomePage.tsx
+++ b/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 {
diff --git a/src/app/feed/posts/posts.ts b/src/app/feed/posts/posts.ts
index dc58713..6547e3a 100644
--- a/src/app/feed/posts/posts.ts
+++ b/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,
diff --git a/src/app/messageBus/messageBus.ts b/src/app/messageBus/messageBus.ts
index c428cb8..f02dc81 100644
--- a/src/app/messageBus/messageBus.ts
+++ b/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 }))
 }
diff --git a/src/app/user/userStore.ts b/src/app/user/userStore.ts
index 237301b..052de79 100644
--- a/src/app/user/userStore.ts
+++ b/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)
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index cce9c9d..ac2c8dd 100644
--- a/src/components/NavBar.tsx
+++ b/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
 
diff --git a/src/components/NewPostWidget.tsx b/src/components/NewPostWidget.tsx
index 9a9b945..9d139bf 100644
--- a/src/components/NewPostWidget.tsx
+++ b/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,