From 5d4d87c8bdb42c19e57a458fdc4d05de1ade4546 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 7 Mar 2023 15:03:35 +0700
Subject: add dynamic content

---
 src/core/components/elements/Navbar/Navbar.jsx   | 24 ++++--
 src/core/components/elements/Navbar/Search.jsx   |  4 +-
 src/core/components/elements/Sidebar/Sidebar.jsx |  4 +-
 src/lib/content/api/pageContentApi.js            | 13 ++++
 src/lib/content/components/PageContent.jsx       | 26 +++++++
 src/pages/about-us.jsx                           | 10 +++
 src/pages/contact-us.jsx                         | 10 +++
 src/pages/faqs.jsx                               | 99 ++----------------------
 8 files changed, 85 insertions(+), 105 deletions(-)
 create mode 100644 src/lib/content/api/pageContentApi.js
 create mode 100644 src/lib/content/components/PageContent.jsx
 create mode 100644 src/pages/about-us.jsx
 create mode 100644 src/pages/contact-us.jsx

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 1442b9fa..c88bfad3 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -139,20 +139,30 @@ const Navbar = () => {
 
         <div className='container mx-auto my-6'>
           <div className='flex bg-gray_r-4 rounded-t-xl'>
-            <div className="w-3/12 p-4 font-semibold">
-              Kategori Produk
-            </div>
+            <div className='w-3/12 p-4 font-semibold'>Kategori Produk</div>
             <div className='w-6/12 border-x border-gray_r-1 flex'>
-              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+              <Link
+                href='/'
+                className='p-4 flex-1 text-center !text-gray_r-12/80'
+              >
                 Promo Produk
               </Link>
-              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+              <Link
+                href='/'
+                className='p-4 flex-1 text-center !text-gray_r-12/80'
+              >
                 Semua Brand
               </Link>
-              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+              <Link
+                href='/'
+                className='p-4 flex-1 text-center !text-gray_r-12/80'
+              >
                 Ready Stock
               </Link>
-              <Link href='/' className='p-4 flex-1 text-center !text-gray_r-12/80'>
+              <Link
+                href='/'
+                className='p-4 flex-1 text-center !text-gray_r-12/80'
+              >
                 Blog Indoteknik
               </Link>
             </div>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index 644e0c9f..e78f7f29 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -3,8 +3,6 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Link from '../Link/Link'
 import { useRouter } from 'next/router'
-import MobileView from '../../views/MobileView'
-import DesktopView from '../../views/DesktopView'
 
 const Search = () => {
   const router = useRouter()
@@ -81,7 +79,7 @@ const Search = () => {
                 <Link
                   href={`/shop/search?q=${suggestion.term}`}
                   key={index}
-                  className='px-3 py-3 !text-gray_r-12 font-normal'
+                  className='px-3 py-3 !text-gray_r-12 font-normal hover:bg-yellow_r-4'
                 >
                   {suggestion.term}
                 </Link>
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 308538e7..b2514cbe 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -128,7 +128,7 @@ const Sidebar = ({ active, close }) => {
                 </SidebarLink>
                 <SidebarLink
                   className={itemClassName}
-                  href='/'
+                  href='/about-us'
                 >
                   Tentang Indoteknik
                 </SidebarLink>
@@ -140,7 +140,7 @@ const Sidebar = ({ active, close }) => {
                 </SidebarLink>
                 <SidebarLink
                   className={itemClassName}
-                  href='/'
+                  href='/contact-us'
                 >
                   Hubungi Kami
                 </SidebarLink>
diff --git a/src/lib/content/api/pageContentApi.js b/src/lib/content/api/pageContentApi.js
new file mode 100644
index 00000000..1e7c47e5
--- /dev/null
+++ b/src/lib/content/api/pageContentApi.js
@@ -0,0 +1,13 @@
+import odooApi from '@/core/api/odooApi'
+import _ from 'lodash-contrib'
+
+const pageContentApi = async ({ path }) => {
+  let query = {
+    url_path: path
+  }
+  query = _.toQuery(query)
+  const pageContent = await odooApi('GET', `/api/v1/page-content?${query}`)
+  return pageContent
+}
+
+export default pageContentApi
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
new file mode 100644
index 00000000..724f99c1
--- /dev/null
+++ b/src/lib/content/components/PageContent.jsx
@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { useState } from 'react'
+import pageContentApi from '../api/pageContentApi'
+
+const PageContent = ({ path }) => {
+  const [content, setContent] = useState(<></>)
+
+  useEffect(() => {
+    const loadContent = async () => {
+      const dataContent = await pageContentApi({ path })
+      if (dataContent) {
+        setContent(
+          <div
+            className='p-4 prose prose-gray prose-a:text-red_r-10 prose-p:my-0'
+            dangerouslySetInnerHTML={{ __html: dataContent.content }}
+          />
+        )
+      }
+    }
+    loadContent()
+  }, [path])
+
+  return content
+}
+
+export default PageContent
diff --git a/src/pages/about-us.jsx b/src/pages/about-us.jsx
new file mode 100644
index 00000000..9bc67673
--- /dev/null
+++ b/src/pages/about-us.jsx
@@ -0,0 +1,10 @@
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import PageContent from '@/lib/content/components/PageContent'
+
+export default function AboutUs() {
+  return (
+    <BasicLayout>
+      <PageContent path='/about-us' />
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/contact-us.jsx b/src/pages/contact-us.jsx
new file mode 100644
index 00000000..71f816db
--- /dev/null
+++ b/src/pages/contact-us.jsx
@@ -0,0 +1,10 @@
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import PageContent from '@/lib/content/components/PageContent'
+
+export default function ContactUs() {
+  return (
+    <BasicLayout>
+      <PageContent path='/contact-us' />
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/faqs.jsx b/src/pages/faqs.jsx
index ddbb4b0a..ec7a4b47 100644
--- a/src/pages/faqs.jsx
+++ b/src/pages/faqs.jsx
@@ -1,97 +1,10 @@
-import { useEffect, useState } from 'react'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import AppLayout from '@/core/components/layouts/AppLayout'
-
-const dataFaqs = [
-  {
-    id: 1,
-    name: 'Akun',
-    description: 'Bantuan tentang pengelolaan fitur dan akun'
-  },
-  {
-    id: 2,
-    name: 'Pembelian',
-    description:
-      'Bantuan seputar status stock, layanan pengiriman & asuransi hingga seluruh indonesia'
-  },
-  {
-    id: 3,
-    name: 'Metode Pembayaran',
-    description: 'Bantuan terkait layanan metode pembayaran'
-  },
-  {
-    id: 4,
-    name: 'Quotation',
-    description: 'Bantuan fitur RFQ & quotation Express'
-  },
-  {
-    id: 5,
-    name: 'Faktur Pajak & Invoice',
-    description: 'Bantuan seputar layanan terbit faktur pajak & invoice'
-  },
-  {
-    id: 6,
-    name: 'Pengembalian & Garansi',
-    description: 'Bantuan cara pengembalian produk & garansi produk'
-  }
-]
-
-export default function Faqs() {
-  const [faqs, setFaqs] = useState([])
-
-  useEffect(() => {
-    if (faqs.length == 0) {
-      setFaqs(
-        dataFaqs.map((dataFaq) => ({
-          ...dataFaq,
-          isOpen: false
-        }))
-      )
-    }
-  }, [faqs])
-
-  const toggleFaq = (id) => {
-    const faqsToUpdate = faqs.map((faq) => {
-      if (faq.id == id) faq.isOpen = !faq.isOpen
-      return faq
-    })
-    setFaqs(faqsToUpdate)
-  }
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import PageContent from '@/lib/content/components/PageContent'
 
+export default function ContactUs() {
   return (
-    <AppLayout title='FAQs'>
-      <div className='divide-y divide-gray_r-6'>
-        {faqs.map((faq, index) => (
-          <div
-            className='p-4'
-            key={index}
-          >
-            <div className='flex gap-x-3 items-center'>
-              <div className='flex-1'>
-                <p className='font-medium mb-1'>{faq.name}</p>
-                <p className='text-caption-1 text-gray_r-11'>{faq.description}</p>
-              </div>
-              <button
-                type='button'
-                className='p-2 rounded bg-gray_r-4 h-fit'
-                onClick={() => toggleFaq(faq.id)}
-              >
-                {faq.isOpen ? (
-                  <ChevronUpIcon className='w-5' />
-                ) : (
-                  <ChevronDownIcon className='w-5' />
-                )}
-              </button>
-            </div>
-            {faq.isOpen && (
-              <p className='text-caption-1 text-gray_r-11 leading-7 mt-4'>
-                {faq?.content ||
-                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'}
-              </p>
-            )}
-          </div>
-        ))}
-      </div>
-    </AppLayout>
+    <BasicLayout>
+      <PageContent path='/faqs' />
+    </BasicLayout>
   )
 }
-- 
cgit v1.2.3