removed zustand and migrated to react context api

atybdot · Oct 30, 2024 · a712b6c · a712b6c
1 parent 84f2c94
commit a712b6c
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 106 deletions.
diff --git a/biome.json b/biome.json
@@ -28,7 +28,8 @@
       },
       "nursery": {
         "recommended": true,
-        "useConsistentMemberAccessibility": "off"
+        "useConsistentMemberAccessibility": "off",
+        "noUselessEscapeInRegex": "info"
       },
       "correctness": {
         "recommended": true,

diff --git a/package.json b/package.json
@@ -4,7 +4,9 @@
   "description": "seamlessly integrate a comment section into your React or Astro project",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
     "dev": "",
@@ -24,16 +26,16 @@
   "homepage": "https://github.com/atybdot/app-comment-react",
   "dependencies": {
     "appwrite": "^16.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "javascript-time-ago": "^2.5.11",
     "lucide-react": "^0.453.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "react-hot-toast": "^2.4.1",
-    "react-time-ago": "^7.3.3",
-    "zustand": "^5.0.0"
+    "react-time-ago": "^7.3.3"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.25.9",
     "@biomejs/biome": "1.9.4",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -49,8 +51,7 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.4.14",
-    "@babel/preset-react": "^7.25.9"
+    "tailwindcss": "^3.4.14"
   },
   "publishConfig": {
     "access": "public"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AuthForm.jsx b/src/components/AuthForm.jsx
@@ -1,15 +1,16 @@
 import { Eye, EyeOff, X } from "lucide-react"
-import { forwardRef, useEffect, useRef, useState } from "react"
+import { forwardRef, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
+import { Loading, onInvalid, onSucess } from "../utils/utils"
+
 import toast from "react-hot-toast"
 import { emailLogin, emailSignup, getUser } from "../lib/appwrite"
-import useCommentStore from "../store/commentsStore"
-import { Loading, onInvalid, onSucess } from "../utils/utils"
+import useComment from "../store/commentContext"
 import CustomToast from "./CustomToast"
 
 const SignupForm = () => {
   const [showPassword, setShowPassword] = useState(false)
-  const { updateUser, updateLoginState } = useCommentStore()
+  const { updateUser, updateLoginState } = useComment()
   const {
     register,
     handleSubmit,
@@ -59,7 +60,9 @@ const SignupForm = () => {
           </label>
           <input
             type="text"
-            className="appearance-none rounded-none relative block w-full px-3 py-2 border placeholder-zinc-500 text-zinc-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+            className={
+              "appearance-none rounded-none relative block w-full px-3 py-2 border placeholder-zinc-500 text-zinc-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+            }
             placeholder="name"
             {...register("name", {
               required: { value: true, message: "name is required" },
@@ -141,7 +144,7 @@ const SignupForm = () => {
 }
 
 const LoginForm = () => {
-  const { updateUser, user, updateLoginState } = useCommentStore()
+  const { updateLoginState, updateUser } = useComment()
   const [showPassword, setShowPassword] = useState(false)
   const {
     register,
@@ -271,6 +274,7 @@ const AuthForm = forwardRef((props, ref) => {
       ref={ref}
     >
       <button
+        type="button"
         onClick={() => ref.current.close()}
         className="text-sm absolute top-0 right-0 m-4 dark:text-zinc-100 text-zinc-900 hover:text-blue-500"
       >
@@ -303,6 +307,7 @@ const AuthForm = forwardRef((props, ref) => {
               >
                 <span className="sr-only">Sign in with Google</span>
                 <img
+                  alt="google img"
                   src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg"
                   className="w-5 h-5"
                 />
@@ -316,6 +321,7 @@ const AuthForm = forwardRef((props, ref) => {
                 <span className="sr-only">Sign in with GitHub</span>
 
                 <img
+                  alt="github img"
                   className="w-5 h-5"
                   src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg"
                 />
@@ -325,6 +331,7 @@ const AuthForm = forwardRef((props, ref) => {
         </div>
         <div className="text-center text-blue-500 dark:text-blue-500">
           <button
+            type="button"
             onClick={() => setIsLogin(!isLogin)}
             className="font-medium hover:text-blue-600"
           >

diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
@@ -4,13 +4,14 @@ import { useForm } from "react-hook-form"
 import { deleteComment, updateComment } from "../lib/appwrite"
 import { CreationDate, Loading, onInvalid, onSucess } from "../utils/utils"
 
-import useCommentStore from "../store/commentsStore"
+import useComment from "../store/commentContext"
 
 export default function Comment({
   content: initialContent,
   username,
   timestamp,
   commentId,
+  permissions = [],
 }) {
   const {
     register,
@@ -22,7 +23,10 @@ export default function Comment({
     },
   })
 
-  const { removeComment, addAComment } = useCommentStore()
+  const { setComments, user } = useComment()
+
+  const showEdit = permissions.includes(`update("user:${user.id}")`)
+  const showDel = permissions.includes(`delete("user:${user.id}")`)
 
   const [isEditing, setIsEditing] = useState(false)
   const [editedContent, setEditedContent] = useState(initialContent)
@@ -38,24 +42,32 @@ export default function Comment({
   }
 
   const updateCommentContent = async (data) => {
-    const res = await updateComment(data.updateCommentContent, commentId)
-    removeComment(res.$id)
-    addAComment(res)
-    isSubmitSuccessful && onSucess("comment updated")
-    setIsEditing(false)
-    setEditedContent(data?.updateCommentContent)
+    try {
+      const res = await updateComment(data.updateCommentContent, commentId)
+      setComments((prev) => prev.filter((item) => item.$id !== commentId))
+      setComments((prev) => [res, ...prev])
+      isSubmitSuccessful && onSucess("comment updated")
+      setIsEditing(false)
+      setEditedContent(data?.updateCommentContent)
+    } catch (error) {
+      setIsEditing(false)
+      onInvalid(error.message)
+      setEditedContent(initialContent)
+    }
   }
 
   const handleDelete = async () => {
     setIsDeleting(true)
     deleteComment(commentId)
       .then(() => {
-        removeComment(commentId)
+        // removeComment(commentId);
+        setComments((prev) => prev.filter((item) => item.$id !== commentId))
         setIsDeleting(false)
         onSucess("comment deleted")
       })
       .catch((err) => {
-        onInvalid("unable to delete this comment")
+        onInvalid(err.message)
+        setIsDeleting(false)
         console.error(err)
       })
   }
@@ -91,6 +103,7 @@ export default function Comment({
               />
               <div className="mt-2 flex justify-end space-x-2">
                 <button
+                  type="button"
                   onClick={handleCancel}
                   className="px-3 py-1 text-sm bg-zinc-200 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 rounded-md hover:bg-zinc-300 dark:hover:bg-zinc-500 transition-colors duration-150 flex items-center"
                 >
@@ -99,6 +112,7 @@ export default function Comment({
                 </button>
                 <button
                   disabled={isSubmitting}
+                  type="button"
                   onClick={handleSubmit(updateCommentContent, onInvalid)}
                   className="px-3 py-1 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors duration-150 flex items-center gap-1"
                 >
@@ -119,22 +133,33 @@ export default function Comment({
             </p>
           )}
           <div className="mt-2 flex space-x-2">
-            <button
-              onClick={handleEdit}
-              className="p-1 text-zinc-500 hover:text-blue-500 dark:text-zinc-400 dark:hover:text-blue-400 transition-colors duration-150"
-              aria-label="Edit comment"
-            >
-              <Edit2 size={18} strokeWidth={1} />
-            </button>
-            <button
-              onClick={handleDelete}
-              disabled={isDeleting}
-              className="p-1 text-zinc-500 hover:text-red-500 dark:text-zinc-400 dark:hover:text-red-400 transition-colors duration-150 inline-flex gap-1 items-center"
-              aria-label="Delete comment"
-            >
-              {isDeleting ? <Loading /> : <Trash2 size={18} strokeWidth={1} />}
-              {isDeleting ? "deleting..." : ""}
-            </button>
+            {showEdit ? (
+              <button
+                type="button"
+                onClick={handleEdit}
+                className="p-1 text-zinc-500 hover:text-blue-500 dark:text-zinc-400 dark:hover:text-blue-400 transition-colors duration-150"
+                aria-label="Edit comment"
+              >
+                <Edit2 size={18} strokeWidth={1} />
+              </button>
+            ) : null}
+
+            {showDel ? (
+              <button
+                type="button"
+                onClick={handleDelete}
+                disabled={isDeleting}
+                className="p-1 text-zinc-500 hover:text-red-500 dark:text-zinc-400 dark:hover:text-red-400 transition-colors duration-150 inline-flex gap-1 items-center"
+                aria-label="Delete comment"
+              >
+                {isDeleting ? (
+                  <Loading />
+                ) : (
+                  <Trash2 size={18} strokeWidth={1} />
+                )}
+                {isDeleting ? "deleting..." : ""}
+              </button>
+            ) : null}
           </div>
         </div>
       </div>

diff --git a/src/components/CommentSection.jsx b/src/components/CommentSection.jsx
@@ -1,20 +1,17 @@
 import { useEffect } from "react"
 import { Suspense } from "react"
+import { useState } from "react"
 import { commentDB, getUser, logoutUser } from "../lib/appwrite"
-import useCommentStore from "../store/commentsStore"
+import { CommentProvider } from "../store/commentContext"
 import { onInvalid, onSucess } from "../utils/utils"
 import Comment from "./Comment"
+import CustomToast from "./CustomToast"
 import PostComment from "./PostComment"
 
 export default function CommentSection({ postId }) {
-  const {
-    loginState,
-    updateUser,
-    updateLoginState,
-    user,
-    comments,
-    setComments,
-  } = useCommentStore()
+  const [loginState, updateLoginState] = useState(false)
+  const [user, updateUser] = useState({ id: "", name: "" })
+  const [comments, setComments] = useState([])
 
   const handleLogout = async () => {
     try {
@@ -50,9 +47,18 @@ export default function CommentSection({ postId }) {
   }, [])
 
   return (
-    <>
-      <CustomToast />
+    <CommentProvider
+      value={{
+        loginState,
+        user,
+        comments,
+        setComments,
+        updateUser,
+        updateLoginState,
+      }}
+    >
       <div className="max-w-2xl mx-auto p-4 text-zinc-900 dark:text-zinc-100">
+        <CustomToast />
         <h2 className="text-2xl font-bold mb-4 text-zinc-800 dark:text-white">
           Comments
         </h2>
@@ -77,11 +83,12 @@ export default function CommentSection({ postId }) {
                 timestamp={comment.$updatedAt}
                 username={comment.username}
                 commentId={comment.$id}
+                permissions={comment.$permissions}
               />
             ))}
           </Suspense>
         </div>
       </div>
-    </>
+    </CommentProvider>
   )
 }
diff --git a/src/components/CustomToast.jsx b/src/components/CustomToast.jsx
@@ -15,6 +15,7 @@ function CustomToast() {
                 {message}
                 {t.type !== "loading" && (
                   <button
+                    type="button"
                     className="hover:text-blue-500 hover:bg-blue-200 p-1 rounded transition-all duration-150"
                     onClick={() => toast.dismiss(t.id)}
                   >