From 0dbcd18d5da02ea8f2dbcc61bd95093680546bf3 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Tue, 17 Oct 2023 14:02:15 -0400
Subject: [PATCH] feat(posts): Add author, category and source to admin and
 user views

---
 src/components/PostCard.jsx     |  4 +-
 src/components/PostCardUser.jsx |  6 ++-
 src/pages/PostForm.js           | 68 +++++++++++++++++++++++++++++----
 3 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 3121254..cf97731 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -89,11 +89,12 @@ export function PostCard({ post }) {
           <img className="w-12 rounded-full" src={logoImg} alt="img Logo" />
           <div className="ml-3">
             <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
-              TechTalk
+              {post.author}
             </h1>
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
               {normalDate}
             </p>
+            <p className="text-blue-400 capitalize "> {post.categories}</p>
           </div>
         </div>
         <div>
@@ -125,6 +126,7 @@ export function PostCard({ post }) {
         <p className="text-lg font font-thin  text-black text-justify">
           {post.description}
         </p>
+      <h4 className="text-gray-400 capitalize right-0"> Source:{post.source}</h4>
       </div>
     </article>
   );
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx
index ba2a790..9b6f68f 100644
--- a/src/components/PostCardUser.jsx
+++ b/src/components/PostCardUser.jsx
@@ -11,12 +11,13 @@ export function PostCardUser({ post }) {
         <div className="flex justify-between items-center py-4">
           <img className="w-12 rounded-full" src={logoImg} alt="logo" />
           <div className="ml-3">
-            <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
-              TechTalk
+          <h1 className="text-xl font-bold text-gray-800 cursor-pointer">
+              {post.author}
             </h1>
             <p className="text-sm text-gray-800 hover:underline cursor-pointer">
               {normalDate}
             </p>
+            <p className="text-blue-400 capitalize "> {post.categories}</p>
           </div>
         </div>
         <div>
@@ -44,6 +45,7 @@ export function PostCardUser({ post }) {
         <p className="text-lg font font-thin text-black text-justify">
           {post.description}
         </p>
+        <h4 className="text-gray-400 capitalize right-0"> Source:{post.source}</h4>
       </div>
     </article>
   );
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index cf4862f..6217a03 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -1,6 +1,6 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import { usePosts } from "../context/postContext";
-import { useNavigate, useParams, Link } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import * as Yup from "yup";
 import { useEffect, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
@@ -13,6 +13,9 @@ export function PostForm() {
     title: "",
     description: "",
     image: null,
+    categories: "",
+    source: "",
+    author: "",
   });
   const params = useParams();
 
@@ -23,6 +26,9 @@ export function PostForm() {
         setPost({
           title: post.title,
           description: post.description,
+          categories: post.categories,
+          source: post.source,
+          author: post.author,
         });
       }
     })();
@@ -31,14 +37,9 @@ export function PostForm() {
   return (
     <div className="flex items-center justify-center">
       <div className="bg-blue-950 p-10 shadow-md shadow-black mt-7 animate-fade-down animate-once animate-duration-500 animate-ease-linear">
-        <header className="flex justify-between items-center py-4 text-white">
+        <header className="flex justify between items-center py-4 text-white">
           <h3 className="text-xl">New Post</h3>
-          <Link
-            to="/admin"
-            className="text-gray-400 text-sm hover:text-white underline"
-          >
-            Go Back
-          </Link>
+          
         </header>
 
         <Formik
@@ -46,6 +47,9 @@ export function PostForm() {
           validationSchema={Yup.object({
             title: Yup.string().required("Title is Required"),
             description: Yup.string().required("Description is Required"),
+            categories: Yup.string(),
+            source: Yup.string(),
+            author: Yup.string(),
           })}
           onSubmit={async (values, actions) => {
             if (params.id) {
@@ -102,6 +106,54 @@ export function PostForm() {
                 name="description"
                 className="text-red-400 text-sm"
               />
+              <label
+                htmlFor="categories"
+                className="text-sm block font-bold text-gray-400"
+              >
+                Categories
+              </label>
+              <Field
+                name="categories"
+                placeholder="Categories"
+                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
+              />
+              <ErrorMessage
+                component="p"
+                name="categories"
+                className="text-red-400 text-sm"
+              />
+              <label
+                htmlFor="source"
+                className="text-sm block font-bold text-gray-400"
+              >
+                Source
+              </label>
+              <Field
+                name="source"
+                placeholder="Source"
+                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
+              />
+              <ErrorMessage
+                component="p"
+                name="source"
+                className="text-red-400 text-sm"
+              />
+              <label
+                htmlFor="author"
+                className="text-sm block font-bold text-gray-400"
+              >
+                Author
+              </label>
+              <Field
+                name="author"
+                placeholder="Author"
+                className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
+              />
+              <ErrorMessage
+                component="p"
+                name="author"
+                className="text-red-400 text-sm"
+              />
               <label
                 htmlFor="image"
                 className="text-sm block font-bold text-gray-400"