update profile page styles

Author: Mubangizi

src/components/Cards/OtherCards.tsx

@@ -1,8 +1,8 @@
 import { Box, Card, Divider, Group, Stack, Text, Tooltip } from "@mantine/core";
 import { PiBuildingsBold } from "react-icons/pi";
-import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 import { ProfileAvatar } from "../Common";
 import { Link } from "react-router-dom";
+import { SOCIAL_LINKS_DATA } from "@/utils/constants";
 
 function UserProfileCard({ user }: { user: any }) {
  const userStats = [
@@ -17,11 +17,6 @@ function UserProfileCard({ user }: { user: any }) {
  url: value,
  }));
 
- const socialLinksIcons = {
- github: <FaGithub />,
- linkedin: <FaLinkedin />,
- twitter: <FaTwitter />,
- };
  return (
  <Card withBorder padding="xl" radius="md" w={350}>
  <Card.Section
@@ -43,32 +38,44 @@ function UserProfileCard({ user }: { user: any }) {
  </Text>
  <StatsList stats={userStats} />
  <Divider my="md" />
+ <Stack gap={7}>
+ <Text fz="sm" c="dimmed" ta="center">
+ Joined Cranecloud {user?.age}
+ </Text>
 
- <Text fz="sm" mb="md" c="dimmed" ta="center">
- Joined Cranecloud {user?.age}
- </Text>
- <Stack gap={4}>
  {user?.biography && (
- <Text fz="sm" c="black" ta="center" lineClamp={3} fw={300}>
+ <Text fz="sm" ta="center" lineClamp={3} fw={500}>
  {user?.biography}
  </Text>
  )}
- <Divider my="md" />
-
+ </Stack>
+ <Divider my="md" />
+ <Stack gap={7} fz="sm" fw={500}>
  {user?.organisation && (
- <Group gap={5} fz="0.9rem" fw={600} mt="sm">
- <PiBuildingsBold size={17} />
+ <Group gap={10}>
+ <PiBuildingsBold size={16} />
  {user?.organisation}
  </Group>
  )}
- {links.map((link, index) => (
- <Link key={index} to={link.url as string} target="_blank">
- <Group gap={5} fz="0.9rem">
- {socialLinksIcons[link.platform as keyof typeof socialLinksIcons]}
- {link.url as string}
- </Group>
- </Link>
- ))}
+ {links.map((link, index) => {
+ const platform = SOCIAL_LINKS_DATA.find(
+ (p) => p.value === link.platform,
+ );
+ const IconComponent = platform?.icon;
+
+ return (
+ <Link key={index} to={link.url as string} target="_blank">
+ <Group gap={10} align="center">
+ {IconComponent && (
+ <IconComponent size={16} color={platform?.color} />
+ )}
+ <Text size="sm" style={{ flex: 1 }}>
+ {link.url as string}
+ </Text>
+ </Group>
+ </Link>
+ );
+ })}
  </Stack>
  </Card>
  );

src/components/Forms/UpdateProfileForm.tsx

@@ -1,32 +1,50 @@
-import { Button, Stack, TextInput, Textarea, Group } from "@mantine/core";
-import { useState, useEffect } from "react";
+import {
+ Button,
+ Stack,
+ TextInput,
+ Textarea,
+ Group,
+ ActionIcon,
+ Select,
+} from "@mantine/core";
+import { useEffect, useState } from "react";
 import usePost from "@/utils/usePost";
+import useForm from "@/hooks/generic/useForm";
+import { FaCheck, FaPlus, FaTrashAlt } from "react-icons/fa";
+import { SOCIAL_LINKS_DATA } from "@/utils/constants";
 
 type UpdateProfileForm = {
- user: any; // your user object, can type more strictly if you want
+ user: any;
  onCancel: () => void;
- onSuccess?: () => void;
+ refresh?: () => void;
 };
 
 export const UpdateProfileForm = ({
  user,
  onCancel,
- onSuccess,
+ refresh = () => {},
 }: UpdateProfileForm) => {
- const [username, setUsername] = useState(user?.username || "");
- const [email, setEmail] = useState(user?.email || "");
- const [biography, setBiography] = useState(user?.biography || "");
- const [organisation, setOrganisation] = useState(user?.organisation || "");
+ const { form, onChange, updateFormValues, editedForm } = useForm();
 
  const { uploadData, submitting, success } = usePost();
 
+ useEffect(() => {
+ if (user) {
+ updateFormValues({
+ username: user?.username || "",
+ email: user?.email || "",
+ biography: user?.biography || "",
+ organisation: user?.organisation || "",
+ });
+ }
+ }, []);
+
  useEffect(() => {
  if (success) {
- if (onSuccess) {
- onSuccess();
- }
+ refresh();
+ onCancel();
  }
- }, [success, onSuccess]);
+ }, [success]);
 
  const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
@@ -39,12 +57,7 @@ export const UpdateProfileForm = ({
  api: "users",
  id: user.id,
  method: "PATCH",
- params: {
- username,
- email,
- biography,
- organisation,
- },
+ params: user?.id ? editedForm : form,
  });
  };
 
