oddbit · DennisAlund · May 25, 2024 · May 22, 2024 · May 24, 2024 · May 24, 2024
diff --git a/hosting/.eslintrc.js b/hosting/.eslintrc.js
@@ -17,7 +17,14 @@ module.exports = {
     es2021: true,
   },
 
-  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "google"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@next/next/recommended",
+    "google",
+  ],
 
   plugins: ["react", "@typescript-eslint", "prettier"],
 
@@ -38,7 +45,7 @@ module.exports = {
     "max-len": "off",
     "require-jsdoc": "off",
     "prettier/prettier": "error",
-    indent: ["error", 2],
+    indent: ["error", 2, {SwitchCase: 1}],
     "operator-linebreak": ["error", "before"],
     quotes: "off", // Use config quotes from prettier, so we turn off this rules to avoiding conflict between eslint and prettier
   },

diff --git a/hosting/package-lock.json b/hosting/package-lock.json
diff --git a/hosting/package.json b/hosting/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "prettier:fix": "prettier --write .",
-    "codecheck": "npm run lint:fix && npm run prettier:fix"
+    "codecheck": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
     "apexcharts": "^3.45.2",
@@ -23,13 +23,14 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^14.2.3",
     "@types/node": "^20",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
+    "eslint": "^8.57.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",

