Merge pull request #40 from shamil-tp/sinan

cleaned version of code

Author: shamil-tp

frontend/src/api/axios.jsx

@@ -4,7 +4,7 @@ import secureLocalStorage from "react-secure-storage";
 const api = axios.create({
   baseURL: import.meta.env.VITE_BACKEND_URL,
   withCredentials:true
-}); // credentials not needed for Bearer token auth
+}); 
 
 // Request Interceptor: Attach Access Token
 api.interceptors.request.use(
@@ -36,10 +36,8 @@ api.interceptors.response.use(
         const refreshToken = secureLocalStorage.getItem("refreshToken");
         if (!refreshToken) {
           console.log("Axios Interceptor: No Refresh Token found. Logging out.");
-          // No refresh token, logout user
           secureLocalStorage.removeItem("accessToken");
           secureLocalStorage.removeItem("refreshToken");
-          // window.location.href = "/login"; // Optional: Redirect to login
           return Promise.reject(error);
         }
 
@@ -51,16 +49,13 @@ api.interceptors.response.use(
         console.log("Axios Interceptor: Refresh Successful. New Access Token received.");
         const { accessToken } = res.data;
         secureLocalStorage.setItem("accessToken", accessToken);
-        // If rotating refresh token: secureLocalStorage.setItem("refreshToken", res.data.refreshToken);
 
-        // Update header and retry original request
         originalRequest.headers.Authorization = `Bearer ${accessToken}`;
         return api(originalRequest);
       } catch (refreshError) {
         console.error("Token refresh failed:", refreshError);
         secureLocalStorage.removeItem("accessToken");
         secureLocalStorage.removeItem("refreshToken");
-        // window.location.href = "/login"; // Optional: Redirect to login
         return Promise.reject(refreshError);
       }
     }

frontend/src/components/BlogRenderer.jsx

@@ -1,21 +1,17 @@
 import React from 'react';
-import 'react-quill-new/dist/quill.snow.css'; // Import styles for consistent text formatting
+import 'react-quill-new/dist/quill.snow.css'; 
 
 const BlogRenderer = ({ content }) => {
     if (!content || !Array.isArray(content)) return null;
 
-    // We rely on CSS Grid to replicate the 12-column layout.
-    // RGL config was: rowHeight={30}, margin={[10, 10]}
-    // CSS Grid gap should be 20px (10px * 2) to approximate RGL margins.
-
     return (
         <div className="w-full max-w-[1200px] mx-auto p-4">
             <div
                 style={{
                     display: 'grid',
                     gridTemplateColumns: 'repeat(12, 1fr)',
-                    gridAutoRows: '30px', // Matches the Editor's rowHeight
-                    gap: '10px 20px', // Row gap 10px, Col gap 20px
+                    gridAutoRows: '30px', 
+                    gap: '10px 20px', 
                 }}
             >
                 {content.map((widget) => {
@@ -30,12 +26,9 @@ const BlogRenderer = ({ content }) => {
 
                     return (
                         <div key={widget.id} style={style} className="overflow-hidden">
-                            {/* TEXT WIDGET RENDERER */}
                             {widget.type === 'text' && (
                                 <div
                                     className="ql-editor p-0 h-full w-full"
-                                    // Using dangerouslySetInnerHTML to render the HTML string from Quill
-                                    // In production, consider using DOMPurify.sanitize(widget.content)
                                     dangerouslySetInnerHTML={{ __html: widget.content }}
                                     style={{ color: 'inherit', overflowY: 'auto' }}
                                 />

frontend/src/components/GridEditor/GridEditor.jsx

@@ -20,7 +20,6 @@ const useContainerWidth = () => {
             for (let entry of entries) {
                 if (entry.contentRect) {
                     const newWidth = Math.floor(entry.contentRect.width);
-                    // Threshold to prevent loops
                     setWidth(prev => {
                         if (Math.abs(prev - newWidth) > 5) {
                             return newWidth;
@@ -43,16 +42,9 @@ const useContainerWidth = () => {
 
 
 const GridEditor = ({ widgets, setWidgets, readOnly = false }) => {
-    // SIMPLIfIED: Using data-grid approach. No local layouts state.
     const { width, ref: containerRef } = useContainerWidth();
 
-    const onLayoutChange = (layout) => {
-        // No-op for state. RGL manages visual state internally.
-        // We only care about the final result in onDragStop.
-    };
-
     const onLayoutStop = (layout) => {
-        // Sync the new layout positions back to the main widgets state
         const updatedWidgets = widgets.map(w => {
             const l = layout.find(item => item.i === w.id);
             if (l) {

frontend/src/components/GridEditor/ImageWidget.jsx

@@ -7,9 +7,6 @@ const ImageWidget = ({ url, readOnly }) => {
                 src={url}
                 alt="Post content"
                 className="w-full h-full object-cover pointer-events-none"
-            // pointer-events-none is important so the drag handler of the grid works on the item body if needed, 
-            // but usually RGL uses a handle. 
-            // If we want to drag by the image content, we might need to disable pointer events or handle them carefully.
             />
         </div>
     )

frontend/src/components/GridEditor/TextWidget.jsx

@@ -6,28 +6,27 @@ import 'quill/dist/quill.snow.css';
 const modules = {
     toolbar: [
         [{ 'header': [1, 2, 3, false] }],
-        [{ 'align': [] }], // Added Alignment
+        [{ 'align': [] }], 
         ['bold', 'italic', 'underline', 'strike', 'blockquote'],
         [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
-        ['link', 'clean'] // Removed image/video since we have widgets for that
+        ['link', 'clean'] 
     ],
 };
 
 const formats = [
-    'header', 'align', // Added Format
+    'header', 'align', 
     'bold', 'italic', 'underline', 'strike', 'blockquote',
     'list', 'bullet', 'indent',
     'link'
 ];
 
 const TextWidget = ({ id, content, onChange, readOnly = false }) => {
-    // Quill uses HTML strings. 
     const safeContent = Array.isArray(content) ? '' : content;
 
     return (
         <div className="h-full w-full flex flex-col bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 overflow-hidden"
             style={{ cursor: 'text' }}
-            onMouseDown={(e) => e.stopPropagation()} /* Allow clicking into editor */
+            onMouseDown={(e) => e.stopPropagation()} 
         >
             <ReactQuill
                 theme="snow"

frontend/src/css/login.css

@@ -1,4 +1,3 @@
-/* Login.css */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 
 body {
@@ -7,7 +6,6 @@ body {
 }
 
 .login-container {
-  /* Deep Dark Gradient Background */
   background: linear-gradient(135deg, #0f172a 0%, #000000 100%);
   height: 100vh;
   width: 100vw;
@@ -18,7 +16,6 @@ body {
   overflow: hidden;
 }
 
-/* Optional: Adds a subtle background glow effect */
 .login-container::before {
   content: '';
   position: absolute;
@@ -31,15 +28,14 @@ body {
 }
 
 .login-card {
-  /* Glassmorphism Effect */
-  background: rgba(30, 41, 59, 0.4); /* Semi-transparent dark blue/slate */
-  backdrop-filter: blur(12px); /* The blur effect */
+  background: rgba(30, 41, 59, 0.4); 
+  backdrop-filter: blur(12px); 
   -webkit-backdrop-filter: blur(12px);
-  
-  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
+
+  border: 1px solid rgba(255, 255, 255, 0.1); 
   padding: 3.5rem 2.5rem;
   border-radius: 24px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); /* Deep shadow */
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); 
 
   display: flex;
   flex-direction: column;
@@ -56,7 +52,6 @@ body {
   font-weight: 700;
   margin: 0;
 
-  /* Gradient Text */
   background: linear-gradient(to right, #fff 0%, #a5b4fc 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -66,7 +61,7 @@ body {
 }
 
 .login-subtitle {
-  color: #94a3b8; /* Muted slate text */
+  color: #94a3b8; 
   font-size: 0.95rem;
   margin-top: -1.5rem;
   margin-bottom: 0.5rem;
@@ -79,7 +74,6 @@ body {
   justify-content: center;
 }
 
-/* Ensure the Google Button container has a minimum height to prevent layout shift */
 #googleSignInDiv {
   min-height: 44px;
 }

frontend/src/index.css

@@ -6,7 +6,6 @@
   --font-serif: "Source Serif 4", ui-serif, Georgia;
 }
 
-/* Add this to force Tailwind to recognize the .dark class */
 @variant dark (&:where(.dark, .dark *));
 
 @layer base {
@@ -15,14 +14,12 @@
   }
 }
 
-/* Default: show text */
 .sidebar-brand .brand-text {
   font-size: 1.4rem;
   font-weight: 700;
   white-space: nowrap;
 }
 
-/* Hide text when sidebar is narrow */
 .sidebar.sidebar-narrow-unfoldable:not(:hover) .sidebar-brand .brand-text {
   display: none;
 }

frontend/src/pages/CreatePost.jsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react' // Import React and useRef
+import React, { useState, useEffect, useRef } from 'react' 
 import { useParams, useNavigate } from "react-router-dom";
 import api from '../api/axios'
 import axios from 'axios'
 import GridEditor from '../components/GridEditor/GridEditor'
 import { v4 as uuidv4 } from 'uuid';
 
-// --- CONSTANTS ---
 const initialWidgets = [
     {
         id: 'init-1',
@@ -16,7 +15,6 @@ const initialWidgets = [
 ]
 
 
-// --- LOCAL STYLED COMPONENTS ---
 const ToolbarContainer = ({ children }) => (
     <div className="flex flex-wrap gap-2 items-center pb-4 mb-4 border-b border-slate-200 dark:border-slate-700/50 transition-colors duration-300">
         {children}
@@ -69,7 +67,6 @@ const CreatePost = () => {
         }
     }, [isDark]);
 
-    // File Input Ref for robust handling
     const fileInputRef = useRef(null);
 
     useEffect(() => {
@@ -82,10 +79,8 @@ const CreatePost = () => {
 
                 const loadedContent = res.data.blog.content;
 
-                // MIGRATION / ADAPTER LOGIC
                 if (Array.isArray(loadedContent) && loadedContent.length > 0) {
                     if (loadedContent[0].layout && loadedContent[0].id) {
-                        // Widget format present. Ensure text content is string (Quill) not object (Slate)
                         const fixedWidgets = loadedContent.map(w => ({
                             ...w,
                             layout: {
@@ -95,7 +90,6 @@ const CreatePost = () => {
                         }));
                         setWidgets(fixedWidgets);
                     } else {
-                        // Old Slate JSON (pure array)
                         setWidgets([{
                             id: uuidv4(),
                             type: 'text',
@@ -117,12 +111,11 @@ const CreatePost = () => {
     }, [id, isEditMode]);
 
 
-    // --- UPLOAD & ADD WIDGET LOGIC ---
     const addTextWidget = () => {
         const newWidget = {
             id: uuidv4(),
             type: 'text',
-            content: '', // Quill starts empty
+            content: '', 
             layout: { x: 0, y: Infinity, w: 12, h: 4 }
         };
         setWidgets([...widgets, newWidget]);
@@ -190,12 +183,10 @@ const CreatePost = () => {
         }
 
         try {
-            // Validate and Sanitize widgets
             const sanitizedWidgets = widgets.map(w => ({
                 ...w,
                 layout: {
                     ...w.layout,
-                    // KEEP Infinity — react-grid-layout understands it
                     y: w.layout.y
                 }
             }));

frontend/src/pages/HomeFeed.jsx

@@ -41,36 +41,33 @@ export default function HomeFeed() {
   const [posts, setPosts] = useState([]);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [postToDeleteId, setPostToDeleteId] = useState(null);
-  const [postToDeleteTitle, setPostToDeleteTitle] = useState(''); // To display in modal
+  const [postToDeleteTitle, setPostToDeleteTitle] = useState(''); 
 
    const navigate = useNavigate();
 
   const editPost = (postId) => {
   navigate(`/edit/${postId}`);
 };
 
-  // Modified deletePost to show modal
   const deletePost = async (postId, postTitle) => {
     setPostToDeleteId(postId);
     setPostToDeleteTitle(postTitle);
     setShowDeleteModal(true);
   }
 
-  // Function called when user confirms in the modal
   const confirmDelete = async () => {
     if (!postToDeleteId) return;
 
     try {
-      // Assuming 'api.get' is correct for your backend's delete endpoint
       let res = await api.get(`/api/blog/deleteblog/${postToDeleteId}`)
-      setPosts(posts.filter(item => item._id !== postToDeleteId)); // Use strict equality
+      setPosts(posts.filter(item => item._id !== postToDeleteId)); 
       console.log("Post deleted.");
       setShowDeleteModal(false);
       setPostToDeleteId(null);
       setPostToDeleteTitle('');
     } catch (e) {
       console.error('error deleting post', e);
-      setShowDeleteModal(false); // Close modal even on error
+      setShowDeleteModal(false); 
     }
   };
 
@@ -164,7 +161,6 @@ export default function HomeFeed() {
             >
               <div className="flex flex-col gap-2">
 
-                {/* Icons container - Positioned Absolutely in the top-right corner */}
                 <div className="absolute top-4 right-4 flex gap-3 text-sm">
                   {/* Edit Icon */}
                   <i
@@ -177,13 +173,13 @@ export default function HomeFeed() {
                     title="Edit Post"
                   ></i>
 
-                  {/* Delete Icon - Now triggers modal */}
+                  {/* Delete Icon */}
                   <i
                     className="bi bi-trash3 hover:text-red-500 transition-colors cursor-pointer text-slate-400 dark:text-slate-500"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
-                      deletePost(post._id, post.title); // Pass title as well
+                      deletePost(post._id, post.title); 
                     }}
                     title="Delete Post"
                   ></i>
@@ -227,7 +223,6 @@ export default function HomeFeed() {
         </div>
       </main>
 
-      {/* Render the modal */}
       <DeleteConfirmationModal
         show={showDeleteModal}
         onClose={closeDeleteModal}