leumas-universal-crud-react/src/LMS-WildCard-Helpers/UniversalCrud/UniversalCrudPage.jsx

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

import { useState } from 'react';
import CreateItem from "./CreateItem";
import DeleteItem from "./DeleteItem";
import EditItem from "./EditItem";
import GetAllItems from "./GetAllItems";
import GetAllByOwner from "./GetAllByOwner";
import GetItemById from "./GetItemById";
import {useAuthUser} from "react-auth-kit"
import Roadmap from "../../../components/Roadmap/Roadmap"
const UniversalCrudPage = ({setMode}) => {
  const [selectedMode, setSelectedMode] = useState("");
  const [selectedSchema, setSelectedSchema] = useState(''); // State to keep track of selected schema in parent
  const auth = useAuthUser();

  // Function to handle schema selection
  const handleSchemaSelect = (schema) => {
      setSelectedSchema(schema);
      // Now you can use 'selectedSchema' in your Creator component
      // For demonstration:
      console.log(`Schema selected in parent: ${schema}`);
  };
  const renderSelectedMode = () => {
    switch (selectedMode) {
      case 'create':
        return  <Roadmap 
        roadmapItems={[
          { 
            title: 'Loads of Schemas', 
            text: 'Leveraging our Bulk GPT tool, weve crafted hundreds of diverse schema types, enabling universal adaptability and customization for virtually any application.', 
            imageUrl: 'path/to/image1.jpg' 
          },
          { 
            title: 'Universal CRUD Advancement', 
            text: 'Our Universal CRUD functionality centralizes the creation, reading, updating, and deleting of myriad schema types, drastically reducing code redundancy and streamlining data management.', 
            imageUrl: 'path/to/image2.jpg' 
          },
          { 
            title: 'Towards A Comprehensive Package', 
            text: 'The goal is to encapsulate Universal CRUDs power either within our bespoke React framework or distribute it as a robust NPM package, ensuring seamless integration for both frontend and backend ecosystems.', 
            imageUrl: 'path/to/image3.jpg' 
          },
          { 
            title: 'Integrated Routes', 
            text: 'To actualize the Universal CRUD dream, both frontend and backend routes are meticulously crafted, ensuring smooth data flow and interaction across Leumas platforms.', 
            imageUrl: 'path/to/image4.jpg' 
          },
          { 
            title: 'Universal CRUD & Leviathan', 
            text: 'Universal CRUD is a key element of Leviathan, our AI project. Designed to augment user interactions across all Leumas applications, and potentially beyond, Leviathan aims to revolutionize virtual interactions. From creating schemas for standard axios endpoints to saving and executing them, Leviathan’s capabilities are vast. Imagine full CRUD actions across all schema types, even allowing users to dynamically design their own schema structures for Leviathan to interact with.', 
            imageUrl: 'path/to/image5.jpg' 
          },
          { 
            title: 'The Bigger Picture', 
            text: 'Beyond CRUD, we have conceptualized custom functions for Leviathan, like "toggle publish". This would not only enable interactions like instructing Leviathan to publish content on the Leumas marketplace but also, with further integrations like Zapier, expand its capabilities to platforms like Facebook or YouTube. The ultimate goal? A seamless, interconnected digital experience.',
            imageUrl: 'path/to/image6.jpg' 
          }
        ]} 
      />

        // return <CreateItem handleSchemaSelect={handleSchemaSelect} token={auth()?.token} endpoint="LeumasAPI" id={auth()?.id}   model={selectedSchema} setMode={setMode} />;
        case 'delete':
          return (
            <Roadmap 
              roadmapItems={[
                { 
                  title: 'Optimized Deletion', 
                  text: 'Efficiently remove any unwanted data. The Universal CRUD’s DELETE capability ensures smooth, error-free deletions while maintaining the integrity of your database.', 
                  imageUrl: 'path/to/delete-image1.jpg' 
                },
                { 
                  title: 'Safety First', 
                  text: 'Every deletion is secured and requires authentication. With Leviathan, your datas safety is paramount, ensuring only authorized users can perform deletions.', 
                  imageUrl: 'path/to/delete-image2.jpg' 
                }
              ]} 
            />
          );
      
      case 'edit':
          return (
            <Roadmap 
              roadmapItems={[
                { 
                  title: 'Flexibility in Modification', 
                  text: 'Effortlessly update and modify data. Universal CRUDs EDIT functionality makes data alterations smooth, ensuring your content remains up-to-date and relevant.', 
                  imageUrl: 'path/to/edit-image1.jpg' 
                },
                { 
                  title: 'Real-time Updates', 
                  text: 'See your changes reflected immediately. Leviathan’s efficient syncing capabilities mean your edited content is propagated without delay.', 
                  imageUrl: 'path/to/edit-image2.jpg' 
                }
              ]} 
            />
          );
      
      case 'getAllByOwner':
          return (
            <Roadmap 
              roadmapItems={[
                { 
                  title: 'Personalized Fetching', 
                  text: 'Retrieve data specific to an owner. This feature is crucial for maintaining user-specific data boundaries and ensuring personalized user experiences.', 
                  imageUrl: 'path/to/getByOwner-image1.jpg' 
                },
                { 
                  title: 'Speedy Retrievals', 
                  text: 'Leviathan ensures quick fetches, so users don’t have to wait. Experience the power of efficient data retrieval tailored to individual users.', 
                  imageUrl: 'path/to/getByOwner-image2.jpg' 
                }
              ]} 
            />
          );
      
      case 'getAllItems':
          return (
            <Roadmap 
              roadmapItems={[
                { 
                  title: 'Bulk Data at Your Fingertips', 
                  text: 'Access all the data you need with just a command. Universal CRUDs GET ALL ITEMS ensures you have a complete overview of your datasets.', 
                  imageUrl: 'path/to/getAllItems-image1.jpg' 
                },
                { 
                  title: 'Data Management Made Easy', 
                  text: 'With Leviathan, managing and overseeing vast amounts of data is a breeze, offering you a seamless operational experience.', 
                  imageUrl: 'path/to/getAllItems-image2.jpg' 
                }
              ]} 
            />
          );
      
      case 'getItemById':
          return (
            <Roadmap 
              roadmapItems={[
                { 
                  title: 'Precision in Retrieval', 
                  text: 'Fetch specific data entries with pinpoint accuracy. Universal CRUDs GET ITEM BY ID allows for granular data access, ensuring you get exactly what you need.', 
                  imageUrl: 'path/to/getItemById-image1.jpg' 
                },
                { 
                  title: 'Every Bit Matters', 
                  text: 'Leviathan recognizes the importance of every data piece. Experience the precision and reliability of fetching data entries individually.', 
                  imageUrl: 'path/to/getItemById-image2.jpg' 
                }
              ]} 
            />
          );
      

      default:
        return null;
    }
  }

  return (
    <div className="h-full z-10 flex-grow">
            <h1 className="text-2xl mb-6 text-center font-bold">Universal CRUD Operations</h1>
            
            <div className="mb-8 flex justify-center items-center">
              <label className="mr-4 text-xl">Select CRUD operation: </label>
              <select 
                value={selectedMode} 
                onChange={(e) => setSelectedMode(e.target.value)}
                className={"p-2 border rounded-md hover:border-blue-500 transition duration-300 bg-transparent"}
              >
                <option className={`text-black`} value="">--Select Operation--</option>
                <option className={`text-black`} value="create">Create an Item</option>
                <option className={`text-black`} value="delete">Delete an Item</option>
                <option className={`text-black`} value="edit">Edit an Item</option>
                <option className={`text-black`} value="getAllByOwner">Get All By Owner</option>
                <option className={`text-black`} value="getAllItems">Get All of Items</option>
                <option className={`text-black`} value="getItemById">Get Item By ID</option>
  
              </select>
            </div>
    
            <div className="border-t pt-6 flex items-center justify-center">
              {renderSelectedMode()}
            </div>
          </div>
 
  )
}

export default UniversalCrudPage;