@@ -55,34 +68,38 @@ export const UpdateProfileForm = ({
  label="Username"
  placeholder="Enter your username"
  description="This will be your public username. Do not use spaces or special characters."
- value={username}
- onChange={(e) => setUsername(e.currentTarget.value)}
+ name="username"
+ value={form.username as string}
+ onChange={onChange}
  required
  />
 
  <TextInput
  label="Email"
  type="email"
  placeholder="Enter your email"
- value={email}
- onChange={(e) => setEmail(e.currentTarget.value)}
+ name="email"
+ value={form.email as string}
+ onChange={onChange}
  disabled
  required
  />
 
  <TextInput
  label="Organisation"
  placeholder="Your organisation or company"
- value={organisation}
- onChange={(e) => setOrganisation(e.currentTarget.value)}
+ name="organisation"
+ value={form.organisation as string}
+ onChange={onChange}
  required
  />
 
  <Textarea
  label="Biography"
  placeholder="Tell us about yourself"
- value={biography}
- onChange={(e) => setBiography(e.currentTarget.value)}
+ name="biography"
+ value={form.biography as string}
+ onChange={onChange}
  maxRows={3}
  />
 
@@ -95,6 +112,7 @@ export const UpdateProfileForm = ({
  loading={submitting}
  variant="filled"
  color="dark"
+ disabled={user?.id && Object.keys(editedForm).length <= 0}
  >
  Save
  </Button>
@@ -103,3 +121,181 @@ export const UpdateProfileForm = ({
  </form>
  );
 };
+
+export const SocialMediaLinksForm = ({
+ user,
+ onCancel,
+ refresh = () => {},
+}: {
+ user: any;
+ onCancel: () => void;
+ refresh?: () => void;
+}) => {
+ const { uploadData, submitting, success } = usePost();
+
+ const [socialLinks, setSocialLinks] = useState<
+ { platform: string; url: string }[]
+ >([]);
+
+ useEffect(() => {
+ if (user) {
+ const socialLinks = user?.social_links || {};
+ const links =
+ Object.entries(socialLinks).map(([key, value]) => ({
+ platform: key,
+ url: value as string,
+ })) || [];
+ setSocialLinks(links);
+ }
+ }, [user]);
+
+ useEffect(() => {
+ if (success) {
+ refresh();
+ onCancel();
+ }
+ }, [success]);
+
+ const handleChange = (index: number, field: string, value: string) => {
+ const newLinks = [...socialLinks];
+ if (field === "url") {
+ // Ensure URL starts with http:// or https://
+ if (
+ value &&
+ !value.startsWith("http://") &&
+ !value.startsWith("https://")
+ ) {
+ const newValue = `https://${value}`;
+ (newLinks[index] as any)[field] = newValue;
+ } else {
+ (newLinks[index] as any)[field] = value;
+ }
+ } else {
+ (newLinks[index] as any)[field] = value;
+ }
+ setSocialLinks(newLinks);
+ };
+
+ const addLink = () => {
+ setSocialLinks([...socialLinks, { platform: "", url: "" }]);
+ };
+
+ const removeLink = (index: number) => {
+ const newLinks = [...socialLinks];
+ newLinks.splice(index, 1);
+ setSocialLinks(newLinks);
+ };
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!user?.id) {
+ return;
+ }
+
+ const socialLinksData = socialLinks.reduce(
+ (acc, link) => {
+ if (link.platform && link.url) {
+ acc[link.platform] = link.url;
+ }
+ return acc;
+ },
+ {} as Record<string, string>,
+ );
+
+ uploadData({
+ api: "users",
+ id: user.id,
+ method: "PATCH",
+ params: { social_links: socialLinksData },
+ });
+ };
+
+ return (
+ <form onSubmit={handleSubmit}>
+ <Stack gap={10}>
+ {socialLinks?.map((link, index) => (
+ <Group key={index} align="center" gap="md">
+ <Select
+ label="Platform"
+ placeholder="e.g. Twitter"
+ value={link.platform}
+ onChange={(e) => handleChange(index, "platform", e || "")}
+ data={SOCIAL_LINKS_DATA}
+ leftSection={
+ link.platform
+ ? (() => {
+ const platform = SOCIAL_LINKS_DATA.find(
+ (p) => p.value === link.platform,
+ );
+ const IconComponent = platform?.icon;
+ return IconComponent ? (
+ <IconComponent size={16} color={platform?.color} />
+ ) : undefined;
+ })()
+ : undefined
+ }
+ renderOption={({ option, checked }) => {
+ const platform = SOCIAL_LINKS_DATA.find(
+ (p) => p.value === option.value,
+ );
+ const IconComponent = platform?.icon;
+
+ return (
+ <Group flex="1" gap="xs">
+ {IconComponent && (
+ <IconComponent size={16} color={platform?.color} />
+ )}
+ <span>{option.label}</span>
+ {checked && <FaCheck size={14} color="#228BE6" />}
+ </Group>
+ );
+ }}
+ required
+ />
+ <TextInput
+ label="URL"
+ placeholder="https://twitter.com/yourhandle"
+ value={link.url}
+ onChange={(e) => handleChange(index, "url", e.target.value)}
+ flex="1"
+ required
+ />
+ <ActionIcon
+ color="red"
+ variant="filled"
+ aria-label="Delete"
+ mt="lg"
+ size="2.2rem"
+ onClick={() => removeLink(index)}
+ >
+ <FaTrashAlt />
+ </ActionIcon>
+ </Group>
+ ))}
+ <Button
+ variant="outline"
+ onClick={addLink}
+ disabled={submitting}
+ leftSection={<FaPlus />}
+ >
+ Add New Link
+ </Button>
+
+ <Group justify="flex-end" mt="md">
+ <Button variant="outline" onClick={onCancel} disabled={submitting}>
+ Cancel
+ </Button>
+ <Button
+ type="submit"
+ loading={submitting}
+ variant="filled"
+ color="dark"
+ >
+ Save Links
+ </Button>
+ </Group>
+ </Stack>
+ </form>
+ );
+};