Merge branch 'main' of https://github.com/krishnaacharyaa/wanderlust into readme-file

rushil-b-patel · rushil-b-patel · commit 7bbe009db051 · 2024-06-23T00:42:31.000+05:30
diff --git a/.github/workflows/issue-assigned.yaml b/.github/workflows/issue-assigned.yaml
@@ -15,7 +15,7 @@ jobs:
           script: |
             const issue_number = context.issue.number;
             const issue_assignee = context.payload.assignee.login;
-            const contributing_guidelines_url = 'https://github.com/krishnaacharyaa/wanderlust/blob/main/.github/CONTRIBUTING.md';
+            const contributing_guidelines_url = 'https://github.com/krishnaacharyaa/wanderlust/blob/main/.github/CONTRIBUTING.md#guidelines-for-contributions';
 
             github.rest.issues.createComment({
               owner: context.repo.owner,
diff --git a/backend/controllers/posts-controller.js b/backend/controllers/posts-controller.js
@@ -135,8 +135,11 @@ export const updatePostHandler = async (req, res) => {
     if (!updatedPost) {
       return res.status(HTTP_STATUS.NOT_FOUND).json({ message: RESPONSE_MESSAGES.POSTS.NOT_FOUND });
     }
-
-    res.status(HTTP_STATUS.OK).json(updatedPost);
+    // invalidate the redis cache
+    await deleteDataFromCache(REDIS_KEYS.ALL_POSTS),
+      await deleteDataFromCache(REDIS_KEYS.FEATURED_POSTS),
+      await deleteDataFromCache(REDIS_KEYS.LATEST_POSTS),
+      await res.status(HTTP_STATUS.OK).json(updatedPost);
   } catch (err) {
     res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({ message: err.message });
   }
@@ -152,7 +155,11 @@ export const deletePostByIdHandler = async (req, res) => {
     }
     await User.findByIdAndUpdate(post.authorId, { $pull: { posts: req.params.id } });
 
-    res.status(HTTP_STATUS.OK).json({ message: RESPONSE_MESSAGES.POSTS.DELETED });
+    // invalidate the redis cache
+    await deleteDataFromCache(REDIS_KEYS.ALL_POSTS),
+      await deleteDataFromCache(REDIS_KEYS.FEATURED_POSTS),
+      await deleteDataFromCache(REDIS_KEYS.LATEST_POSTS),
+      res.status(HTTP_STATUS.OK).json({ message: RESPONSE_MESSAGES.POSTS.DELETED });
   } catch (err) {
     res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({ message: err.message });
   }
diff --git a/backend/controllers/user-controller.js b/backend/controllers/user-controller.js
@@ -1,20 +1,24 @@
 import { HTTP_STATUS, RESPONSE_MESSAGES } from '../utils/constants.js';
 import User from '../models/user.js';
+import { Role } from '../types/role-type.js';
 
 export const getAllUserHandler = async (req, res) => {
   try {
-    const users = await User.find().select('_id name email');
+    const users = await User.find().select('_id fullName role email');
     return res.status(HTTP_STATUS.OK).json({ users });
   } catch (error) {
-    res.status(HTTP_STATUS.INTERNAL_SERVER_ERROR).json({ message: error.message });
+    console.log(error);
+    res
+      .status(HTTP_STATUS.INTERNAL_SERVER_ERROR)
+      .json({ message: RESPONSE_MESSAGES.COMMON.INTERNAL_SERVER_ERROR });
   }
 };
 
 export const changeUserRoleHandler = async (req, res) => {
   try {
     const userId = req.params.userId;
     const { role } = req.body;
-    if (role === 'user' || role === 'admin') {
+    if (role === Role.User || role === Role.Admin) {
       const user = await User.findById(userId);
       if (!user)
         return res
@@ -29,6 +33,7 @@ export const changeUserRoleHandler = async (req, res) => {
     }
     return res.status(HTTP_STATUS.OK).json({ message: RESPONSE_MESSAGES.USERS.UPDATE });
   } catch (error) {
+    console.log(error);
     res
       .status(HTTP_STATUS.INTERNAL_SERVER_ERROR)
       .json({ message: RESPONSE_MESSAGES.COMMON.INTERNAL_SERVER_ERROR, error: error });
@@ -45,6 +50,7 @@ export const deleteUserHandler = async (req, res) => {
         .json({ message: RESPONSE_MESSAGES.USERS.USER_NOT_EXISTS });
     res.status(HTTP_STATUS.NO_CONTENT).json({ message: RESPONSE_MESSAGES.USERS.DELETED });
   } catch (error) {
+    console.log(error);
     res
       .status(HTTP_STATUS.INTERNAL_SERVER_ERROR)
       .json({ message: RESPONSE_MESSAGES.COMMON.INTERNAL_SERVER_ERROR, error: error });
diff --git a/backend/middlewares/auth-middleware.js b/backend/middlewares/auth-middleware.js
@@ -2,6 +2,7 @@ import { JWT_SECRET } from '../config/utils.js';
 import { ApiError } from '../utils/api-error.js';
 import { HTTP_STATUS, RESPONSE_MESSAGES } from '../utils/constants.js';
 import jwt from 'jsonwebtoken';
+import { Role } from '../types/role-type.js';
 
 export const authMiddleware = async (req, res, next) => {
   const token = req.cookies?.access_token;
@@ -22,7 +23,7 @@ export const authMiddleware = async (req, res, next) => {
 
 export const isAdminMiddleware = async (req, res, next) => {
   const role = req.user.role;
-  if (role !== 'ADMIN') {
+  if (role !== Role.Admin) {
     return new ApiError(HTTP_STATUS.UNAUTHORIZED, RESPONSE_MESSAGES.USERS.UNAUTHORIZED_USER);
   }
   next();
diff --git a/backend/models/user.js b/backend/models/user.js
@@ -3,6 +3,7 @@ import JWT from 'jsonwebtoken';
 import bcrypt from 'bcryptjs';
 import crypto from 'crypto';
 import { ACCESS_TOKEN_EXPIRES_IN, JWT_SECRET, REFRESH_TOKEN_EXPIRES_IN } from '../config/utils.js';
+import { Role } from '../types/role-type.js';
 
 const userSchema = new Schema(
   {
@@ -47,8 +48,8 @@ const userSchema = new Schema(
     },
     role: {
       type: String,
-      default: 'USER',
-      enum: ['USER', 'ADMIN'],
+      default: Role.User,
+      enum: [Role.User, Role.Admin],
     },
     posts: [
       {
diff --git a/backend/types/role-type.js b/backend/types/role-type.js
@@ -0,0 +1,4 @@
+export const Role = {
+  Admin: 'ADMIN',
+  User: 'USER',
+};
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -6,10 +6,10 @@ export default [
   { languageOptions: { globals: globals.browser } },
   ...tseslint.configs.recommended,
   pluginReactConfig,
-  { 
-    rules: { 
-      'react/react-in-jsx-scope': 'off' , 
-      'react/no-unescaped-entities': 'off'
-    } 
-  }
+  {
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react/no-unescaped-entities': 'off',
+    },
+  },
 ];
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -13,6 +13,8 @@ import UnprotectedRoute from './components/unprotected-route';
 import { useLayoutEffect } from 'react';
 import RequireAuth from './components/require-auth';
 import useThemeClass from './utils/theme-changer';
+import AdminContainer from './components/admin-container';
+import { Role } from './types/role-type.tsx';
 
 function App() {
   useLayoutEffect(() => {
@@ -30,12 +32,14 @@ function App() {
               <Route path="signin" element={<SignIn />} />
               <Route path="signup" element={<SignUp />} />
             </Route>
-            <Route element={<RequireAuth allowedRole={['ADMIN', 'USER']} />}>
+            <Route element={<RequireAuth allowedRole={[Role.Admin, Role.User]} />}>
               <Route path="add-blog" element={<AddBlog />} />
             </Route>
-            <Route path="admin" element={<RequireAuth allowedRole={['ADMIN']} />}>
-              <Route path="users" element={<AdminUsers />} />
-              <Route path="blogs" element={<AdminBlogs />} />
+            <Route path="admin" element={<RequireAuth allowedRole={[Role.Admin]} />}>
+              <Route element={<AdminContainer />}>
+                <Route path="users" element={<AdminUsers />} />
+                <Route path="blogs" element={<AdminBlogs />} />
+              </Route>
             </Route>
           </Route>
           <Route path="*" element={<NotFound />} />
diff --git a/frontend/src/components/admin-sidebar.tsx b/frontend/src/components/admin-sidebar.tsx
@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
 import UserIcon from '@/assets/svg/user-icon';
 import BlogIcon from '@/assets/svg/blog-icon';
 import BarIcons from '@/assets/svg/bars-icon';
@@ -8,6 +8,8 @@ import CloseIcon from '@/assets/svg/close-icon';
 const AdminSidebar = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
+  const navigate = useNavigate();
+
   return (
     <>
       <button
@@ -32,7 +34,12 @@ const AdminSidebar = () => {
           <CloseIcon />
         </button>
         <div className="border-b border-[#D9D9D9] bg-light  px-6 py-3 dark:border-gray-700 dark:bg-dark sm:p-6 ">
-          <h1 className="text-xl font-medium text-light-title dark:text-dark-title">WanderLust</h1>
+          <h1
+            onClick={() => navigate('/')}
+            className="cursor-pointer text-xl font-medium text-light-title dark:text-dark-title"
+          >
+            WanderLust
+          </h1>
         </div>
         <div className="flex flex-col gap-2 p-6">
           <NavLink
diff --git a/frontend/src/components/skeletons/post-card-skeleton.tsx b/frontend/src/components/skeletons/post-card-skeleton.tsx
@@ -6,16 +6,12 @@ export const PostCardSkeleton = () => {
       <div className="mb-4 mr-8 mt-4 rounded-lg bg-light shadow-md dark:bg-dark-card">
         <Skeleton className="h-48 w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
         <div className="p-4">
-          <Skeleton className="mb-2 h-3 w-full pr-2 bg-slate-200 dark:bg-slate-700" />
-          <Skeleton className="mb-2 h-6 w-full pr-2 bg-slate-200 dark:bg-slate-700" />
-          <Skeleton className="mb-2 sm:mb-4 h-6 w-full pr-2 bg-slate-200 dark:bg-slate-700" />
-          <div className="mt-1 sm:mt-2 flex flex-wrap gap-1 sm:gap-1.5">
-            <Skeleton
-              className={`h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700`}
-            />
-            <Skeleton
-              className={`h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700`}
-            />
+          <Skeleton className="mb-2 h-3 w-full bg-slate-200 pr-2 dark:bg-slate-700" />
+          <Skeleton className="mb-2 h-6 w-full bg-slate-200 pr-2 dark:bg-slate-700" />
+          <Skeleton className="mb-2 h-6 w-full bg-slate-200 pr-2 dark:bg-slate-700 sm:mb-4" />
+          <div className="mt-1 flex flex-wrap gap-1 sm:mt-2 sm:gap-1.5">
+            <Skeleton className={`h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700`} />
+            <Skeleton className={`h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700`} />
           </div>
         </div>
       </div>
diff --git a/frontend/src/layouts/header-layout.tsx b/frontend/src/layouts/header-layout.tsx
@@ -12,10 +12,12 @@ import Loader from '@/components/skeletons/loader';
 import useAuthData from '@/hooks/useAuthData';
 import userState from '@/utils/user-state';
 import { Link } from 'react-router-dom';
+import { Role } from '@/types/role-type.tsx';
 
 function header() {
   const navigate = useNavigate();
   const { token, loading } = useAuthData();
+  const user = userState.getUser();
 
   const handleLogout = async () => {
     try {
@@ -73,6 +75,17 @@ function header() {
                 <Loader />
               ) : token ? (
                 <div className="flex gap-2">
+                  {user?.role === Role.Admin && (
+                    <button
+                      className="active:scale-click hidden rounded border border-slate-50 px-4 py-2 hover:bg-slate-500/25 md:inline-block"
+                      onClick={() => {
+                        navigate('/admin/blogs');
+                      }}
+                    >
+                      Dashboard
+                    </button>
+                  )}
+
                   <button
                     className="active:scale-click hidden rounded border border-slate-50 px-4 py-2 hover:bg-slate-500/25 md:inline-block"
                     onClick={() => {
diff --git a/frontend/src/pages/admin-blogs.tsx b/frontend/src/pages/admin-blogs.tsx
@@ -1,42 +1,79 @@
 import PenIcon from '@/assets/svg/pen-icon';
 import TrasnIcon from '@/assets/svg/trash-icon';
-import { imageUrls } from '@/constants/images';
+import axiosInstance from '@/helpers/axios-instance';
+import formatPostTime from '@/utils/format-post-time';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Post from '@/types/post-type';
 
 const AdminBlogs = () => {
+  const [posts, setPosts] = useState<Post[]>([]);
+
+  const fetchData = async () => {
+    try {
+      const response = await axiosInstance.get('/api/posts');
+      setPosts(response?.data);
+    } catch (error) {
+      toast.error('Something went wrong! Please try again.');
+    }
+  };
+
+  const handleDelete = async (postId: string) => {
+    const response = await axiosInstance.delete('/api/posts/admin/' + postId);
+    if (response.status === 200) {
+      fetchData();
+      toast.success('Post successfully deleted !');
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <>
       <div className="w-full p-3 px-5 sm:p-12">
         <h1 className="absolute left-16 top-3 text-2xl font-bold text-light-title dark:text-dark-title  sm:static">
           Blogs
         </h1>
         <div className="mt-2 flex flex-col sm:mt-12">
-          <div className="flex  flex-row items-center justify-between gap-2 rounded-lg bg-light px-3 py-3 shadow-md dark:bg-dark-card sm:gap-5">
-            <img
-              src={imageUrls[1]}
-              className=" h-16 w-16 rounded-xl object-cover shadow-lg sm:h-24 sm:w-24"
-              alt=""
-            />
-            <div className="flex w-12 flex-1 grow flex-col justify-between gap-2">
-              <h4 className="w-full truncate text-base font-semibold text-light-title dark:text-dark-title sm:text-xl">
-                A Serene Escape to Bali's Hidden Beaches
-              </h4>
-              <p className="hidden w-full truncate text-sm text-light-description dark:text-dark-description sm:inline">
-                Explore Bali's tranquil shores and discover the best-hidden beaches the island has
-                to offer. Dive into the crystal-clear water
-              </p>
-              <p className="text-sm font-semibold text-[#6941C6] dark:text-dark-secondary">
-                Drew Cano • 1 Jan 2023
-              </p>
-            </div>
-            <div className="mt-2 flex flex-col gap-2 sm:mt-0 sm:flex-row ">
-              <button className="h-fit rounded-xl border-0 text-base font-semibold text-light-title dark:text-dark-title sm:text-xl">
-                <PenIcon />
-              </button>
-              <button className="h-fit rounded-xl border-0 text-base font-semibold text-light-title dark:text-dark-title sm:text-xl ">
-                <TrasnIcon />
-              </button>
-            </div>
-          </div>
+          {posts?.map((post: Post) => {
+            return (
+              <div
+                key={post?._id}
+                className="mb-3 flex flex-row items-center justify-between gap-2 rounded-lg bg-light px-3 py-3 shadow-md dark:bg-dark-card sm:gap-5"
+              >
+                <img
+                  src={post?.imageLink}
+                  className=" h-16 w-16 rounded-xl object-cover shadow-lg sm:h-24 sm:w-24"
+                  alt=""
+                />
+                <div className="flex w-12 flex-1 grow flex-col justify-between gap-2">
+                  <h4 className="w-full truncate text-base font-semibold text-light-title dark:text-dark-title sm:text-xl">
+                    {post?.title}
+                  </h4>
+                  <p className="hidden w-full truncate text-sm text-light-description dark:text-dark-description sm:inline">
+                    {post?.description}
+                  </p>
+                  <p className="text-sm font-semibold text-[#6941C6] dark:text-dark-secondary">
+                    {post?.authorName} • {formatPostTime(post?.timeOfPost)}
+                  </p>
+                </div>
+                <div className="mt-2 flex flex-col gap-2 sm:mt-0 sm:flex-row ">
+                  <button className="h-fit rounded-xl border-0 text-base font-semibold text-light-title dark:text-dark-title sm:text-xl">
+                    <PenIcon />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(post?._id)}
+                    className="h-fit rounded-xl border-0 text-base font-semibold text-light-title dark:text-dark-title sm:text-xl "
+                  >
+                    <TrasnIcon />
+                  </button>
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </>
diff --git a/frontend/src/pages/admin-users.tsx b/frontend/src/pages/admin-users.tsx
diff --git a/frontend/src/types/role-type.tsx b/frontend/src/types/role-type.tsx
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
