feat: Add public profile

Author: wzrdx

src/components/account/profile/EditPublicProfile.tsx

@@ -0,0 +1,137 @@
+import { Button } from '@heroui/button';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { updatePublicProfileInfo } from '@lib/api/backend';
+import { buildPublicProfileSchema } from '@schemas/profile';
+import InputWithLabel from '@shared/InputWithLabel';
+import Label from '@shared/Label';
+import StyledInput from '@shared/StyledInput';
+import { PublicProfileInfo } from '@typedefs/general';
+import { useMemo, useState } from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import z from 'zod';
+
+const PLATFORM_NAMES = {
+    Linkedin: 'LinkedIn',
+};
+
+export default function EditPublicProfile({
+    profileInfo,
+    brandingPlatforms,
+    setEditing,
+    onEdit,
+}: {
+    profileInfo: PublicProfileInfo;
+    brandingPlatforms: string[];
+    setEditing: (editing: boolean) => void;
+    onEdit: () => void;
+}) {
+    const schema = useMemo(() => buildPublicProfileSchema(brandingPlatforms), [brandingPlatforms]);
+    type FormValues = z.infer<typeof schema>;
+
+    const [isLoading, setLoading] = useState<boolean>(false);
+
+    const defaultValues: FormValues = useMemo(() => {
+        const emptyLinks = brandingPlatforms.reduce(
+            (acc, platform) => {
+                acc[platform] = '';
+                return acc;
+            },
+            {} as Record<string, string>,
+        );
+
+        const values = {
+            name: profileInfo.name ?? '',
+            description: profileInfo.description ?? '',
+            links: {
+                ...emptyLinks,
+                ...profileInfo.links,
+            },
+        };
+
+        return values;
+    }, [profileInfo, brandingPlatforms]);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        mode: 'onTouched',
+        defaultValues,
+        shouldUnregister: true,
+    });
+
+    const { control } = form;
+
+    const onSubmit = async (data: FormValues) => {
+        console.log(data);
+        setLoading(true);
+
+        try {
+            await updatePublicProfileInfo(data);
+            toast.success('Public profile updated successfully.');
+            onEdit();
+        } catch (error) {
+            console.error('Error updating public profile info.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const onError = (errors: any) => {
+        console.log('Validation errors:', errors);
+    };
+
+    return (
+        <FormProvider {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit, onError)}>
+                <div className="col gap-2">
+                    <InputWithLabel name="name" label="Name" placeholder="" />
+                    <InputWithLabel name="description" label="Description" placeholder="None" />
+
+                    <Label value="Links" />
+                    {brandingPlatforms
+                        .sort((a, b) => a.localeCompare(b))
+                        .map((platform, index) => {
+                            return (
+                                <Controller
+                                    key={index}
+                                    name={`links.${platform}`}
+                                    control={control}
+                                    render={({ field, fieldState }) => {
+                                        return (
+                                            <StyledInput
+                                                placeholder={PLATFORM_NAMES[platform] ?? platform}
+                                                value={field.value ?? ''}
+                                                onChange={(e) => {
+                                                    const value = e.target.value;
+                                                    field.onChange(value);
+                                                }}
+                                                onBlur={field.onBlur}
+                                                isInvalid={!!fieldState.error}
+                                                errorMessage={fieldState.error?.message}
+                                            />
+                                        );
+                                    }}
+                                />
+                            );
+                        })}
+
+                    <div className="row mt-2 justify-between">
+                        <Button
+                            className="h-9 border-2 border-slate-200 bg-white data-[hover=true]:opacity-65!"
+                            color="default"
+                            size="sm"
+                            variant="solid"
+                            onPress={() => setEditing(false)}
+                        >
+                            <div className="text-sm">Cancel</div>
+                        </Button>
+
+                        <Button className="h-9" type="submit" color="primary" size="sm" variant="solid" isLoading={isLoading}>
+                            <div className="text-sm">Update profile</div>
+                        </Button>
+                    </div>
+                </div>
+            </form>
+        </FormProvider>
+    );
+}

src/components/account/profile/ImageUpload.tsx

@@ -0,0 +1,78 @@
+import { Button } from '@heroui/button';
+import { uploadProfileImage } from '@lib/api/backend';
+import { useCallback, useRef } from 'react';
+import toast from 'react-hot-toast';
+
+export default function ImageUpload({
+    onUpload,
+    setImageLoading,
+}: {
+    onUpload: () => void;
+    setImageLoading: (loading: boolean) => void;
+}) {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const handleFileChange = useCallback(
+        async (event: React.ChangeEvent<HTMLInputElement>) => {
+            setImageLoading(true);
+
+            const file = event.target.files?.[0];
+
+            if (!file) {
+                return;
+            }
+
+            if (file.size > 500_000) {
+                const message = 'Image size must not exceed 500 KB.';
+                toast.error(message);
+                event.target.value = '';
+                return;
+            }
+
+            try {
+                await uploadProfileImage(file);
+
+                setTimeout(() => {
+                    // Takes into account the response time of the image request
+                    toast.success('Profile image updated successfully.');
+                }, 500);
+                onUpload();
+            } catch (err) {
+                console.error('Profile image upload failed:', err);
+                toast.error('Failed to upload profile image.');
+                setImageLoading(false);
+            } finally {
+                // Reset the input so the same file can be uploaded twice in a row if needed
+                event.target.value = '';
+            }
+        },
+        [onUpload],
+    );
+
+    const handleButtonClick = useCallback(() => {
+        inputRef.current?.click();
+    }, []);
+
+    return (
+        <div className="row gap-2.5">
+            <input
+                ref={inputRef}
+                id="image-input"
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                className="hidden"
+            />
+
+            <Button
+                className="h-9 border-2 border-slate-200 bg-white data-[hover=true]:opacity-65!"
+                color="default"
+                size="sm"
+                variant="solid"
+                onPress={handleButtonClick}
+            >
+                <div className="text-sm">Upload image...</div>
+            </Button>
+        </div>
+    );
+}

src/components/account/profile/Profile.tsx

@@ -0,0 +1,18 @@
+import ProfileSection from './ProfileSection';
+import PublicProfile from './PublicProfile';
+
+export default function Profile() {
+    return (
+        <div className="col items-center gap-6">
+            <ProfileSection title="Public Profile">
+                <PublicProfile />
+            </ProfileSection>
+
+            <ProfileSection title="Account">
+                <div>PersonalInformation</div>
+                {/* TODO: USDC Balance */}
+                {/* <PersonalInformation /> */}
+            </ProfileSection>
+        </div>
+    );
+}

src/components/account/profile/ProfileSection.tsx

@@ -0,0 +1,8 @@
+export default function ProfileSection({ title, children }: { title: React.ReactNode; children: React.ReactNode }) {
+    return (
+        <div className="col w-full max-w-lg items-center gap-3.5">
+            <div className="big-title">{title}</div>
+            {children}
+        </div>
+    );
+}

src/components/account/profile/ProfileSectionWrapper.tsx

@@ -0,0 +1,10 @@
+import { BorderedCard } from '@shared/cards/BorderedCard';
+
+export default function ProfileSectionWrapper({ children }: { children: React.ReactNode }) {
+    return (
+        // TODO: Check rounding
+        <BorderedCard disableWrapper>
+            <div className="col gap-4 px-4 py-3 sm:px-5 sm:py-4">{children}</div>
+        </BorderedCard>
+    );
+}