feat: add profile editing

zRich · Mar 5, 2023 · 2330e8c · 2330e8c
1 parent 460bc52
commit 2330e8c
Show file tree

Hide file tree

Showing 15 changed files with 361 additions and 44 deletions.
diff --git a/components/Avatar.tsx b/components/Avatar.tsx
@@ -25,20 +25,27 @@ const Avatar: React.FC<AvatarProps> = ({ userId, isLarge, hasBorder }) => {
   }, [router, userId]);
 
   return (
-    <div>
+    <div
+      className={`
+        ${hasBorder ? 'border-4 border-black' : ''}
+        ${isLarge ? 'h-32' : 'h-12'}
+        ${isLarge ? 'w-32' : 'w-12'}
+        rounded-full 
+        hover:opacity-90 
+        transition 
+        cursor-pointer
+        relative
+      `}
+    >
       <Image
-        width={isLarge ? 128 : 48}
-        height={isLarge ? 128 : 48}
+        fill
+        style={{
+          objectFit: 'cover',
+          borderRadius: '100%'
+        }}
         alt="Avatar"
         onClick={onClick}
         src={fetchedUser?.image || '/images/placeholder.png'}
-        className={`
-          ${hasBorder ? 'border-4 border-black' : ''}
-          rounded-full 
-          hover:opacity-90 
-          transition 
-          cursor-pointer
-        `}
       />
     </div>
   );