diff --git a/hosting/src/app/[site]/content/[type]/page.tsx b/hosting/src/app/[site]/content/[type]/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
+import {Table, TableRowActions, TableRowLabel} from "@/components/Table";
+import DefaultLayout from "@/components/Layouts/DefaultLayout";
+import {useTanamDocuments} from "@/hooks/useTanamDocuments";
+import Alerts from "@/components/common/Alerts";
+
+import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
+import Loader from "../../../../components/common/Loader";
+
+export default function ContentOverviewPage() {
+  const {data: documents, error: docsError} = useTanamDocuments();
+  const {data: documentType} = useTanamDocumentType();
+  return (
+    <DefaultLayout>
+      {documentType ? <Breadcrumb pageName={documentType.title} /> : <Loader />}
+
+      {docsError ? (
+        <Alerts type="error" title="Error fetching documents" message={docsError.message} />
+      ) : (
+        <Table
+          headers={["Id", "Created", "Status", "Actions"]}
+          rows={documents.map((document, key) => [
+            <div key={`${key}-${document.id}-id`}>
+              <h5 className="font-medium text-black dark:text-white">{document.id}</h5>
+            </div>,
+            <p key={`${key}-${document.id}-date`} className="text-black dark:text-white">
+              {document.createdAt.toDate().toUTCString()}
+            </p>,
+            <TableRowLabel
+              key={`${key}-${document.id}-status`}
+              title={document.status}
+              status={document.status === "published" ? "success" : "info"}
+            />,
+            <TableRowActions
+              key={`${key}-${document.id}-actions`}
+              onView={() => console.log("View", document)}
+              onDelete={() => console.log("Delete", document)}
+              onDownload={() => console.log("Download", document)}
+            />,
+          ])}
+        />
+      )}
+    </DefaultLayout>
+  );
+}
diff --git a/hosting/src/app/[site]/layout.tsx b/hosting/src/app/[site]/layout.tsx
@@ -15,7 +15,7 @@ interface RootLayoutProps {
 const RootLayout: React.FC<RootLayoutProps> = ({children}) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [errorMessage, setError] = useState<string>("");
-  const {siteData, error} = useTanamSite();
+  const {data: siteData, error} = useTanamSite();
 
   useEffect(() => {
     if (siteData || error) {

diff --git a/hosting/src/app/[site]/tables/page.tsx b/hosting/src/app/[site]/tables/page.tsx
diff --git a/hosting/src/components/Dashboard/E-commerce.tsx b/hosting/src/components/Dashboard/E-commerce.tsx
@@ -4,7 +4,6 @@ import ChartOne from "@/components/Charts/ChartOne";
 import ChartThree from "@/components/Charts/ChartThree";
 import ChartTwo from "@/components/Charts/ChartTwo";
 import ChatCard from "@/components/Chat/ChatCard";
-import TableOne from "@/components/Tables/TableOne";
 import CardDataStats from "@/components/CardDataStats";
 import MapOne from "@/components/Maps/MapOne";
 
@@ -103,9 +102,6 @@ const ECommerce: React.FC = () => {
         <ChartTwo />
         <ChartThree />
         <MapOne />
-        <div className="col-span-12 xl:col-span-8">
-          <TableOne />
-        </div>
         <ChatCard />
       </div>
     </>

diff --git a/hosting/src/components/Sidebar/index.tsx b/hosting/src/components/Sidebar/index.tsx
@@ -12,6 +12,7 @@ import {DashboardIcon} from "./icons/DashboardIcon";
 import {FormsIcon} from "./icons/FormsIcon";
 import {ProfileIcon} from "./icons/ProfileIcon";
 import {SettingsIcon} from "./icons/SettingsIcon";
+import {useTanamSite} from "@/hooks/useTanamSite";
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -20,10 +21,10 @@ interface SidebarProps {
 
 const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => {
   const pathname = usePathname() ?? "/";
-  const site = pathname.split("/")[1];
   const trigger = useRef<any>(null);
   const sidebar = useRef<any>(null);
-  const {data: documentTypes} = useTanamDocumentTypes(site);
+  const {data: documentTypes} = useTanamDocumentTypes();
+  const {data: site} = useTanamSite();
 
   const storedSidebarExpanded = "true";
 
@@ -87,9 +88,9 @@ const Sidebar = ({sidebarOpen, setSidebarOpen}: SidebarProps) => {
             <SidebarExpandableMenu
               icon={<FormsIcon />}
               title="Content"
-              isExpanded={pathname.includes("/document-types/")}
+              isExpanded={pathname.includes("/content/")}
               menuItems={documentTypes.map((doc) => ({
-                href: `/document-types/${doc.id}`,
+                href: `/${site?.id}/content/${doc.id}`,
                 title: doc.title,
               }))}
             />

diff --git a/hosting/src/components/Table/Table.tsx b/hosting/src/components/Table/Table.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+interface TableProps {
+  headers: string[];
+  rows: React.ReactNode[][];
+}
+
+/**
+ * A Table component
+ *
+ * Example:
+ * ```tsx
+ *  <Table
+ *    headers={["Id", "Created", "Status", "Actions"]}
+ *    rows={documents.map((document, key) => [
+ *      <div>{document.id}</div>,
+ *      <p>{document.createdAt.toDate().toUTCString()}</p>,
+ *      <TableRowLabel title={document.status} status={document.status === "published" ? "success" : "info"} />,
+ *       <TableRowActions
+ *         onView={() => console.log("View", document)}
+ *         onDelete={() => console.log("Delete", document)}
+ *         onDownload={() => console.log("Download", document)}
+ *       />,
+ *     ])}
+ *   />
+ * ```
+ *
+ * @param {TableProps} param0 Table parameters
+ * @return {JSX.Element} Table component
+ */
+export function Table({headers, rows}: TableProps): JSX.Element {
+  return (
+    <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+      <div className="max-w-full overflow-x-auto">
+        <table className="w-full table-auto">
+          <thead>
+            <tr className="bg-gray-2 text-left dark:bg-meta-4">
+              {headers.map((header, index) => (
+                <th key={index} className="min-w-[150px] px-4 py-4 font-medium text-black dark:text-white">
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, rowIndex) => (
+              <tr key={rowIndex} className="border-b border-[#eee] dark:border-strokedark">
+                {row.map((col, colIndex) => (
+                  <td key={`r${rowIndex}c${colIndex}`} className="px-4 py-5 dark:border-strokedark">
+                    {col}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}