Merge pull request #11 from Gimnath-Perera/feat/inter-mock-connection

Feat/inter mock connection
gimnathperera · Sep 12, 2023 · 23c5675 · 23c5675
2 parents d9ea3d0 + beab978
commit 23c5675
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 37 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,12 @@
-import '@/styles/globals.css';
+import { FC } from 'react';
 import { Metadata } from 'next';
+import clsx from 'clsx';
 import { siteConfig } from '@/config/site';
 import { fontSans } from '@/config/fonts';
 import { Providers } from './providers';
 import { Navbar } from '@/components/navbar';
-import clsx from 'clsx';
 import Footer from '@/components/footer';
-import { FC } from 'react';
+import '@/styles/globals.css';
 
 export const metadata: Metadata = {
   title: {

diff --git a/app/page.tsx b/app/page.tsx
@@ -8,11 +8,12 @@ import { extractInterfaceNames, generateMocks } from '@/utils';
 import { Initials } from '@/config/constants';
 import InterfaceSelectModal from '@/components/interface-select-modal';
 import { RowNumber } from '@/types';
+import toast, { Toaster } from 'react-hot-toast';
 
 const Home: FC = () => {
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const detectedInterfaces = useRef<string[] | null>(null);
-  const mockResult = useRef<string | null>(JSON.stringify(Initials.DefaultMockResult));
+  const mockResult = useRef<string | null>(JSON.stringify(Initials.DefaultMockResult, null, 2));
   const [code, setCode] = useState<string>(Initials.DefaultInterface);
   const [numberOfRows, setNumberOfRows] = useState<RowNumber>('1');
   const [interfaces, setInterfaces] = useState<Set<string> | any>(
@@ -37,18 +38,36 @@ const Home: FC = () => {
   };
 
   const handleOnMockGenerate = (): void => {
-    const generatedMocks = generateMocks(code, Array.from(interfaces));
+    const generatedMocks = generateMocks(code, Array.from(interfaces), Number(numberOfRows));
     mockResult.current = JSON.stringify(generatedMocks, null, 2);
 
     onOpenChange();
   };
 
+  const handleOnCopyToClipboard = (): void => {
+    navigator.clipboard.writeText(mockResult.current ?? '');
+    toast.success('Copied to clipboard');
+  };
+
+  const handleOnDownload = (): void => {
+    const element = document.createElement('a');
+    const file = new Blob([mockResult.current ?? ''], { type: 'text/plain' });
+    element.href = URL.createObjectURL(file);
+    element.download = 'mock.json';
+    document.body.appendChild(element);
+    element.click();
+  };
+
   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 mockResult={mockResult?.current ?? ''} />
+        <Result
+          mockResult={mockResult?.current ?? ''}
+          onCopyToClipboard={handleOnCopyToClipboard}
+          onDownload={handleOnDownload}
+        />
       </div>
 
       <InterfaceSelectModal
@@ -62,6 +81,7 @@ const Home: FC = () => {
         setInterfaces={setInterfaces}
         handleChipClose={handleChipClose}
       />
+      <Toaster position='bottom-left' reverseOrder={false} />
     </section>
   );
 };

diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -1,3 +1,4 @@
+import { siteConfig } from '@/config/site';
 import { Link } from '@nextui-org/link';
 import { FC } from 'react';
 
@@ -9,7 +10,7 @@ const Footer: FC<Props> = ({}) => {
       <Link
         isExternal
         className='flex items-center gap-1 text-current'
-        href='https://nextui-docs-v2.vercel.app?utm_source=next-app-template'
+        href={siteConfig.links.github}
         title='nextui.org homepage'
       >
         <span className='text-default-600'>Made with 💖 by</span>

diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
@@ -29,15 +29,15 @@ export const Navbar: FC = () => {
 
       <NavbarContent className='hidden sm:flex basis-1/5 sm:basis-full' justify='end'>
         <NavbarItem className='hidden sm:flex gap-2'>
-          <Link isExternal href={siteConfig.links.github} aria-label='Github'>
+          <Link isExternal href={siteConfig.links.repository} aria-label='Github'>
             <GithubIcon className='text-default-500' />
           </Link>
           <ThemeSwitch />
         </NavbarItem>
       </NavbarContent>
 
       <NavbarContent className='sm:hidden basis-1 pl-4' justify='end'>
-        <Link isExternal href={siteConfig.links.github} aria-label='Github'>
+        <Link isExternal href={siteConfig.links.repository} aria-label='Github'>
           <GithubIcon className='text-default-500' />
         </Link>
         <ThemeSwitch />

diff --git a/components/result/index.tsx b/components/result/index.tsx
@@ -1,27 +1,40 @@
-'use client';
-import { FC } from 'react';
+import { FC, useState, useEffect } from 'react';
 import { Button } from '@nextui-org/react';
+import { Spinner } from '@nextui-org/react';
 
 interface Props {
   mockResult: string;
+  onCopyToClipboard: () => void;
+  onDownload: () => void;
 }
 
-const Result: FC<Props> = ({ mockResult }) => {
+const Result: FC<Props> = ({ mockResult, onCopyToClipboard, onDownload }) => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   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'>
-            {JSON.parse(mockResult)}
-          </code>
-        </pre>
+        {loading ? (
+          <Spinner size='sm' className='w-full h-full' />
+        ) : (
+          <pre className='text-[#ced4da]'>
+            <code className='p-2 rounded-md shadow-sm text-sm font-mono'>{mockResult}</code>
+          </pre>
+        )}
       </div>
       <div className='absolute bottom-4 right-7'>
-        <Button color='success' variant='bordered' className='mr-4'>
+        <Button color='success' variant='shadow' className='mr-4' onClick={onDownload}>
           Download
         </Button>
-        <Button color='warning' variant='bordered'>
+        <Button color='warning' variant='shadow' onClick={onCopyToClipboard}>
           Copy to Clipboard
         </Button>
       </div>

diff --git a/config/constants.ts b/config/constants.ts
@@ -9,14 +9,12 @@ export const Initials = {
     }
     `,
 
-  DefaultMockResult: `{
-    User: {
-      firstName: "Kenny",
-      lastName: "Goodwin",
-      username: "Jessie97",
-      emailAddress: "Agustina92@yahoo.com"
-    }
-  }`,
+  DefaultMockResult: {
+    firstName: 'Kenny',
+    lastName: 'Goodwin',
+    username: 'Jessie97',
+    emailAddress: 'Agustina92@yahoo.com',
+  },
 };
 
 export const RegexExp = {

diff --git a/config/site.ts b/config/site.ts
@@ -7,6 +7,7 @@ export const siteConfig = {
   navMenuItems: [],
   links: {
     github: 'https://github.com/Gimnath-Perera',
+    repository: 'https://github.com/Gimnath-Perera/mocktopus',
     twitter: 'https://twitter.com/getnextui',
     docs: 'https://nextui.org',
     discord: 'https://discord.gg/9b6yyZKmH4',

diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.1",
     "tailwind-variants": "^0.1.13",
     "tailwindcss": "3.3.3",
     "typescript": "5.0.4"

diff --git a/utils/generate-mocks/index.ts b/utils/generate-mocks/index.ts
@@ -3,13 +3,41 @@ import { mock } from 'intermock';
 export const generateMocks = (
   code: string,
   detectedInterfaces: string[],
-): string | Record<string | number, {}> => {
-  const mockedData = mock({
-    language: 'typescript',
-    files: [['docs', code]],
-    output: 'string',
-    interfaces: detectedInterfaces,
-  });
-
-  return mockedData;
+  numberOfRows?: number,
+): Record<string | number, {}>[] | Record<string, unknown> => {
+  const hasMultipleInterfaces = detectedInterfaces.length > 1;
+
+  const generateMockData = (): any => {
+    return mock({
+      language: 'typescript',
+      files: [['docs', code]],
+      output: 'object',
+      interfaces: detectedInterfaces,
+    });
+  };
+
+  if (numberOfRows === undefined || numberOfRows === 1) {
+    const mockedData = generateMockData();
+
+    if (!hasMultipleInterfaces) {
+      const selectedInterface: any = detectedInterfaces[0];
+      const selectedInterfaceData = mockedData[selectedInterface];
+
+      return selectedInterfaceData;
+    }
+
+    return mockedData;
+  } else {
+    const mockedDataArray: any[] = [];
+    for (let i = 0; i < numberOfRows; i++) {
+      const mockedData = generateMockData();
+
+      const selectedInterface: any = detectedInterfaces[0];
+      const selectedInterfaceData = mockedData[selectedInterface];
+
+      mockedDataArray.push(selectedInterfaceData);
+    }
+
+    return mockedDataArray;
+  }
 };
diff --git a/yarn.lock b/yarn.lock
@@ -3488,6 +3488,11 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.13.tgz#e3c06d5578486212a76c9eba860cbc3232ff6d7c"
+  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -4335,6 +4340,13 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"