EdwinDev6 · Arzoid29 · Jul 5, 2023 · Jul 4, 2023 · Jul 4, 2023 · Jul 4, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "eslint-config-react-app": "^7.0.1",
     "formik": "^2.2.9",
     "jsonwebtoken": "^9.0.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",

diff --git a/src/components/Login/index.jsx b/src/components/Login/index.jsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
 import useAuth from "../../hooks/useAuth";
 import axios from "axios";
 
@@ -12,9 +11,8 @@ const Signin = () => {
 
   const { setAuth } = useAuth();
 
-  const location = useLocation();
-  const navigate = useNavigate();
-  const from = location.state?.from?.pathname || "/";
+
+
 
   const handleChange = ({ currentTarget: input }) => {
     setData({ ...data, [input.name]: input.value });
@@ -30,7 +28,7 @@ const Signin = () => {
       setAuth({ roles, token });
 
       console.log(roles);
-      navigate(from, { replace: true });
+      window.location= "/homeuser"
     } catch (error) {
       if (
         error.response &&
@@ -68,7 +66,7 @@ const Signin = () => {
           <div className="flex-1">
             <div className="text-center">
               <h2 className="text-4xl font-bold text-center text-gray-700 dark:text-white">
-                TechTalk{" "}
+                TechTalk
               </h2>
               <p className="mt-3 text-gray-500 dark:text-gray-300">
                 Sign in to access your account

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,60 +1,72 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
 
-
-
-
- const Navbar = () => {
-  const handleLogout = ()=> {
+const Navbar = () => {
+  const handleLogout = () => {
     localStorage.removeItem("token");
     window.location.reload("/login");
-  }
+  };
+
   const [open, setOpen] = useState(true);
 
   const toggleMenu = () => {
     setOpen(!open);
   };
-
-
-
-
 
   return (
-
-      <div className="antialiased bg-gray-100 dark-mode:bg-gray-900">
-        <div className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
-          <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
-            <div className="flex flex-row items-center justify-between p-4">
-              <a href="/" className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline ">TechTalk News</a>
-              <button className="rounded-lg md:hidden focus:outline-none focus:shadow-outline" onClick={toggleMenu}>
-                <svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
-                  {open ? (
-                    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
-                  ) : (
-                    <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clipRule="evenodd"></path>
-                  )}
-                </svg>
+    <div className="antialiased bg-gray-100 dark-mode:bg-gray-900">
+      <div className="w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
+        <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
+          <div className="flex flex-row items-center justify-between p-4">
+            <Link to="/" className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
+              TechTalk News
+            </Link>
+            <button className="rounded-lg md:hidden focus:outline-none focus:shadow-outline" onClick={toggleMenu}>
+              <svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
+                {open ? (
+                  <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
+                ) : (
+                  <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clipRule="evenodd"></path>
+                )}
+              </svg>
+            </button>
+          </div>
+          <nav className={`flex-col flex-grow ${open ? 'flex' : 'hidden'} pb-4 md:pb-0 md:flex md:justify-end md:flex-row`}>
+            <Link
+              to="/homeuser"
+              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+            >
+              Home
+            </Link>
+            <Link
+              to="/new"
+              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+            >
+              Create Post
+            </Link>
+            <Link
+              to="/"
+              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+            >
+              Admin Page
+            </Link>
+            <Link
+              to="/contact"
+              className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+            >
+              Contact
+            </Link>
+            <div className="relative" onClick={() => setOpen(false)}>
+              <button className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" onClick={handleLogout}>
+                logout <FontAwesomeIcon icon={faSignOutAlt} />
               </button>
             </div>
-            <nav className={`flex-col flex-grow ${open ? 'flex' : 'hidden'} pb-4 md:pb-0 md:flex md:justify-end md:flex-row`}>
-              <a className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="/homeuser">Home</a>
-              <a className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="/new">Create Post</a>
-              <a className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="/">Admin Page</a>
-              <a className="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="/contact">Contact</a>
-              <div className="relative" onClick={() => setOpen(false)}>
-                <button className="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline " onClick = {handleLogout}>
-                 logout  <FontAwesomeIcon icon={faSignOutAlt} />
-
-                </button>
-
-
-              </div>    
-            </nav>
-          </div>
+          </nav>
         </div>
       </div>
-
+    </div>
   );
 };
 

diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
@@ -1,11 +1,37 @@
 import toast from "react-hot-toast";
 import { usePosts } from "../context/postContext";
 import { useNavigate } from "react-router-dom";
+import moment from "moment";
+
+export function insertMedia(filePath) {
+  var extension = filePath.split(".").pop().toLowerCase();
+
+  if (
+    extension === "jpg" ||
+    extension === "jpeg" ||
+    extension === "png" ||
+    extension === "gif"
+  ) {
+    return <img src={filePath} alt="Imagen" />;
+  } else if (
+    extension === "mp4" ||
+    extension === "webm" ||
+    extension === "ogv"
+  ) {
+    return (
+      <video src={filePath} alt="Video" controls autoPlay muted loop></video>
+    );
+  } else {
+    return <p>Unsupported file type</p>;
+  }
+}
 
 export function PostCard({ post }) {
   const { deletePost } = usePosts();
   const navigate = useNavigate();
 
+  const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
+
   const handleDelete = (id) => {
     toast(
       (t) => (
@@ -49,14 +75,14 @@ export function PostCard({ post }) {
           <img
             className="w-12 rounded-full"
             src="https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
-            alt="Alex"
+            alt="img Logo"
           />
           <div className="ml-3">
             <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
               TechTalk
             </h1>
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
-              {post.createdAt}
+              {normalDate}
             </p>
           </div>
         </div>
@@ -77,7 +103,8 @@ export function PostCard({ post }) {
         </div>
       </div>
 
-      {post.image && <img src={post.image.url} alt="imagen " />}
+      {post.image && insertMedia(post.image.url)}
+
       <div className="p-6">
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
         <p className="text-lg font font-thin  text-black">{post.description}</p>

diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
@@ -1,32 +1,49 @@
-
-
-
+import moment from "moment";
+import { insertMedia } from "./PostCard";
 export function PostCardUser({ post }) {
-
+  const normalDate = moment(post.createdAt).format("DD/MM/YYYY");
   return (
-
     <div className="container mx-auto max-w-sm bg-white rounded-xl shadow-lg hover:scale-105 hover:shadow-2xl transform transition-all duration-500 m-10">
       <div className="flex items-center justify-between px-4">
         <div className="flex justify-between items-center py-4">
-          <img className="w-12 rounded-full" src="https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Alex" />
+          <img
+            className="w-12 rounded-full"
+            src="https://images.unsplash.com/photo-1585829365295-ab7cd400c167?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
+            alt="logo"
+          />
           <div className="ml-3">
-            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">TechTalk</h1>
-            <p className="text-sm text-gray-800 hover:underline cursor-pointer">{post.createdAt}</p>
+            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+              TechTalk
+            </h1>
+            <p className="text-sm text-gray-800 hover:underline cursor-pointer">
+              {" "}
+              {normalDate}
+            </p>
           </div>
         </div>
         <div>
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-7 w-7 cursor-pointer"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+            />
           </svg>
         </div>
       </div>
-      {post.image && <img src={post.image.url}  alt="imagen " />}
+      {post.image && insertMedia(post.image.url)}
+
       <div className="p-6">
-
         <h2 className="text-xl text-gray-800 font-semibold">{post.title}</h2>
         <p className="text-lg font font-thin  text-black">{post.description}</p>
       </div>
     </div>
-
-);
-};
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -6614,6 +6614,11 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@^2.1.1, ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"