fix: fix env variables issue (#157)

Because - When evaluating the env like ``` if (process.env.NEXT_PUBLIC_CONSOLE_BASE_URL === "hi"){} ``` it will affect by the webpack dead code elimination This commit - Use window.location.href to cope with this evaluation
instill-ai · Jul 13, 2022 · 58e2bb1 · 58e2bb1
1 parent a3f7bff
commit 58e2bb1
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 26 deletions.
diff --git a/...ponents/forms/connector/destination/ConfigureDestinationForm/ConfigureDestinationForm.tsx b/...ponents/forms/connector/destination/ConfigureDestinationForm/ConfigureDestinationForm.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect, useCallback } from "react";
+import { FC, useState, useEffect, useCallback, useMemo } from "react";
 import {
   BasicProgressMessageBox,
   ProgressMessageBoxState,
@@ -18,6 +18,7 @@ import { sendAmplitudeData } from "@/lib/amplitude";
 import { AxiosError } from "axios";
 import { ErrorDetails } from "@/lib/instill/types";
 import OutlineButton from "@/components/ui/Buttons/OutlineButton";
+import useDeleteResourceGuard from "@/hooks/useDeleteResourceGuard";
 
 export type ConfigureDestinationFormProps = {
   destination: Nullable<DestinationWithDefinition>;
@@ -104,6 +105,8 @@ const ConfigureDestinationForm: FC<ConfigureDestinationFormProps> = ({
   // #                                                                 #
   // ###################################################################
 
+  const { disableResourceDeletion } = useDeleteResourceGuard();
+
   const [deleteDestinationModalIsOpen, setDeleteDestinationModalIsOpen] =
     useState(false);
 
@@ -199,12 +202,7 @@ const ConfigureDestinationForm: FC<ConfigureDestinationFormProps> = ({
               </div>
               <div className="mb-10 flex flex-row">
                 <OutlineButton
-                  disabled={
-                    process.env.NEXT_PUBLIC_CONSOLE_BASE_URL ===
-                    "https://demo.instill.tech"
-                      ? true
-                      : false
-                  }
+                  disabled={disableResourceDeletion}
                   onClickHandler={() => setDeleteDestinationModalIsOpen(true)}
                   position="mr-auto my-auto"
                   type="button"

diff --git a/src/components/forms/connector/source/ConfigureSourceForm/ConfigureSourceForm.tsx b/src/components/forms/connector/source/ConfigureSourceForm/ConfigureSourceForm.tsx
@@ -18,6 +18,7 @@ import { sendAmplitudeData } from "@/lib/amplitude";
 import { AxiosError } from "axios";
 import { ErrorDetails } from "@/lib/instill/types";
 import OutlineButton from "@/components/ui/Buttons/OutlineButton";
+import useDeleteResourceGuard from "@/hooks/useDeleteResourceGuard";
 
 export type ConfigureSourceFormProps = {
   source: Nullable<SourceWithPipelines>;
@@ -97,6 +98,8 @@ const ConfigureSourceForm: FC<ConfigureSourceFormProps> = ({ source }) => {
   // #                                                                 #
   // ###################################################################
 
+  const { disableResourceDeletion } = useDeleteResourceGuard();
+
   const [deleteSourceModalIsOpen, setDeleteSourceModalIsOpen] = useState(false);
 
   const [messageBoxState, setMessageBoxState] =
@@ -191,12 +194,7 @@ const ConfigureSourceForm: FC<ConfigureSourceFormProps> = ({ source }) => {
               </div>
               <div className="mb-10 flex flex-row">
                 <OutlineButton
-                  disabled={
-                    process.env.NEXT_PUBLIC_CONSOLE_BASE_URL ===
-                    "https://demo.instill.tech"
-                      ? true
-                      : false
-                  }
+                  disabled={disableResourceDeletion}
                   onClickHandler={() => setDeleteSourceModalIsOpen(true)}
                   position="mr-auto my-auto"
                   type="button"

diff --git a/src/components/forms/model/ConfigureModelForm/ConfigureModelForm.tsx b/src/components/forms/model/ConfigureModelForm/ConfigureModelForm.tsx
@@ -18,6 +18,7 @@ import OutlineButton from "@/components/ui/Buttons/OutlineButton";
 import { DeleteResourceModal } from "@/components/modals";
 import { AxiosError } from "axios";
 import { ErrorDetails } from "@/lib/instill/types";
+import useDeleteResourceGuard from "@/hooks/useDeleteResourceGuard";
 
 export type ConfigureModelFormProps = {
   model: Nullable<Model>;
@@ -142,6 +143,8 @@ const ConfigureModelForm: FC<ConfigureModelFormProps> = ({
   // #                                                                 #
   // ###################################################################
 
+  const { disableResourceDeletion } = useDeleteResourceGuard();
+
   const modalState = useDeleteResourceModalState();
 
   const deleteModel = useDeleteModel();
@@ -227,12 +230,7 @@ const ConfigureModelForm: FC<ConfigureModelFormProps> = ({
               </div>
               <div className="flex flex-row">
                 <OutlineButton
-                  disabled={
-                    process.env.NEXT_PUBLIC_CONSOLE_BASE_URL ===
-                    "https://demo.instill.tech"
-                      ? true
-                      : false
-                  }
+                  disabled={disableResourceDeletion}
                   onClickHandler={() => modalState.setModalIsOpen(true)}
                   position="mr-auto my-auto"
                   type="button"

diff --git a/src/components/forms/pipeline/ConfigurePipelineForm/ConfigurePipelineForm.tsx b/src/components/forms/pipeline/ConfigurePipelineForm/ConfigurePipelineForm.tsx
@@ -15,6 +15,7 @@ import { sendAmplitudeData } from "@/lib/amplitude";
 import { DeleteResourceModal } from "@/components/modals";
 import { useRouter } from "next/router";
 import OutlineButton from "@/components/ui/Buttons/OutlineButton";
+import useDeleteResourceGuard from "@/hooks/useDeleteResourceGuard";
 
 export type ConfigurePipelineFormProps = {
   pipeline: Nullable<Pipeline>;
@@ -136,6 +137,8 @@ const ConfigurePipelineForm: FC<ConfigurePipelineFormProps> = ({
   // #                                                                 #
   // ###################################################################
 
+  const { disableResourceDeletion } = useDeleteResourceGuard();
+
   const [deletePipelineModalIsOpen, setDeletePipelineModalIsOpen] =
     useState(false);
 
@@ -264,12 +267,7 @@ const ConfigurePipelineForm: FC<ConfigurePipelineFormProps> = ({
               </div>
               <div className="mb-10 flex flex-row">
                 <OutlineButton
-                  disabled={
-                    process.env.NEXT_PUBLIC_CONSOLE_BASE_URL ===
-                    "https://demo.instill.tech"
-                      ? true
-                      : false
-                  }
+                  disabled={disableResourceDeletion}
                   onClickHandler={() => setDeletePipelineModalIsOpen(true)}
                   position="mr-auto my-auto"
                   type="button"

diff --git a/src/hooks/useDeleteResourceGuard.ts b/src/hooks/useDeleteResourceGuard.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+const useDeleteResourceGuard = () => {
+  const [disableResourceDeletion, setDisableResourceDeletion] = useState(false);
+
+  useEffect(() => {
+    const hostname = new URL(window.location.href).hostname;
+
+    if (hostname === "demo.instill.tech") {
+      setDisableResourceDeletion(true);
+      return;
+    }
+
+    setDisableResourceDeletion(false);
+  }, []);
+
+  return { disableResourceDeletion };
+};
+
+export default useDeleteResourceGuard;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -13,7 +13,7 @@ export const Document: FC = () => {
           property="twitter:image"
           content={`${process.env.NEXT_PUBLIC_CONSOLE_BASE_URL}/images/instill-open-graph.png`}
         />
-        {process.env.NEXT_PUBLIC_CONSOLE_BASE_URL ===
+        {`${process.env.NEXT_PUBLIC_CONSOLE_BASE_URL}` ===
         "https://demo.instill.tech" ? (
           <>
             <script