Cloudinary

app/(api)/_actions/media/findMediaItem.ts

@@ -0,0 +1,11 @@
+'use server';
+
+import { findMediaItem, findMediaItems } from '@datalib/media/findMediaItem';
+
+export async function FindMediaItem(id: string) {
+  return findMediaItem(id);
+}
+
+export async function FindMediaItems(query: object = {}) {
+  return findMediaItems(query);
+}

app/(api)/_datalib/_services/Products.ts

@@ -6,7 +6,6 @@ export default class Products {
   // CREATE
   static async create(input: ProductInventoryInput) {
     const { productInput, inventoryInput } = input;
-    console.log(input);
     const {
       name,
       price,

app/(api)/_datalib/media/findMediaItem.ts

@@ -0,0 +1,42 @@
+import { ObjectId } from 'mongodb';
+import { getDatabase } from '@utils/mongodb/mongoClient.mjs';
+import { HttpError, NotFoundError } from '@utils/response/Errors';
+
+export async function findMediaItem(id: string) {
+  try {
+    const db = await getDatabase();
+    const objectId = ObjectId.createFromHexString(id);
+
+    const mediaItem = await db.collection('media').findOne({
+      _id: objectId,
+    });
+
+    if (!mediaItem) {
+      throw new NotFoundError(`Media item with id: ${id} not found.`);
+    }
+
+    return { ok: true, body: mediaItem, error: null };
+  } catch (error) {
+    const e = error as HttpError;
+    return {
+      ok: false,
+      body: null,
+      error: e.message || 'Internal Server Error',
+    };
+  }
+}
+
+export async function findMediaItems(query: object = {}) {
+  try {
+    const db = await getDatabase();
+    const mediaItems = await db.collection('media').find(query).toArray();
+    return { ok: true, body: mediaItems, error: null };
+  } catch (error) {
+    const e = error as HttpError;
+    return {
+      ok: false,
+      body: null,
+      error: e.message || 'Internal Server Error',
+    };
+  }
+}

app/(pages)/_contexts/ContentFormContext.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { useState, createContext } from 'react';
+
+interface ContentFormContextValue {
+  content_type: string;
+  id: string | null;
+  data: { [key: string]: any };
+  updateField: (field_name: string, value: any) => void;
+  setData: (value: any) => void;
+  setId: (value: string) => void;
+}
+
+export type { ContentFormContextValue };
+
+export const ContentFormContext = createContext<ContentFormContextValue>({
+  content_type: '',
+  id: null,
+  data: {},
+  updateField: (_, __) => {},
+  setData: (_) => {},
+  setId: (_) => {},
+});
+
+interface ContentFormContextProviderProps {
+  content_type: string;
+  id?: string | null;
+  initialValue?: object;
+  children: React.ReactNode;
+}
+
+export default function ContentFormContextProvider({
+  content_type,
+  id = null,
+  initialValue = {},
+  children,
+}: ContentFormContextProviderProps) {
+  const [data, setData] = useState(initialValue);
+  const [idVar, setId] = useState<string | null>(id);
+
+  const updateField = (field_name: string, value: any) => {
+    setData((prev) => ({
+      ...prev,
+      [field_name]: value,
+    }));
+  };
+
+  const value = {
+    content_type,
+    id: idVar,
+    data,
+    updateField,
+    setData,
+    setId,
+  };
+
+  return (
+    <ContentFormContext.Provider value={value}>
+      {children}
+    </ContentFormContext.Provider>
+  );
+}

app/(pages)/_contexts/ContentWindowContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, createRef } from 'react';
+
+interface ContentWindowContextProviderValue {
+  contentWindowRef: React.Ref<HTMLElement> | null;
+}
+
+export type { ContentWindowContextProviderValue };
+
+export const ContentWindowContext = createContext({
+  contentWindowRef: createRef<HTMLElement>(),
+});

app/(pages)/_contexts/FilterContext.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { createContext, useState, useCallback } from 'react';
+
+interface FilterContextValue {
+  filters: string[];
+  search: string;
+  setSearch: React.Dispatch<React.SetStateAction<string>>;
+  setFilters: React.Dispatch<React.SetStateAction<string[]>>;
+  applyFilters: (_: object[]) => object[];
+}
+
+export type { FilterContextValue };
+
+export const FilterContext = createContext<FilterContextValue>({
+  filters: [],
+  search: '',
+  setSearch: () => {},
+  setFilters: () => {},
+  applyFilters: (_: object[]) => [],
+});
+
+export default function FilterContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [filters, setFilters] = useState<string[]>([]);
+  const [search, setSearch] = useState<string>('');
+
+  const applyFilters = useCallback(
+    (data: object[]) => {
+      const hasValueContaining = (obj: any, searchStr: string): any => {
+        const values = Object.values(obj);
+        if (typeof obj === 'string') {
+          return obj.toLowerCase().includes(searchStr.toLowerCase());
+        }
+
+        return values.some((value: any) =>
+          hasValueContaining(value, searchStr)
+        );
+      };
+      return data.filter((item) => hasValueContaining(item, search));
+    },
+    [search]
+  );
+
+  const value = {
+    filters,
+    search,
+    setFilters,
+    setSearch,
+    applyFilters,
+  };
+  return (
+    <FilterContext.Provider value={value}>{children}</FilterContext.Provider>
+  );
+}

app/(pages)/_contexts/SelectContext.tsx

@@ -0,0 +1,57 @@
+'use client';
+import { createContext, useState, useCallback } from 'react';
+
+interface SelectContextValue {
+  selectMode: boolean;
+  toggleSelectMode: () => void;
+  selectedIds: { [key: string]: any };
+  toggleId: (id: string, data?: any) => void;
+  resetSelectedIds: () => void;
+}
+
+export type { SelectContextValue };
+
+export const SelectContext = createContext<SelectContextValue>({
+  selectMode: true,
+  toggleSelectMode: () => {},
+  selectedIds: {},
+  toggleId: (_: string, __: any) => {},
+  resetSelectedIds: () => {},
+});
+
+export default function SelectContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [selectMode, setSelectMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<{ [key: string]: boolean }>(
+    {}
+  );
+  const toggleSelectMode = useCallback(() => {
+    setSelectMode((prev) => !prev);
+    setSelectedIds({});
+  }, [setSelectMode]);
+
+  const resetSelectedIds = () => {
+    setSelectedIds({});
+  };
+
+  const toggleId = (id: string, data: any = null) => {
+    setSelectedIds({
+      ...selectedIds,
+      [id]: selectedIds?.[id] ? null : data || true,
+    });
+  };
+
+  const value = {
+    selectMode,
+    toggleSelectMode,
+    selectedIds,
+    toggleId,
+    resetSelectedIds,
+  };
+  return (
+    <SelectContext.Provider value={value}>{children}</SelectContext.Provider>
+  );
+}

app/(pages)/_hooks/useContentFormContext.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ContentFormContext } from '@contexts/ContentFormContext';
+
+export default function useContentFormContext() {
+  const context = useContext(ContentFormContext);
+  if (!context) {
+    throw new Error(
+      'useContentFormContext must be used within an ContentFormContextProvider'
+    );
+  }
+  return context;
+}