diff --git a/components/Dropzone.tsx b/components/Dropzone.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+
+interface DropzoneProps {
+  onChange: (base64: string) => void;
+  label: string;
+  value?: string;
+  disabled?: boolean;
+}
+
+const Dropzone: React.FC<DropzoneProps> = ({ onChange, label, value, disabled }) => {
+  const [base64, setBase64] = useState(value);
+
+  const handleChange = useCallback((base64: string) => {
+    onChange(base64);
+  }, [onChange]);
+
+  const handleDrop = useCallback((files: any) => {
+      const file = files[0]
+      const reader = new FileReader();
+      reader.onload = (event: any) => {
+        setBase64(event.target.result);
+        handleChange(event.target.result);
+      };
+      reader.readAsDataURL(file);
+  }, [handleChange])
+
+  const { getRootProps, getInputProps } = useDropzone({ maxFiles: 1, onDrop: handleDrop, disabled });
+
+  return ( 
+    <div {...getRootProps({className: 'w-full p-4 text-white text-center border-2 border-dotted rounded-md border-neutral-700'})}>
+      <input {...getInputProps()} />
+      {base64 ? (
+        <div className="flex items-center justify-center">
+          <Image
+            src={base64}
+            height="100"
+            width="100"
+            alt="Uploaded image"
+          />
+        </div>
+      ) : (
+        <p className="text-white">{label}</p>
+      )}
+    </div>
+   );
+}
+
+export default Dropzone;
diff --git a/components/Feed.tsx b/components/Feed.tsx
@@ -7,7 +7,7 @@ interface FeedProps {
 }
 
 const Feed: React.FC<FeedProps> = ({ userId }) => {
-  const { data: posts = [] } = usePosts();
+  const { data: posts = [] } = usePosts(userId);
 
   return (
     <>

diff --git a/components/Form.tsx b/components/Form.tsx
@@ -54,7 +54,9 @@ const Form: React.FC<FormProps> = ({ placeholder, isComment, postId }) => {
     <div className="border-b-[1px] border-neutral-800 px-5 py-2">
       {currentUser ? (
         <div className="flex flex-row gap-4">
-          <Avatar userId={currentUser?.id} />
+          <div>
+            <Avatar userId={currentUser?.id} />
+          </div>
           <div className="w-full">
             <textarea
               disabled={isLoading}

diff --git a/components/Input.tsx b/components/Input.tsx
@@ -4,33 +4,38 @@ interface InputProps {
   type?: string;
   disabled?: boolean;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
 }
 
-const Input: React.FC<InputProps> = ({ placeholder, value, type = "text", onChange, disabled }) => {
-  return ( 
-    <input
-      disabled={disabled}
-      onChange={onChange}
-      value={value}
-      placeholder={placeholder}
-      type={type}
-      className="
-        p-4 
-        text-lg 
-        bg-black 
-        border-2
-        border-neutral-800 
-        rounded-md
-        outline-none
-        text-white
-        focus:border-sky-500
-        focus:border-2
-        transition
-        disabled:bg-neutral-900
-        disabled:opacity-70
-        disabled:cursor-not-allowed
-      " 
+const Input: React.FC<InputProps> = ({ placeholder, value, type = "text", onChange, disabled, label }) => {
+  return (
+    <div className="w-full">
+      {label && <p className="text-xl text-white font-semibold mb-2">{label}</p>}
+      <input
+        disabled={disabled}
+        onChange={onChange}
+        value={value}
+        placeholder={placeholder}
+        type={type}
+        className="
+          w-full
+          p-4 
+          text-lg 
+          bg-black 
+          border-2
+          border-neutral-800 
+          rounded-md
+          outline-none
+          text-white
+          focus:border-sky-500
+          focus:border-2
+          transition
+          disabled:bg-neutral-900
+          disabled:opacity-70
+          disabled:cursor-not-allowed
+        "
       />
+    </div>
    );
 }
 

diff --git a/components/modals/EditModal.tsx b/components/modals/EditModal.tsx
@@ -0,0 +1,89 @@
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+
+import useCurrentUser from "@/hooks/useCurrentUser";
+import useEditModal from "@/hooks/useEditModal";
+import useUser from "@/hooks/useUser";
+
+import Input from "../Input";
+import Modal from "../Modal";
+import Dropzone from "../Dropzone";
+
+const EditModal = () => {
+  const { data: currentUser } = useCurrentUser();
+  const { mutate: mutateFetchedUser } = useUser(currentUser?.id);
+  const editModal = useEditModal();
+
+  const [image, setImage] = useState('');
+  const [coverImage, setCoverImage] = useState('');
+  const [name, setName] = useState('');
+  const [username, setUsername] = useState('');
+  const [bio, setBio] = useState('');
+
+  useEffect(() => {
+    setImage(currentUser?.image)
+    setCoverImage(currentUser?.coverImage)
+    setName(currentUser?.name)
+    setUsername(currentUser?.username)
+    setBio(currentUser?.bio)
+  }, [currentUser?.name, currentUser?.username, currentUser?.bio, currentUser?.image, currentUser?.coverImage]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onSubmit = useCallback(async () => {
+    try {
+      setIsLoading(true);
+
+      await axios.patch('/api/edit', { name, username, bio, image, coverImage });
+      mutateFetchedUser();
+
+      toast.success('Updated');
+
+      editModal.onClose();
+    } catch (error) {
+      toast.error('Something went wrong');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [editModal, name, username, bio, mutateFetchedUser, image, coverImage]);
+
+  const bodyContent = (
+    <div className="flex flex-col gap-4">
+      <Dropzone value={image} disabled={isLoading} onChange={(image) => setImage(image)} label="Upload profile image" />
+      <Dropzone value={coverImage} disabled={isLoading} onChange={(image) => setCoverImage(image)} label="Upload cover image" />
+      <Input
+        placeholder="Name"
+        onChange={(e) => setName(e.target.value)}
+        value={name}
+        disabled={isLoading}  
+      />
+      <Input 
+        placeholder="Username"
+        onChange={(e) => setUsername(e.target.value)}
+        value={username}
+        disabled={isLoading} 
+      />
+      <Input 
+        placeholder="Bio"
+        onChange={(e) => setBio(e.target.value)}
+        value={bio}
+        disabled={isLoading} 
+      />
+    </div>
+  )
+
+  return (
+    <Modal
+      disabled={isLoading}
+      isOpen={editModal.isOpen}
+      title="Edit your profile"
+      actionLabel="Save"
+      onClose={editModal.onClose}
+      onSubmit={onSubmit}
+      body={bodyContent}
+    />
+  );
+}
+
+export default EditModal;
diff --git a/components/users/UserBio.tsx b/components/users/UserBio.tsx
@@ -5,6 +5,7 @@ import { format } from "date-fns";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useUser from "@/hooks/useUser";
 import useFollow from "@/hooks/useFollow";
+import useEditModal from "@/hooks/useEditModal";
 
 import Button from "../Button";
 
@@ -16,6 +17,8 @@ const UserBio: React.FC<UserBioProps> = ({ userId }) => {
   const { data: currentUser } = useCurrentUser();
   const { data: fetchedUser } = useUser(userId);
 
+  const editModal = useEditModal();
+
   const { isFollowing, toggleFollow } = useFollow(userId);
 
   const createdAt = useMemo(() => {
@@ -30,13 +33,16 @@ const UserBio: React.FC<UserBioProps> = ({ userId }) => {
   return ( 
     <div className="border-b-[1px] border-neutral-800 pb-4">
       <div className="flex justify-end p-2">
-        <Button
-          disabled={currentUser?.id === userId}
-          onClick={toggleFollow} 
-          label={isFollowing ? 'Unfollow' : 'Follow'}
-          secondary={!isFollowing}
-          outline={isFollowing}
-        />
+        {currentUser?.id === userId ? (
+          <Button secondary label="Edit" onClick={editModal.onOpen} />
+        ) : (
+          <Button
+            onClick={toggleFollow} 
+            label={isFollowing ? 'Unfollow' : 'Follow'}
+            secondary={!isFollowing}
+            outline={isFollowing}
+          />
+        )}
       </div>
       <div className="mt-8 px-4">
         <div className="flex flex-col">

diff --git a/components/users/UserHero.tsx b/components/users/UserHero.tsx
@@ -1,13 +1,22 @@
+import Image from "next/image";
+
+import useUser from "@/hooks/useUser";
+
 import Avatar from "../Avatar"
 
 interface UserHeroProps {
   userId: string;
 }
 
 const UserHero: React.FC<UserHeroProps> = ({ userId }) => {
+  const { data: fetchedUser } = useUser(userId);
+
   return ( 
     <div>
       <div className="bg-neutral-700 h-56 relative">
+        {fetchedUser?.coverImage && (
+          <Image src={fetchedUser.coverImage} fill alt="Cover Image" style={{ objectFit: 'cover' }}/>
+        )}
         <div className="absolute -bottom-16 left-4">
           <Avatar userId={userId} isLarge hasBorder />
         </div>

diff --git a/hooks/useEditModal.ts b/hooks/useEditModal.ts
@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+interface EditModalStore {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+const useEditModal = create<EditModalStore>((set) => ({
+  isOpen: false,
+  onOpen: () => set({ isOpen: true }),
+  onClose: () => set({ isOpen: false })
+}));
+
+
+export default useEditModal;