Merge pull request #275 from Sukhacoder02/feat/generic-modal

feat: use generic Modal with render props

frontend/src/Modal/index.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+interface ModalProps {
+  handleSubmit: () => void;
+  isCancellable: boolean;
+  handleCancel?: () => void;
+  render: () => JSX.Element;
+  modalState: string;
+  isError: boolean;
+  errorMessage?: string;
+}
+const Modal = (props: ModalProps) => {
+  return (
+    <div
+      className={`${
+        props.modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      {props.render()}
+      <div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-lg bg-white pb-5 pr-5  shadow-lg">
+        <div>
+          <button
+            onClick={() => props.handleSubmit()}
+            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+          >
+            Save
+          </button>
+          {props.isCancellable && (
+            <button
+              onClick={() => props.handleCancel && props.handleCancel()}
+              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+        {props.isError && (
+          <p className="mx-auto mt-2 mr-auto text-sm text-red-500">
+            {props.errorMessage}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

frontend/src/preferences/APIKeyModal.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
 import { useOutsideAlerter } from './../hooks';
+import Modal from '../Modal';
 
 export default function APIKeyModal({
   modalState,
@@ -49,20 +50,23 @@ export default function APIKeyModal({
   }
 
   return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
+    <Modal
+      handleCancel={handleCancel}
+      isError={isError}
+      modalState={modalState}
+      isCancellable={isCancellable}
+      handleSubmit={handleSubmit}
+      render={() => {
+        return (
           <article
             ref={modalRef}
             className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
           >
             <p className="text-xl text-jet">OpenAI API Key</p>
             <p className="text-md leading-6 text-gray-500">
-          Before you can start using DocsGPT we need you to provide an API key
-          for llm. Currently, we support only OpenAI but soon many more. You can
-          find it here.
+              Before you can start using DocsGPT we need you to provide an API
+              key for llm. Currently, we support only OpenAI but soon many more.
+              You can find it here.
             </p>
             <input
               type="text"
@@ -72,30 +76,9 @@ export default function APIKeyModal({
               placeholder="API Key"
               onChange={(e) => setKey(e.target.value)}
             />
-        <div className="flex flex-row-reverse">
-          <div>
-            <button
-              onClick={() => handleSubmit()}
-              className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-            >
-              Save
-            </button>
-            {isCancellable && (
-              <button
-                onClick={() => handleCancel()}
-                className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-              >
-                Cancel
-              </button>
-            )}
-          </div>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please enter a valid API key
-            </p>
-          )}
-        </div>
           </article>
-    </div>
+        );
+      }}
+    />
   );
 }

frontend/src/preferences/SelectDocsModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
+import Modal from '../Modal';
 import {
   setSelectedDocs,
   setSourceDocs,
@@ -50,18 +51,21 @@ export default function APIKeyModal({
 
     requestDocs();
   }, []);
-
   return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
+    <Modal
+      handleSubmit={handleSubmit}
+      isCancellable={isCancellable}
+      handleCancel={handleCancel}
+      modalState={modalState}
+      errorMessage="Please select Source Documentation"
+      isError={isError}
+      render={() => {
+        return (
           <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
             <p className="text-xl text-jet">Select Source Documentation</p>
             <p className="text-lg leading-5 text-gray-500">
-          Please select the library of documentation that you would like to use
-          with our app.
+              Please select the library of documentation that you would like to
+              use with our app.
             </p>
             <div className="relative">
               <div
@@ -105,30 +109,9 @@ export default function APIKeyModal({
                 </div>
               )}
             </div>
-        <div className="flex flex-row-reverse">
-          {isCancellable && (
-            <button
-              onClick={() => handleCancel()}
-              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => {
-              handleSubmit();
-            }}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-          >
-            Save
-          </button>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please select source documentation.
-            </p>
-          )}
-        </div>
           </article>
-    </div>
+        );
+      }}
+    />
   );
 }