From 7e63978aeb9fc2f92116925437279b37e409594d Mon Sep 17 00:00:00 2001 From: Monstar <31903668+Monstarrrr@users.noreply.github.com> Date: Sun, 23 Jun 2024 04:38:43 +0200 Subject: [PATCH 01/18] Added post-new-argument form; Added API base for posting new argument (untested) --- frontend/app/(routes)/(auth)/login/page.tsx | 15 ++- .../app/(routes)/(auth)/register/page.tsx | 15 ++- frontend/app/_api/auth/login.ts | 2 +- frontend/app/_api/posts/index.ts | 1 + frontend/app/_api/posts/newPost.ts | 14 +++ .../app/_components/clientInitializer.tsx | 1 - frontend/app/_components/form.tsx | 33 +++++-- frontend/app/_components/header.tsx | 4 +- frontend/app/_types/FormProps.ts | 2 +- frontend/app/_types/TextInput.ts | 2 +- frontend/app/page.tsx | 93 ++++++++++++++++--- 11 files changed, 151 insertions(+), 31 deletions(-) create mode 100644 frontend/app/_api/posts/index.ts create mode 100644 frontend/app/_api/posts/newPost.ts diff --git a/frontend/app/(routes)/(auth)/login/page.tsx b/frontend/app/(routes)/(auth)/login/page.tsx index ccf1e45..4f2a7c0 100644 --- a/frontend/app/(routes)/(auth)/login/page.tsx +++ b/frontend/app/(routes)/(auth)/login/page.tsx @@ -1,10 +1,10 @@ 'use client' -import { FormEvent, useState } from 'react' +import { FormEvent, useEffect, useState } from 'react' import { Form } from '@/components' import { ApiResponse, TextInput } from '@/types' import { formDataToObj } from '@/helpers' -import { useAppDispatch } from '@/store/hooks' +import { useAppDispatch, useAppSelector } from '@/store/hooks' import { updateUser } from '@/store/slices/user' import { useRouter } from 'next/navigation' import { login, fetchUserInfo } from '@/api/auth' @@ -22,6 +22,7 @@ const loginInputs: TextInput[] = [ value: '', }, ] +const submitButtonLabel = 'Login' const successMessage = 'Logged in successfully.' export default function Login() { @@ -31,6 +32,14 @@ export default function Login() { const dispatch = useAppDispatch() const router = useRouter() + const user = useAppSelector((state) => state.user.username) + + useEffect(() => { + if (user) { + router.push('/') + } + }, [user, router]) + async function handleSubmit(event: FormEvent) { event.preventDefault() setLoading(true) @@ -61,7 +70,7 @@ export default function Login() { onSubmit={handleSubmit} loading={loading} successMessage={success ? successMessage : null} - buttonLabel='Login' + submitButtonLabel={submitButtonLabel} /> ) diff --git a/frontend/app/(routes)/(auth)/register/page.tsx b/frontend/app/(routes)/(auth)/register/page.tsx index b707290..cfd9ded 100644 --- a/frontend/app/(routes)/(auth)/register/page.tsx +++ b/frontend/app/(routes)/(auth)/register/page.tsx @@ -1,15 +1,19 @@ 'use client' -import { FormEvent, useState } from 'react' +import { FormEvent, useEffect, useState } from 'react' import { Form } from '@/components' import { ApiResponse, TextInput } from '@/types' import { formDataToObj } from '@/helpers' import { register } from '@/api/auth/register' +import { useAppSelector } from '@/store/hooks' +import { useRouter } from 'next/navigation' export default function Register() { const [isLoading, setIsLoading] = useState(false) const [apiFormErrors, setApiFormErrors] = useState(null) const [formSuccess, setFormSuccess] = useState(false) + const user = useAppSelector((state) => state.user.username) + const router = useRouter() const registerInputs: TextInput[] = [ { @@ -30,8 +34,15 @@ export default function Register() { value: '', }, ] + const submitButtonLabel = 'Register' const successMessage = 'Check your email to verify your account.' + useEffect(() => { + if (user) { + router.push('/') + } + }, [user, router]) + async function handleSubmit(event: FormEvent) { event.preventDefault() setIsLoading(true) @@ -56,7 +67,7 @@ export default function Register() {

Register

{ }) return response.data } catch (error) { - console.error('# Login request aborted: ', error) + console.error('# Login request failed: ', error) throw error } } diff --git a/frontend/app/_api/posts/index.ts b/frontend/app/_api/posts/index.ts new file mode 100644 index 0000000..afe74c2 --- /dev/null +++ b/frontend/app/_api/posts/index.ts @@ -0,0 +1 @@ +export * from '@/api/posts/newPost' diff --git a/frontend/app/_api/posts/newPost.ts b/frontend/app/_api/posts/newPost.ts new file mode 100644 index 0000000..d089afd --- /dev/null +++ b/frontend/app/_api/posts/newPost.ts @@ -0,0 +1,14 @@ +import { FormDataObj } from '@/types' +import api from '@/api/api' + +export const newPost = async (formData: FormDataObj) => { + try { + const response = await api.post('api/posts', { + ...formData, + }) + return response.data + } catch (error) { + console.error('# "New post" request failed: ', error) + throw error + } +} diff --git a/frontend/app/_components/clientInitializer.tsx b/frontend/app/_components/clientInitializer.tsx index ce4064d..ca870d1 100644 --- a/frontend/app/_components/clientInitializer.tsx +++ b/frontend/app/_components/clientInitializer.tsx @@ -8,7 +8,6 @@ export default function ClientInitializer() { const dispatch = useAppDispatch() useEffect(() => { const handleFetchUserInfo = async () => { - console.log('##### ClientInitializer') try { const userInfo = await fetchUserInfo() dispatch(updateUser(userInfo)) diff --git a/frontend/app/_components/form.tsx b/frontend/app/_components/form.tsx index 3e0993b..2da164e 100644 --- a/frontend/app/_components/form.tsx +++ b/frontend/app/_components/form.tsx @@ -35,7 +35,9 @@ export default function Form(props: FormProps) { }, [formId]) // Currently, only reason we update the state is to cache the fields values - const handleChange = (e: ChangeEvent) => { + const handleChange = ( + e: ChangeEvent | ChangeEvent, + ) => { setInputsState((prev) => prev.map((inputField) => { if (inputField.id === e.target.name) { @@ -88,15 +90,26 @@ export default function Form(props: FormProps) {