app/(pages)/_hooks/useMedia.ts

@@ -0,0 +1,23 @@
+import MediaItem from '../_types/media/MediaItem';
+import { useState, useEffect } from 'react';
+import { FindMediaItems } from '@app/(api)/_actions/media/findMediaItem';
+
+export default function useMedia() {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<MediaItem[]>([]);
+  const [error, setError] = useState<string>('');
+  useEffect(() => {
+    const fetchMedia = async () => {
+      const res = await FindMediaItems();
+      if (res.ok) {
+        setData(res.body);
+      } else {
+        setError(res.error || '');
+      }
+      setLoading(false);
+    };
+    fetchMedia();
+  }, []);
+
+  return { loading, data, error };
+}

app/(pages)/_hooks/useSelectContext.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { SelectContext } from '@contexts/SelectContext';
+
+export default function useSelectContext() {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error(
+      'useSelectContext must be used within an SelectContextProvider'
+    );
+  }
+  return context;
+}

app/(pages)/_hooks/useUploadMedia.ts

@@ -0,0 +1,5 @@
+import MediaItem from '@typeDefs/media/MediaItem';
+
+export default function useUploadMedia(data: MediaItem) {
+  return data;
+}

app/(pages)/_types/media/MediaItem.ts

@@ -0,0 +1,17 @@
+interface MediaItem {
+    _id: string | null;
+    cloudinary_id: string | null;
+    name: string;
+    type: string;
+    format: string;
+    src: string;
+    alt?: string;
+    size: number;
+    width: number | null;
+    height: number | null;
+    _created_at?: string | null;
+    _last_modified?: string | null;
+  }
+
+  export default MediaItem;
+

app/(pages)/_utils/convertFileToMediaItem.ts

@@ -0,0 +1,15 @@
+import MediaItem from '@typeDefs/media/MediaItem';
+export default function convertFileToMediaItem(file: File): MediaItem {
+  const [fileType, fileFormat] = file.type.split('/');
+  return {
+    _id: null,
+    cloudinary_id: null,
+    name: file.name,
+    type: fileType,
+    format: fileFormat,
+    src: URL.createObjectURL(file),
+    size: file.size,
+    width: null,
+    height: null,
+  };
+}