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
}
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) {
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(null)
const navigate = useNavigate()
+ const { user } = useUser()
+
+ useEffect(() => {
+ if (user) {
+ navigate('/')
+ }
+ }, [user, navigate])
+
const onSubmit = async (e: FormEvent) => {
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'}
/>
@@ -73,6 +82,7 @@ export default function LoginPage({ authService }: LoginPageProps) {
id="password"
value={password}
onInput={setPassword}
+ className={'mb-3'}
/>
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}
- {error}
+ {error}
)
}
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(
listener: Listener,
): 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(
}
export function dispatchMessage(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 {
const objectUrl = URL.createObjectURL(file)
const { width, height } = await getImageFileDimensions(objectUrl)
- console.debug('width', width, 'height', height)
return {
id: crypto.randomUUID(),
file,