implement fetching apps from BE

impl install modal

src/modules/apps/components/AppInstallModal/AppInstallModal.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs';
+import _ from 'lodash';
+import { useApps } from 'src/services/apps';
+import { Modal, Tabs } from 'src/components';
+import { AppInstallModalProps } from './types';
+
+const initialCode = `luck: except
+natural: still
+near: though
+search:
+  - feature
+  - - 1980732354.689713
+    - hour
+    - butter:
+        ordinary: 995901949.8974948
+        teeth: true
+        whole:
+          - -952367353
+          - - talk: -1773961379
+              temperature: false
+              oxygen: true
+              laugh:
+                flag:
+                  in: 2144751662
+                  hospital: -1544066384.1973226
+                  law: congress
+                  great: stomach`;
+
+export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps) => {
+  const [code, setCode] = useState(initialCode);
+  const { app, appLoading, loadApp } = useApps();
+
+  useEffect(() => {
+    if (appSlug) {
+      loadApp(appSlug);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appSlug, open]);
+
+  const handleSave = async () => {
+    _.noop();
+    // todo: implement
+  };
+
+  const handleKeyPress = (e: any) => {
+    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      handleSave();
+    }
+  };
+
+  const renderSubdomain = () => {
+    return (
+      <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+        <div className="sm:col-span-3">
+          <input name="subdomain" placeholder="Subdomain" onKeyPress={handleKeyPress} required={false} />
+        </div>
+      </div>
+    );
+  };
+
+  const renderConfiguration = () => {
+    return (
+      <div>
+        <div className="bg-gray-100 overflow-hidden rounded-lg">
+          <div className="px-4 h-16 sm:px-6 bg-gray-200 flex items-center">
+            <span className="text-gray-600 text-lg leading-6 font-medium">Current Configuration</span>
+          </div>
+          <div className="px-4 py-5 sm:p-6 overflow-x-auto">
+            <Editor
+              value={code}
+              onValueChange={(value) => setCode(value)}
+              highlight={(value) => highlight(value, languages.js, 'yaml')}
+              preClassName="font-mono whitespace-normal font-light"
+              textareaClassName="font-mono overflow-auto font-light"
+              className="font-mono text-sm font-light"
+            />
+            <pre className="font-mono text-sm font-light">
+              {`luck: except
+natural: still
+near: though
+search:
+  - feature
+  - - 1980732354.689713
+    - hour
+    - butter:
+        ordinary: 995901949.8974948
+        teeth: true
+        whole:
+          - -952367353
+          - - talk: -1773961379
+              temperature: false
+              oxygen: true
+              laugh:
+                flag:
+                  in: 2144751662
+                  hospital: -1544066384.1973226
+                  law: congress
+                  great: stomach`}
+            </pre>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const tabs = [
+    { name: 'Subdomain', component: renderSubdomain() },
+    { name: 'Advanced Configuration', component: renderConfiguration() },
+  ];
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <>
+      <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={appLoading} useCancelButton>
+        <div className="bg-white px-4">
+          <div className="space-y-10 divide-y divide-gray-200">
+            <div>
+              <div>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">Install app {_.get(app, 'name')}</h3>
+              </div>
+
+              <div className="px-4 py-5 sm:p-6">
+                <Tabs tabs={tabs} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};