fix: blogs and pages draft/publish

feat: blogs and pages set author
Merge branch 'main' into dev
2025-03-05 05:38:02 +07:00 · 2025-03-05 00:13:49 +07:00 · 2025-03-04 21:15:40 +07:00 · 2025-03-04 20:52:31 +07:00 · 2025-03-04 20:49:12 +07:00 · 2025-03-04 19:21:58 +07:00
13 changed files with 203 additions and 176 deletions
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -3908,8 +3908,8 @@ a.logo:hover {
  display: none;
 }

-.body-scrolled .social-nav {
-  color: var(--color-dark-3);
+.social-nav:hover {
+  color: #00abad;
 }

 /* Menu sub */
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@ -33,9 +33,7 @@ export default function MainLayout({
      <body className="appear-animate body">
        <div className="theme-slick">
          <div className="page" id="top">
-            <nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
-              <Header links={navMenuData} />
-            </nav>
+            <Header links={navMenuData} />
            <main id="main">{children}</main>
            <Footer />
          </div>
--- a/src/collections/Blogs.ts
+++ b/src/collections/Blogs.ts
@ -1,10 +1,16 @@
 import formatSlug from "@/utils/payload/formatSlug";
+import setAuthor from "@/utils/payload/setAuthor";
 import { lexicalEditor } from "@payloadcms/richtext-lexical";
 import type { CollectionConfig } from "payload";

 export const Blogs: CollectionConfig = {
  slug: "blogs",
  labels: { plural: "Posts", singular: "Post" },
+  versions: {
+    drafts: {
+      validate: true,
+    },
+  },
  fields: [
    {
      name: "title",
@ -65,32 +71,27 @@ export const Blogs: CollectionConfig = {
        },
      ],
    },
-    {
-      name: "is_published",
-      label: "Published",
-      type: "checkbox",
-      defaultValue: true,
-      admin: {
-        position: "sidebar",
-      },
-    },
    {
      name: "createdBy",
      type: "relationship",
      relationTo: "users",
-      hidden: true,
-      // hooks: {
-      //   beforeChange: [setAuthor],
-      // },
+      hooks: {
+        beforeChange: [setAuthor],
+      },
+      admin: {
+        hidden: true,
+      },
    },
    {
      name: "updatedBy",
      type: "relationship",
      relationTo: "users",
-      hidden: true,
-      // hooks: {
-      //   beforeChange: [setAuthor],
-      // },
+      hooks: {
+        beforeChange: [setAuthor],
+      },
+      admin: {
+        hidden: true,
+      },
    },
  ],
  admin: {
--- a/src/collections/Pages.ts
+++ b/src/collections/Pages.ts
@ -8,10 +8,16 @@ import { HorizontalImageContentBlock } from "@/blocks/HorizontalImageContent";
 import { ImageSliderBlock } from "@/blocks/ImageSlider";
 import { OurTeamBlock } from "@/blocks/OurTeam";
 import formatSlug from "@/utils/payload/formatSlug";
+import setAuthor from "@/utils/payload/setAuthor";
 import { CollectionConfig } from "payload";

 export const Pages: CollectionConfig = {
  slug: "pages",
+  versions: {
+    drafts: {
+      validate: true,
+    },
+  },
  fields: [
    {
      name: "title",
@ -29,9 +35,6 @@ export const Pages: CollectionConfig = {
      name: "slug",
      label: "Page Slug",
      type: "text",
-      admin: {
-        position: "sidebar",
-      },
      hooks: {
        beforeValidate: [formatSlug("title")],
      },
@ -75,6 +78,28 @@ export const Pages: CollectionConfig = {
        },
      ],
    },
+    {
+      name: "createdBy",
+      type: "relationship",
+      relationTo: "users",
+      hooks: {
+        beforeChange: [setAuthor],
+      },
+      admin: {
+        hidden: true,
+      },
+    },
+    {
+      name: "updatedBy",
+      type: "relationship",
+      relationTo: "users",
+      hooks: {
+        beforeChange: [setAuthor],
+      },
+      admin: {
+        hidden: true,
+      },
+    },
  ],
  admin: {
    hideAPIURL: true,
--- a/src/components/Blogs/Blog.tsx
+++ b/src/components/Blogs/Blog.tsx
@ -15,24 +15,12 @@ export default async function Blog() {
        <div className="row mb-60 mb-sm-40">
          <div className="col-lg-8 offset-lg-2 text-center mb-md-30">
            <h2 className="section-caption-slick mb-30 mb-sm-20">Our Blog</h2>
-            <h3 className="section-title mb-30">Check the latest news about our company in our blog.</h3>
-            <p className="section-descr mb-0">
-              There are three kinds of web developer specialization front-end developer, back-end developer, and
-              full-stack developer.
+            <h3 className="section-title-large mb-30">Knowledge and Support for Your Cancer Journey</h3>
+            <p className="mb-0">
+              Cancer treatment involves a team of specialists providing personalized, comprehensive care. Staying
+              informed and engaged empowers you to choose the best approach. Remember, you’re not alone in this journey.
            </p>
          </div>
-          <div className="col-lg-2 d-flex align-items-end">
-            <div className="local-scroll text-center text-lg-end w-100">
-              <Link href={`/slick-blog-dark`} className="link-hover-anim" data-link-animate="y">
-                <span className="link-strong link-strong-unhovered">
-                  Our blog <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                </span>
-                <span className="link-strong link-strong-hovered" aria-hidden="true">
-                  Our blog <i className="mi-arrow-right size-24" aria-hidden="true"></i>
-                </span>
-              </Link>
-            </div>
-          </div>
        </div>
        {/* Blog Posts Grid */}
        <div className="row mt-n30">
--- a/src/components/Blogs/BlogDetail.tsx
+++ b/src/components/Blogs/BlogDetail.tsx
@ -4,6 +4,7 @@ import { RichText } from "@payloadcms/richtext-lexical/react";
 import { headers } from "next/headers";
 import Image from "next/image";
 import { notFound } from "next/navigation";
+import Blog from "./Blog";

 export interface BlogDetailProps {
  slug: string | undefined;
@ -48,10 +49,14 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
              {/* End Post */}
            </div>
            {/* End Content */}
+            <hr style={{ width: "100%", border: "1px solid #aaa" }} />
          </div>
        </div>
      </section>
      {/* End Section */}
+      <div className="mb-5">
+        <Blog />
+      </div>
    </>
  );
 }
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -5,66 +5,79 @@ import { navMenuData } from "@/data/menu";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Image from "next/image";
 import Link from "next/link";
-import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
+import { FaFacebook, FaLinkedin, FaPhone } from "react-icons/fa";
 const shareIcons: Record<string, any> = {
-  facebook: <FaFacebook className="social-nav text-2xl lg:text-gray-300" />,
-  linkedin: <FaLinkedin className="social-nav text-2xl lg:text-gray-300" />,
-  twitter: <FaTwitter className="social-nav text-2xl lg:text-gray-300" />,
+  phone: {
+    link: "tel:+15208036644",
+    dom: (
+      <span className="social-nav flex gap-3 text-2xl lg:text-[#00898b]">
+        <FaPhone />
+        <b className="text-sm">(520) 803-6644</b>
+      </span>
+    ),
+  },
+  facebook: {
+    link: "https://www.facebook.com/p/Cochise-Oncology-61556262839823",
+    dom: <FaFacebook className="social-nav text-2xl lg:text-[#00898b]" />,
+  },
+  linkedin: {
+    link: "https://linkedin.com/company/cochise-oncology",
+    dom: <FaLinkedin className="social-nav text-2xl lg:text-[#00898b]" />,
+  },
 };

 export default function Header({ links }: { links: typeof navMenuData }) {
  return (
-    <div className="main-nav-sub full-wrapper">
-      {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
+    <nav className="main-nav dark stick-fixed wow-menubar wch-unset relative">
+      <div className="main-nav-sub full-wrapper">
+        {/* Logo  (* Add your text or image to the link tag. Use SVG or PNG image format. 
              If you use a PNG logo image, the image resolution must be equal 200% of the visible logo
              image size for support of retina screens. See details in the template documentation. *) */}
-      <div className="nav-logo-wrap local-scroll">
-        <Link href={`/`} className="logo">
-          <Image
-            src="/assets/images/demo-slick/logo-dark.webp"
-            alt="Your Company Logo"
-            width={105}
-            height={34}
-            className="light-mode-logo"
-          />
-          <Image
-            src="/assets/images/demo-slick/logo-dark.webp"
-            alt="Your Company Logo"
-            width={405}
-            height={34}
-            className="dark-mode-logo"
-          />
-        </Link>
+        <div className="nav-logo-wrap local-scroll">
+          <Link href={`/`} className="logo">
+            <Image
+              src="/assets/images/demo-slick/logo-dark.webp"
+              alt="Your Company Logo"
+              width={105}
+              height={34}
+              className="light-mode-logo"
+            />
+            <Image
+              src="/assets/images/demo-slick/logo-dark.webp"
+              alt="Your Company Logo"
+              width={405}
+              height={34}
+              className="dark-mode-logo"
+            />
+          </Link>
+        </div>
+        {/* Mobile Menu Button */}
+        <div onClick={toggleMobileMenu} className="mobile-nav" role="button" tabIndex={0}>
+          <i className="mobile-nav-icon" />
+          <span className="visually-hidden">Menu</span>
+        </div>
+        {/* Main Menu */}
+        <div className="inner-nav desktop-nav">
+          <ul className="clearlist local-scroll">
+            {/* Item With Sub */}
+            <HeaderNav links={links} />
+            {/* End Item With Sub */}
+          </ul>
+          <ul className="items-end clearlist">
+            {Object.keys(shareIcons).map((k, idx) => {
+              return (
+                <li key={idx} className="!p-0 !m-0">
+                  <a className="cursor-pointer" href={shareIcons[k].link} target="_blank">
+                    {shareIcons[k].dom}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        {/* End Main Menu */}
      </div>
-      {/* Mobile Menu Button */}
-      <div onClick={toggleMobileMenu} className="mobile-nav" role="button" tabIndex={0}>
-        <i className="mobile-nav-icon" />
-        <span className="visually-hidden">Menu</span>
-      </div>
-      {/* Main Menu */}
-      <div className="inner-nav desktop-nav">
-        <ul className="clearlist local-scroll">
-          {/* Item With Sub */}
-          <HeaderNav links={links} />
-          {/* End Item With Sub */}
-        </ul>
-        <ul className="items-end clearlist">
-          {/* Languages */}
-          {/* <LanguageSelect /> */}
-          {/* End Languages */}
-          <li></li>
-        </ul>
-      </div>
-      <div className="flex mt-4 gap-3">
-        {Object.keys(shareIcons).map((k, idx) => {
-          return (
-            <a key={idx} className="cursor-pointer" href={"/"} target="_blank">
-              {shareIcons[k]}
-            </a>
-          );
-        })}
-      </div>
-      {/* End Main Menu */}
-    </div>
+    </nav>
  );
 }
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@ -56,7 +56,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n

            {Array.isArray(link?.child) && (
              <>
-                <Link href={link?.href ?? "#"} className="mn-has-sub">
+                <Link href={link?.href ?? "#"} className="mn-has-sub flex justify-between">
                  {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
                </Link>

@ -70,8 +70,8 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                      )}
                      {Array.isArray(subLink?.child) && (
                        <>
-                          <Link href={subLink?.href ?? "#"} className="mn-has-sub">
-                            {subLink.text}
+                          <Link href={subLink?.href ?? "#"} className="mn-has-sub !flex !justify-between">
+                            <span>{subLink.text}</span>
                            <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
                          </Link>

--- a/src/components/Homepage.tsx
+++ b/src/components/Homepage.tsx
@ -57,55 +57,61 @@ export default function homepage({ dark = false }) {
          </Link>
        </div>
      </section>
-      <section className="w-full py-10 flex flex-col items-center">
-        <div className="w-11/12 md:w-3/4 lg:w-2/3 bg-white p-6 md:p-8 rounded-lg shadow-lg">
-          <p className="italic text-gray-700">
-            I was diagnosed with cancer up in Tucson. The doctor was said to be best oncologist in the state. Problem
-            was I needed radiation for 45 days not counting weekends and holidays.
-          </p>
-          <p className="italic text-gray-700 mt-4">
-            I had to tell her that that was not doable. I couldn't commute daily and I couldn't rent. I told her that I
-            could get treatment of some sort in Sierra Vista. She told me that normally she would fight me, but only 2
-            Clinics in the state had this latest and greatest radiation hardware. Hers and Cochise Oncology in Sierra
-            Vista.
-          </p>
-          <p className="italic text-gray-700 mt-4">
-            I had to tell her that that was not doable. I couldn't commute daily and I couldn't rent. I told her that I
-            could get treatment of some sort in Sierra Vista. She told me that normally she would fight me, but only 2
-            Clinics in the state had this latest and greatest radiation hardware. Hers and Cochise Oncology in Sierra
-            Vista.
-          </p>
-          <p className="italic text-gray-700 mt-4">Do yourself a favor and see Dr. Vedula.</p>
-          <p className="font-bold text-indigo-600 mt-4">- a Cochise Oncology patient</p>
-          <p className="text-sm text-gray-500 text-center mt-4">*Individual Results May Vary</p>
-        </div>
-      </section>
-      <section className="py-5 w-full items-center">
-        <div className="max-w-7xl mx-auto p-6 text-center">
-          <h2>Testimonials</h2>
-          <div className="text-left text-gray-700 space-y-4">
-            <p className="italic">
-              I was diagnosed with cancer up in Tucson. The doctor was said to be the best oncologist in the state.
-              Problem was I needed radiation for 45 days not counting weekends and holidays.
-            </p>
-            <p className="italic">
-              I had to tell her that that was not doable. I couldn't commute daily and I couldn't rent. I told her that
-              I could get treatment of some sort in Sierra Vista. She told me that normally she would fight me, but only
-              2 clinics in the state had this latest and greatest radiation hardware. Hers and Cochise Oncology in
-              Sierra Vista.
-            </p>
-            <p className="italic">
-              At Cochise Oncology I was introduced to Dr. Vedula. What a good man and what a great doctor. Check out his
-              credentials. I am now cancer free for 9 months. It was still 45 days of treatment but no side effects.
-              Plus, I would go home every day after undergoing treatment. I forget, maybe 15 minutes of treatment.
-            </p>
-            <p>Do yourself a favor and see Dr. Vedula.</p>
-            <p className="font-bold text-gray-900">- a Cochise Oncology patient</p>
+      <section className="py-5 w-full flex flex-col">
+        <div className="relative flex justify-center">
+          <div className="w-full md:w-1/2 self-center mt-[-70px] mb-50 flex justify-center">
+            <div className="bg-white h-full flex flex-col lg:flex-row flex-wrap justify-center p-4 lg:p-8 gap-3 rounded-xl shadow-xl">
+              <blockquote
+                className="self-center border-teal-500 pl-4 italic text-gray-800"
+                style={{ borderLeft: "4px solid #eee" }}
+              >
+                I was diagnosed with cancer up in Tucson. The doctor was said to be best oncologist in the state.
+                Problem was I needed radiation for 45 days not counting weekends and holidays.
+                <br />
+                <br />
+                I had to tell her that that was not doable. I couldn&apos;t commute daily and I couldn&apos;t rent. I
+                told her that I could get treatment of some sort in Sierra Vista. She told me that normally she would
+                fight me, but only 2 Clinics in the state had this latest and greatest radiation hardware. Hers and
+                Cochise Oncology in Sierra Vista.
+                <br />
+                <br />
+                At Cochise Oncology I was introduced to Dr. Vedula. What a good man and what a great doctor. Check out
+                his credentials. I am now cancer free for 9 months. It was still 45 days of treatment but no side
+                effects. Plus, I would go home every day after undergoing treatment. I forget, maybe 15 minutes of
+                treatment.
+                <br />
+                <br />
+                Do yourself a favor and see Dr. Vedula.
+                <br></br>
+                <b>-a Cochise Oncology patient</b>
+              </blockquote>
+            </div>
          </div>
-          <p className="text-sm text-gray-500 mt-4">*Individual Results May Vary</p>
        </div>
-      </section>
-      <section className="py-5 w-full items-center">
+        <h1 className="w-full text-center !font-light">Testimonials</h1>
+        <blockquote
+          className="w-full md:w-8/12 self-center border-teal-500 pl-4 italic text-gray-800"
+          style={{ borderLeft: "4px solid #eee" }}
+        >
+          I was diagnosed with cancer up in Tucson. The doctor was said to be best oncologist in the state. Problem was
+          I needed radiation for 45 days not counting weekends and holidays.
+          <br />
+          <br />
+          I had to tell her that that was not doable. I couldn&apos;t commute daily and I couldn&apos;t rent. I told her
+          that I could get treatment of some sort in Sierra Vista. She told me that normally she would fight me, but
+          only 2 Clinics in the state had this latest and greatest radiation hardware. Hers and Cochise Oncology in
+          Sierra Vista.
+          <br />
+          <br />
+          At Cochise Oncology I was introduced to Dr. Vedula. What a good man and what a great doctor. Check out his
+          credentials. I am now cancer free for 9 months. It was still 45 days of treatment but no side effects. Plus, I
+          would go home every day after undergoing treatment. I forget, maybe 15 minutes of treatment.
+          <br />
+          <br />
+          Do yourself a favor and see Dr. Vedula.
+          <br></br>
+          <b>-a Cochise Oncology patient</b>
+        </blockquote>
        <Testimonials />
      </section>
      <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)] bg-cover">
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@ -146,11 +146,11 @@ export interface Blog {
    description?: string | null;
    canonical_url?: string | null;
  };
-  is_published?: boolean | null;
  createdBy?: (number | null) | User;
  updatedBy?: (number | null) | User;
  updatedAt: string;
  createdAt: string;
+  _status?: ('draft' | 'published') | null;
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
@ -306,8 +306,11 @@ export interface Page {
    description?: string | null;
    cannonical_url?: string | null;
  };
+  createdBy?: (number | null) | User;
+  updatedBy?: (number | null) | User;
  updatedAt: string;
  createdAt: string;
+  _status?: ('draft' | 'published') | null;
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
@ -644,11 +647,11 @@ export interface BlogsSelect<T extends boolean = true> {
        description?: T;
        canonical_url?: T;
      };
-  is_published?: T;
  createdBy?: T;
  updatedBy?: T;
  updatedAt?: T;
  createdAt?: T;
+  _status?: T;
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
@ -747,8 +750,11 @@ export interface PagesSelect<T extends boolean = true> {
        description?: T;
        cannonical_url?: T;
      };
+  createdBy?: T;
+  updatedBy?: T;
  updatedAt?: T;
  createdAt?: T;
+  _status?: T;
 }
 /**
 * This interface was referenced by `Config`'s JSON-Schema
--- a/src/services/payload/blog.ts
+++ b/src/services/payload/blog.ts
@ -10,24 +10,11 @@ export async function fetchBlog(page: number | undefined, search: string = "") {
    pagination: true,
    limit: 6,
    where: !search
-      ? {
-          is_published: {
-            equals: true,
-          },
-        }
+      ? undefined
      : {
-          and: [
-            {
-              is_published: {
-                equals: true,
-              },
-            },
-            {
-              title: {
-                contains: search,
-              },
-            },
-          ],
+          title: {
+            contains: search,
+          },
        },
  });

@ -51,9 +38,6 @@ export async function fetchBlogDetail(slug: string | undefined) {
    collection: "blogs",
    where: {
      slug: { equals: slug },
-      is_published: {
-        equals: true,
-      },
    },
    limit: 1,
    pagination: false,
--- a/src/utils/changeHeaderOnScroll.ts
+++ b/src/utils/changeHeaderOnScroll.ts
@ -2,11 +2,9 @@ export const headerChangeOnScroll = () => {
  const mainNav = document.querySelector(".main-nav");
  const lightAfterScroll = document.querySelector(".light-after-scroll");
  if (window.scrollY > 0) {
-    mainNav?.classList.remove("transparent");
    mainNav?.classList.add("body-scrolled");
    if (lightAfterScroll) lightAfterScroll.classList.remove("dark");
  } else if (window.scrollY === 0) {
-    mainNav?.classList.add("transparent");
    mainNav?.classList.remove("body-scrolled");
    if (lightAfterScroll) lightAfterScroll.classList.add("dark");
  }
--- a/src/utils/payload/setAuthor.ts
+++ b/src/utils/payload/setAuthor.ts
@ -1,14 +1,17 @@
 import { FieldHook } from "payload";

-const setAuthor: FieldHook = ({ req, operation, data, value }) => {
-  // if (req.user && !!data) {
-  //   if (operation === "create") {
-  //     data.createdBy = req.user.id;
-  //   }
-  //   data.updatedBy = req.user.id;
-  // }
+const setAuthor: FieldHook = ({ value, req, data, field, operation }) => {
+  if (req.user && !!data) {
+    if (operation === "create") {
+      return req.user.id;
+    } else {
+      if (field.name === "updatedBy") {
+        return req.user.id;
+      }
+    }
+  }

-  return data;
+  return value;
 };

 export default setAuthor;
Author	SHA1	Message	Date
RizqiSyahrendra	6fc4988506	fix: blogs and pages draft/publish	2025-03-05 05:38:02 +07:00
RizqiSyahrendra	807e78aa70	feat: blogs and pages set author	2025-03-05 00:13:49 +07:00
RizqiSyahrendra	fccd846349	Merge branch 'main' into dev	2025-03-04 21:15:40 +07:00
Val	9d9ce1737a	fix: nav href	2025-03-04 20:52:31 +07:00
Val	11fe7eafda	fix: nav	2025-03-04 20:49:12 +07:00
Val	62bfec7c87	feat: blockquote	2025-03-04 19:21:58 +07:00
Val	6e231f5485	fix: header	2025-03-04 18:59:25 +07:00
Val	01436f46b6	fix: social media hover	2025-03-04 17:54:21 +07:00
Val	efb92d0833	feat: explore more	2025-03-04 17:32:01 +07:00