Enhance logging, improve component styling, and refactor imports across multiple files

Author: Adityasinghvats

src/appwrite/config.service.js

@@ -16,6 +16,7 @@ export class Service{
 
     async createPost({title, slug, content, featuredImage, status, userId}){
         try {
+            console.log("createPost parameters:", {title, slug, content, featuredImage, status, userId});
             return await this.databases.createDocument(
                 conf.appwriteDatabaseId,
                 conf.appwriteCollectionId,

src/components/Login.jsx

@@ -1,6 +1,6 @@
 import React ,{useState} from 'react'
-import {Link, useNavigate} from 'react-router-dom'
-import {login as authLoginStore} from '../store/authSlice.js'
+import {Link, useNavigate} from 'react-router-dom';
+import {login as authLogin} from '../store/authSlice.js'
 import {Button, Input, Logo} from './index.js'
 import { useDispatch } from 'react-redux'
 import authService from '../appwrite/auth.service'
@@ -18,10 +18,11 @@ function Login() {
             const session = await authService.login(data)
             if(session){
                 const userData = await authService.getCurrentUser()
+                console.log("Can go to home but not going")
                 if(userData){
-                    dispatch(authLoginStore(userData))
-                    navigate("/")
+                    dispatch(authLogin(userData));
                 }
+                navigate("/");
             }
         } catch (error) {
             setError(error.message)
@@ -59,7 +60,7 @@ function Login() {
                     {...register("email", {
                         required: true,
                         validate: {
-                            matchPattern :(value) =>  /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
+                        matchPattern :(value) =>  /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
                         "Email address must be a valid address",
                         }
                     })}

src/components/PostCard.jsx

@@ -11,7 +11,7 @@ function PostCard({$id, title, featuredImage}) { //$id - special syntax of aappw
                  alt={title} className='rounded-xl'/>
             </div>
         </div>
-        <h2 className='text-xl'>
+        <h2 className='text-xl font-bold'>
             {title}</h2>
     </Link>
   )

src/components/Select.jsx

@@ -3,7 +3,7 @@ import React , {useId} from 'react'
 function Select({
     options,
     label,
-    className = "",
+    className,
     ...props
 }, ref) {
     const id = useId();

src/components/SignUp.jsx

@@ -27,11 +27,11 @@ function SignUp() {
     }
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex items-center justify-center pt-5 pb-5">
         <div className={`mx-auto w-full max-w-lg bg-gray-100 rounded-xl p-10 border border-black/10`}>
             <div className="mb-2 flex justify-center">
                 <span className="inline-block w-full max-w-[100px]">
-                    <Logo width='100%'/>
+                    <Logo width='50px'/>
                 </span>
             </div>
             <h2 className="text-center text-2xl font-bold leading-tight">Sign Up to create account</h2>

src/components/post-form/PostForm.jsx

@@ -8,10 +8,11 @@ import { useSelector } from 'react-redux'
 export default function PostForm({post}) {
     const {register, handleSubmit, watch, setValue, control, getValues} = useForm({
         defaultValues:{
-            title: post?.title || '',
-            slug : post?.slug || '',
-            content : post?.content || '',
+            title: post?.title || "",
+            slug : post?.$id || "",
+            content : post?.content || "",
             status : post?.status || "active",
+            userId: post?.$id || ""
         },
     })
 
@@ -71,7 +72,7 @@ export default function PostForm({post}) {
             //to optimise useEffect
             subscription.unsubscribe()
         }
-    }, [watch,  slugTransform, setValue])
+    }, [watch, slugTransform, setValue])
   return (
     <form onSubmit={handleSubmit(submit)} className="flex flex-wrap">
             <div className="w-2/3 px-2">

src/main.jsx

@@ -7,8 +7,7 @@ import App from './App.jsx'
 import { Provider } from 'react-redux'
 import store from './store/store.js'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import AuthLayout from './components/AuthLayout.jsx'
-import Login from './components/Login.jsx'
+import { AuthLayout, Login } from './components/index.js'
 import Home from './pages/Home.jsx'
 import Allposts from './pages/Allposts.jsx'
 import Addpost from './pages/Addpost.jsx'
@@ -72,8 +71,8 @@ const router = createBrowserRouter([
           path: "/post/:slug",
           element: <Post />,
       },
-    ]
-  }
+    ],
+  },
 ])
 
 ReactDOM.createRoot(document.getElementById('root')).render(

src/pages/Editpost.jsx

@@ -1,16 +1,16 @@
 import React ,{useEffect, useState}from 'react'
 import { Container, PostForm } from '../components'
-import service from '../appwrite/config.service'
+import appwriteService from '../appwrite/config.service'
 import { useNavigate, useParams } from 'react-router-dom'
 
 function Editpost() {
     const [post, setPost] = useState(null)
     const {slug} = useParams()
-    const navigate = useNavigate
+    const navigate = useNavigate()
 
-    useEffect((slug) => {
+    useEffect(() => {
         if(slug){
-            service.getPosts(slug).then((post) => {
+            appwriteService.getPost(slug).then((post) => {
                 if(post){
                     setPost(post)
                 }
@@ -22,7 +22,7 @@ function Editpost() {
   return post ? (
     <div>
         <Container>
-            <PostForm post = {post}/>
+            <PostForm post={post}/>
         </Container>
     </div>
   ) : null

src/pages/Home.jsx

@@ -15,7 +15,7 @@ function Home() {
             <div className="w-full py-8 mt-4 text-center">
                 <Container>
                     <div className="flex flex-wrap">
-                        <div className="p-2 w-full">
+                        <div className="p-2 w-full h-full">
                             <h1 className="text-2xl font-bold hover:text-gray-500">
                                 Login to read posts
                             </h1>