feat: import existing config json file (#28)

contexts/NotificationContext.tsx

@@ -1,38 +1,24 @@
 import { createContext, FunctionComponent, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 
-import {
-  MailgunData,
-  SendgridData,
-  SMTPData,
-  TeamsData,
-  TelegramData,
-  WebhookData,
-  WhatsappData,
-} from '@hyperjumptech/monika/lib/interfaces/data';
-
 import { NotificationContextInterface } from './NotificationContextInterface';
+import { Notification } from '@hyperjumptech/monika/lib/interfaces/notification';
 
-type Data = (
-  | MailgunData
-  | SendgridData
-  | SMTPData
-  | TeamsData
-  | TelegramData
-  | WebhookData
-  | WhatsappData
-) & { id: string };
-
-const NotificationContext = createContext<NotificationContextInterface<Data>>({
+const NotificationContext = createContext<NotificationContextInterface>({
   notificationData: [],
-  handleAddNotification: (data) => data,
-  handleRemoveNotification: (data) => data,
+  handleSetNotifications: () => undefined,
+  handleAddNotification: () => undefined,
+  handleRemoveNotification: () => undefined,
 });
 
 const NotificationProvider: FunctionComponent = ({ children }) => {
-  const [notifications, setNotifications] = useState<Data[]>([]);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const handleSetNotifications = (notifications: Notification[]) => {
+    setNotifications(notifications);
+  };
 
-  const handleAddNotification = (notification: Data) => {
+  const handleAddNotification = (notification: Notification) => {
     const notifData = notifications.concat({
       ...notification,
       id: uuid(),
@@ -41,7 +27,7 @@ const NotificationProvider: FunctionComponent = ({ children }) => {
     setNotifications(notifData);
   };
 
-  const handleRemoveNotification = (notification: Data) => {
+  const handleRemoveNotification = (notification: Notification) => {
     const data = notifications.filter((data) => data.id !== notification.id);
 
     setNotifications(data);
@@ -51,8 +37,9 @@ const NotificationProvider: FunctionComponent = ({ children }) => {
     <NotificationContext.Provider
       value={{
         notificationData: notifications,
-        handleAddNotification: handleAddNotification,
-        handleRemoveNotification: handleRemoveNotification,
+        handleSetNotifications,
+        handleAddNotification,
+        handleRemoveNotification,
       }}>
       {children}
     </NotificationContext.Provider>

contexts/NotificationContextInterface.ts

@@ -1,5 +1,8 @@
-export interface NotificationContextInterface<T> {
-  notificationData: T[];
-  handleAddNotification: (data: T) => void;
-  handleRemoveNotification: (data: T) => void;
+import { Notification } from '@hyperjumptech/monika/lib/interfaces/notification';
+
+export interface NotificationContextInterface {
+  notificationData: Notification[];
+  handleSetNotifications: (notifications: Notification[]) => void;
+  handleAddNotification: (notification: Notification) => void;
+  handleRemoveNotification: (notification: Notification) => void;
 }

contexts/ProbeContext.tsx

@@ -6,13 +6,18 @@ import { Probe } from '@hyperjumptech/monika/lib/interfaces/probe';
 
 const ProbeContext = createContext<ProbeContextInterface>({
   probeData: [],
-  handleAddProbe: (data) => data,
-  handleRemoveProbe: (data) => data,
+  handleSetProbes: () => undefined,
+  handleAddProbe: () => undefined,
+  handleRemoveProbe: () => undefined,
 });
 
 const ProbeProvider: FunctionComponent = ({ children }) => {
   const [probes, setProbes] = useState<Probe[]>([]);
 
+  const handleSetProbes = (probes: Probe[]) => {
+    setProbes(probes);
+  };
+
   const handleAddProbe = (probe: Probe) => {
     const probeData = probes.concat({
       ...probe,
@@ -32,6 +37,7 @@ const ProbeProvider: FunctionComponent = ({ children }) => {
     <ProbeContext.Provider
       value={{
         probeData: probes,
+        handleSetProbes,
         handleAddProbe,
         handleRemoveProbe,
       }}>

contexts/ProbeContextInterface.ts

@@ -2,6 +2,7 @@ import { Probe } from '@hyperjumptech/monika/lib/interfaces/probe';
 
 export interface ProbeContextInterface {
   probeData: Probe[];
+  handleSetProbes: (probes: Probe[]) => void;
   handleAddProbe: (probe: Probe) => void;
   handleRemoveProbe: (probe: Probe) => void;
 }

contexts/importer.ts

@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import { Probe } from '@hyperjumptech/monika/lib/interfaces/probe';
+import { Notification } from '@hyperjumptech/monika/lib/interfaces/notification';
+import { NotificationContext } from './NotificationContext';
+import { ProbeContext } from './ProbeContext';
+
+export const useConfigFileImporter = () => {
+  const { handleSetProbes } = useContext(ProbeContext);
+  const { handleSetNotifications } = useContext(NotificationContext);
+
+  return (file: File) =>
+    new Promise<void>((resolve, reject) => {
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        try {
+          const {
+            probes,
+            notifications,
+          }: {
+            probes?: Probe[];
+            notifications?: Notification[];
+          } = JSON.parse(String(reader.result));
+
+          if (probes) handleSetProbes(probes);
+          if (notifications) handleSetNotifications(notifications);
+
+          resolve();
+        } catch (error) {
+          reject(error);
+        }
+      };
+
+      reader.readAsText(file);
+    });
+};

pages/index.tsx

@@ -1,6 +1,11 @@
-import { SyntheticEvent, useState } from 'react';
+import { ChangeEvent, SyntheticEvent, useRef, useState } from 'react';
 import { Layout, Radio, Button } from '../components';
 import { useRouter } from 'next/router';
+import { useConfigFileImporter } from '../contexts/importer';
+
+const NEW = 'new';
+const HAVE_USED = 'have_used';
+const HAVE_CONFIGURATION_FILE = 'have_configuration_file';
 
 export default function Home(): JSX.Element {
   const router = useRouter();
@@ -10,8 +15,38 @@ export default function Home(): JSX.Element {
     e.preventDefault();
     console.log(e.target, 'Click Next');
 
-    if (condition === 'new') {
-      router.push('/what-do-you-want');
+    switch (condition) {
+      case NEW:
+        router.push('/what-do-you-want');
+        break;
+      case HAVE_USED:
+        /* TODO: Where to go? */
+        break;
+      case HAVE_CONFIGURATION_FILE:
+        // user pick a .json file
+        fileInputElement.current?.click();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const fileInputElement = useRef<HTMLInputElement>(null);
+
+  const importConfigFile = useConfigFileImporter();
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      importConfigFile(file)
+        .then(() => {
+          /* TODO: Show edit page */
+          console.log('context updated');
+        })
+        .catch((error) => {
+          /* TODO: How to display error? */
+          console.log(error.message);
+        });
     }
   };
 
@@ -40,28 +75,37 @@ export default function Home(): JSX.Element {
               <Radio
                 name="condition"
                 onClick={(v: string) => setCondition(v)}
-                value="new"
+                value={NEW}
                 help="Select this if you have never tried Monika before. We will guide you one step at a time.">
                 I&apos;m new to Monika
               </Radio>
               <Radio
                 name="condition"
                 onClick={(v: string) => setCondition(v)}
-                value="have_used"
+                value={HAVE_USED}
                 help="Select this if you want to jump into customizing Monika's configuration.">
                 I have used Monika before
               </Radio>
               <Radio
                 name="condition"
                 onClick={(v: string) => setCondition(v)}
-                value="have_configuration_file"
+                value={HAVE_CONFIGURATION_FILE}
                 help="Select this if you want to edit your configuration file.">
                 I have a configuration file
               </Radio>
             </div>
           </fieldset>
           <div className="mt-12 py-3">
             <Button onClick={handleNext}>Next</Button>
+            {/* hidden file input */}
+            <input
+              ref={fileInputElement}
+              type="file"
+              accept="application/json"
+              className="hidden h-0 w-0"
+              aria-hidden="true"
+              onChange={handleFileChange}
+            />
           </div>
         </form>
       </div>