feat: mock integration added

gimnathperera · Sep 12, 2023 · 00192db · 00192db
1 parent f7cec3c
commit 00192db
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 108 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,37 +4,63 @@ import { useDisclosure } from '@nextui-org/react';
 import CodeEditor from '@/components/code-editor';
 import Header from '@/components/header';
 import Result from '@/components/result';
-import { extractInterfaceNames } from '@/utils';
+import { extractInterfaceNames, generateMocks } from '@/utils';
 import { Initials } from '@/config/constants';
 import InterfaceSelectModal from '@/components/interface-select-modal';
+import { RowNumber } from '@/types';
 
 const Home: FC = () => {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
-  const [code, setCode] = useState<string>(Initials.DefaultInterface);
   const detectedInterfaces = useRef<string[] | null>(null);
+  const mockResult = useRef<string | null>(JSON.stringify(Initials.DefaultMockResult));
+  const [code, setCode] = useState<string>(Initials.DefaultInterface);
+  const [numberOfRows, setNumberOfRows] = useState<RowNumber>('1');
+  const [interfaces, setInterfaces] = useState<Set<string> | any>(
+    new Set(detectedInterfaces?.current),
+  );
+
+  const handleChipClose = (closedInterface: string): void => {
+    if (interfaces.size === 1) return;
+    const newSelectedKeys = new Set(Array.from(interfaces)?.filter(key => key !== closedInterface));
+    setInterfaces(newSelectedKeys);
+  };
 
   const handleOnGenerate = (): void => {
     const interfaceNamesToMock = extractInterfaceNames(code);
     detectedInterfaces.current = interfaceNamesToMock;
+    setInterfaces(new Set(interfaceNamesToMock));
     onOpen();
   };
 
   const handleOnCodeChange = (newCode: string): void => {
     setCode(newCode);
   };
 
+  const handleOnMockGenerate = (): void => {
+    const generatedMocks = generateMocks(code, Array.from(interfaces));
+    mockResult.current = JSON.stringify(generatedMocks, null, 2);
+
+    onOpenChange();
+  };
+
   return (
     <section className='h-full'>
       <Header onGenerate={handleOnGenerate} />
       <div className='flex justify-center gap-6 h-[calc(100vh-12rem)]'>
         <CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
-        <Result />
+        <Result mockResult={mockResult?.current ?? ''} />
       </div>
 
       <InterfaceSelectModal
         isOpen={isOpen}
-        onOpenChange={onOpenChange}
         detectedInterfaces={detectedInterfaces.current}
+        numberOfRows={numberOfRows}
+        onOpenChange={onOpenChange}
+        onMockGenerate={handleOnMockGenerate}
+        setNumberOfRows={setNumberOfRows}
+        interfaces={interfaces}
+        setInterfaces={setInterfaces}
+        handleChipClose={handleChipClose}
       />
     </section>
   );

diff --git a/components/interface-select-content/index.tsx b/components/interface-select-content/index.tsx
@@ -1,19 +1,33 @@
-import React, { FC, useState } from 'react';
+import React, { FC, Key } from 'react';
 import { Chip } from '@nextui-org/react';
 import { Colors } from '@/config/constants';
 import { Listbox, ListboxItem, Radio, RadioGroup } from '@nextui-org/react';
+import { RowNumber } from '@/types';
 
 interface Props {
   detectedInterfaces: string[];
+  interfaces: Set<string>;
+  numberOfRows: RowNumber;
+  setInterfaces: (keys: Set<Key>) => void;
+  handleChipClose: (closedInterface: string) => void;
+  setNumberOfRows: (numberOfRows: RowNumber) => void;
 }
 
-const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
-  const [interfaces, setInterfaces] = useState<Set<string> | any>(new Set(detectedInterfaces));
+const InterfaceSelectContent: FC<Props> = ({
+  detectedInterfaces,
+  numberOfRows,
+  setNumberOfRows,
+  interfaces,
+  setInterfaces,
+  handleChipClose,
+}) => {
+  const handleNumberOfRowsChange = (value: string): void => {
+    setNumberOfRows(value as RowNumber);
+  };
 
-  const handleChipClose = (closedInterface: string): void => {
-    if (interfaces.size === 1) return;
-    const newSelectedKeys = new Set(Array.from(interfaces).filter(key => key !== closedInterface));
-    setInterfaces(newSelectedKeys);
+  const handleInterfaceChange = (selectedInterfaces: Set<Key>): void => {
+    if (selectedInterfaces?.size > 1) setNumberOfRows('1');
+    setInterfaces(selectedInterfaces);
   };
 
   return (
@@ -24,7 +38,7 @@ const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
         disallowEmptySelection
         selectionMode='multiple'
         selectedKeys={interfaces}
-        onSelectionChange={setInterfaces}
+        onSelectionChange={(keys): void => handleInterfaceChange(new Set(keys))}
       >
         {detectedInterfaces?.map((interfaceName: any) => (
           <ListboxItem key={interfaceName}>{`⚡ ${interfaceName}`}</ListboxItem>
@@ -55,6 +69,8 @@ const InterfaceSelectContent: FC<Props> = ({ detectedInterfaces }) => {
         <RadioGroup
           label={<p className='text-white'>Scale number of rows</p>}
           orientation='horizontal'
+          value={numberOfRows}
+          onValueChange={handleNumberOfRowsChange}
         >
           <Radio value='1'>1 Row</Radio>
           <Radio value='10'>10 Rows</Radio>

diff --git a/components/interface-select-modal/index.tsx b/components/interface-select-modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Key } from 'react';
 import {
   Modal,
   ModalContent,
@@ -8,16 +8,31 @@ import {
   Button,
 } from '@nextui-org/react';
 import InterfaceSelectContent from '@/components/interface-select-content';
+import { RowNumber } from '@/types';
 
 interface Props {
   isOpen: boolean;
   detectedInterfaces: string[] | null;
+  numberOfRows: RowNumber;
+  interfaces: Set<string>;
   onOpenChange: () => void;
+  setNumberOfRows: (numberOfRows: RowNumber) => void;
+  setInterfaces: (keys: Set<Key>) => void;
+  handleChipClose: (closedInterface: string) => void;
+  onMockGenerate: () => void;
 }
 
-const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, detectedInterfaces }) => {
-  console.log('🚀 ~ file: index.tsx:18 ~ detectedInterfaces:', detectedInterfaces);
-
+const InterfaceSelectModal: FC<Props> = ({
+  isOpen,
+  detectedInterfaces,
+  numberOfRows,
+  interfaces,
+  setNumberOfRows,
+  onOpenChange,
+  setInterfaces,
+  handleChipClose,
+  onMockGenerate,
+}) => {
   return (
     <>
       <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -29,13 +44,20 @@ const InterfaceSelectModal: FC<Props> = ({ isOpen, onOpenChange, detectedInterfa
               </ModalHeader>
               <ModalBody>
                 <p>Please select the interfaces you want to generate mock data for.</p>
-                <InterfaceSelectContent detectedInterfaces={detectedInterfaces ?? []} />
+                <InterfaceSelectContent
+                  detectedInterfaces={detectedInterfaces ?? []}
+                  numberOfRows={numberOfRows}
+                  setNumberOfRows={setNumberOfRows}
+                  interfaces={interfaces}
+                  setInterfaces={setInterfaces}
+                  handleChipClose={handleChipClose}
+                />
               </ModalBody>
               <ModalFooter>
                 <Button color='danger' variant='bordered' onPress={onClose}>
                   Close
                 </Button>
-                <Button color='primary' onPress={onClose}>
+                <Button color='primary' onPress={onMockGenerate}>
                   🪄 Generate
                 </Button>
               </ModalFooter>

diff --git a/components/result/index.tsx b/components/result/index.tsx
@@ -2,82 +2,19 @@
 import { FC } from 'react';
 import { Button } from '@nextui-org/react';
 
-const Result: FC = () => {
-  const str = `
-  [
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },{
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-    {
-      subject: 'admin_users',
-      label: 'Admin Users',
-      group: 'Admin Management',
-    },
-  ]
-  `;
+interface Props {
+  mockResult: string;
+}
 
+const Result: FC<Props> = ({ mockResult }) => {
   return (
     <div className='relative bg-[#1E1E1E] rounded-lg py-2 pl-8 pr-2 w-1/2'>
       <div className='h-full overflow-auto'>
+        {/* <pre>{JSON.parse(mockResult)}</pre> */}
         <pre className='text-[#ced4da]'>
-          <code className='p-2 rounded-md shadow-sm text-sm font-mono italic'>{str}</code>
+          <code className='p-2 rounded-md shadow-sm text-sm font-mono italic'>
+            {JSON.parse(mockResult)}
+          </code>
         </pre>
       </div>
       <div className='absolute bottom-4 right-7'>

diff --git a/config/constants.ts b/config/constants.ts
@@ -1,32 +1,22 @@
 export const Initials = {
   DefaultInterface: `// You can use typescript interfaces like following; 
 
-    interface Admin extends User {
-      adminRecord: AdminRecord;
-    }
-    
-    interface Student extends User {
-      schoolRecord: SchoolRecord;
-    }
-    
     interface User {
       firstName: string;
       lastName: string;
       username: string;
       emailAddress: string;
     }
-    
-    interface AdminRecord {
-      studentsPassedEachYear: number[];
-    }
-    
-    interface SchoolRecord {
-      startDate: string;
-      endDate: string;
-      isActive: boolean;
-      grades: number[];
-    }
     `,
+
+  DefaultMockResult: `{
+    User: {
+      firstName: "Kenny",
+      lastName: "Goodwin",
+      username: "Jessie97",
+      emailAddress: "[email protected]"
+    }
+  }`,
 };
 
 export const RegexExp = {

diff --git a/types/index.ts b/types/index.ts
@@ -3,3 +3,5 @@ import { SVGProps } from 'react';
 export type IconSvgProps = SVGProps<SVGSVGElement> & {
   size?: number;
 };
+
+export type RowNumber = '1' | '10' | '50';