feat: Update axios client and API usage

nepflow · Mar 4, 2024 · 9fee983 · 9fee983
1 parent 192a889
commit 9fee983
Show file tree

Hide file tree

Showing 18 changed files with 109 additions and 39 deletions.
diff --git a/web/.env b/web/.env
@@ -1,2 +1,2 @@
 # API Base URL
-VITE_REACT_APP_API_BASE_URL=https://api.nepflow.dev/v1
+VITE_REACT_APP_API_BASE_URL=https://widget-api.nepflow.dev/v1
diff --git a/web/.env.development b/web/.env.development
@@ -1,2 +1,2 @@
 # API Base URL
-VITE_REACT_APP_API_BASE_URL=http://localhost:5690/v1
+VITE_REACT_APP_API_BASE_URL=http://localhost:8675/v1
diff --git a/web/src/clients/api/queries/getGuide.ts b/web/src/clients/api/queries/getGuide.ts
@@ -3,10 +3,12 @@ import { appHost } from '../../../globals'
 import { type IntegrationGuide } from '../../../models/integrationGuide'
 
 async function getGuide (serviceId: string, secondServiceId: string, triggerId: string, actionId: string, guidedRecipeId?: string): Promise<IntegrationGuide> {
-  const res = await apiClient.get(`/services/${serviceId}/guide/${secondServiceId}/triggers/${triggerId}/actions/${actionId}`, {
+  const res = await apiClient.get(`/services/${serviceId}/guides/${secondServiceId}`, {
     params: {
       appHost,
-      guidedRecipeId
+      guidedRecipeId,
+      triggerId,
+      actionId
     }
   })
   const result = await res.data

diff --git a/web/src/clients/api/queries/getRecommendations.ts b/web/src/clients/api/queries/getRecommendations.ts
@@ -1,11 +1,11 @@
 import apiClient from '..'
 import { type Recommendation } from '../../../models/recommendation'
 
-async function getRecommendations (serviceKey: string, secondServiceKey: string): Promise<Recommendation[]> {
+async function getRecommendations (serviceId: string, secondServiceId: string): Promise<Recommendation[]> {
   const res = await apiClient.get('/services/recommendations', {
     params: {
-      serviceKey,
-      secondServiceKey
+      serviceId,
+      secondServiceId
     }
   })
   const result = await res.data

diff --git a/web/src/clients/api/queries/getService.ts b/web/src/clients/api/queries/getService.ts
@@ -2,11 +2,11 @@ import apiClient from '..'
 import { appHost } from '../../../globals'
 import { type Service } from '../../../models/service'
 
-async function getService (key: string, secondServiceKey?: string): Promise<Service> {
+async function getService (key: string, secondServiceId?: string): Promise<Service> {
   const res = await apiClient.get(`/services/${key}`, {
     params: {
       appHost,
-      secondServiceKey
+      secondServiceId
     }
   })
   const result = await res.data

diff --git a/web/src/components/BackButton/backButton.module.css b/web/src/components/BackButton/backButton.module.css
@@ -17,4 +17,11 @@
 }
 .backButton:hover {
   background-color: rgba(0, 0, 0, 0.07);
-}
+}
+
+@media (max-width: 480px) {
+  .backButton {
+    float: none;
+    margin-bottom: 16px;
+  }
+}
diff --git a/web/src/components/FullScreenLoading/FullScreenLoading.tsx b/web/src/components/FullScreenLoading/FullScreenLoading.tsx
@@ -6,7 +6,7 @@ function FullScreenLoading () {
     <div
       className={styles.container}
     >
-      <Icon className={styles.containerLoadingIcon} icon='loading' size={48} />
+      <Icon className={styles.containerLoadingIcon} icon='loading' size={36} />
     </div>
   )
 }

diff --git a/web/src/components/FullScreenLoading/fullScreenLoading.module.css b/web/src/components/FullScreenLoading/fullScreenLoading.module.css
@@ -11,8 +11,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 48px;
-  height: 48px;
-  margin: -24px 0 0 -24px;
+  width: 36px;
+  height: 36px;
+  margin: -18px 0 0 -18px;
   opacity: 0.5;
 }
diff --git a/web/src/components/ServiceCatalog/ServiceCatalog.tsx b/web/src/components/ServiceCatalog/ServiceCatalog.tsx
@@ -22,7 +22,7 @@ export default function ServiceCatalog () {
   const { rootServiceId } = useParams()
 
   const [search, setSearch] = useState('')
-  const [searchValue] = useDebounce(search, 1000)
+  const [searchValue] = useDebounce(search, 500)
 
   const config = useContext(ConfigContext)
 
@@ -33,22 +33,10 @@ export default function ServiceCatalog () {
     appendLoading: false
   })
 
-  const newCustomCardsCount = useMemo(() => {
+  const originalCustomCardsCount = useMemo(() => {
     return searchValue ? 0 : config.customCards?.filter(c => !c.replacedZapierAppId)?.length
   }, [config.customCards, searchValue])
 
-  useEffect(() => {
-    setData({ services: [], loading: true })
-
-    loadServices(undefined, 0, 60 - newCustomCardsCount)
-  }, [])
-
-  useEffect(() => {
-    setData({ services: [], loading: true })
-
-    loadServices(searchValue, 0, 60 - newCustomCardsCount)
-  }, [searchValue, newCustomCardsCount])
-
   const loadServices = useCallback(async (search: string = '', skip: number = 0, take: number = 60) => {
     const services = await getServices(rootServiceId || undefined, search, skip, take)
 
@@ -60,10 +48,22 @@ export default function ServiceCatalog () {
     })
   }, [data])
 
+  useEffect(() => {
+    setData({ services: [], loading: true })
+
+    loadServices(undefined, 0, 60 - originalCustomCardsCount)
+  }, [])
+
+  useEffect(() => {
+    setData({ services: [], loading: true })
+
+    loadServices(searchValue, 0, 60 - originalCustomCardsCount)
+  }, [searchValue, originalCustomCardsCount])
+
   const loadNextServices = useCallback(async () => {
     setData({ services: data.services, appendLoading: true })
 
-    await loadServices(searchValue, data.services.length + newCustomCardsCount)
+    await loadServices(searchValue, data.services.length + originalCustomCardsCount)
   }, [data, searchValue])
 
   const handleSearchChange = useCallback((e: React.FormEvent<HTMLInputElement>) => {
@@ -106,7 +106,13 @@ export default function ServiceCatalog () {
               actions: []
             }
           };
-        } else if (!searchValue) {
+        } else {
+          const isCardMatch = () => `${customCard.name} ${customCard.id}`.toLowerCase().includes(searchValue.trim().toLowerCase())
+
+          if (searchValue && !isCardMatch()) {
+            return
+          }
+
           services.unshift({
             id: customCard.id,
             name: customCard.name,
@@ -120,7 +126,7 @@ export default function ServiceCatalog () {
     };
 
     return services
-  }, [data.services, config.customCards])
+  }, [data.services, config.customCards, searchValue])
 
   return (
     <div>

diff --git a/web/src/components/ServiceCatalog/serviceCatalog.module.css b/web/src/components/ServiceCatalog/serviceCatalog.module.css
@@ -44,9 +44,9 @@
 .listItem {
   min-width: 0;
   border-radius: 12px;
-  padding: 0 18px 0 56px;
-  line-height: 54px;
-  height: 56px;
+  padding: 0 18px 0 52px;
+  line-height: 51px;
+  height: 52px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
@@ -77,7 +77,7 @@
   position: absolute;
   left: 16px;
   top: 14px;
-  width: 26px;
+  width: 22px;
 }
 
 .buttonWrapper {
@@ -117,7 +117,7 @@
   }
 }
 
-@media (max-width: 360px) {
+@media (max-width: 480px) {
   .listLink {
     flex: 0 0 100%;
     max-width: 100%;

diff --git a/web/src/components/ServicePage/AutoGeneratedGuide/autoGeneratedGuide.module.css b/web/src/components/ServicePage/AutoGeneratedGuide/autoGeneratedGuide.module.css
@@ -37,3 +37,13 @@
   margin-right: 8px;
   opacity: 0.8;
 }
+
+
+@media (max-width: 480px) {
+  .card { 
+    width: auto;
+    margin-left: -25px;
+    margin-right: -25px;
+    border-radius: 0;
+  }
+}
diff --git a/web/src/components/ServicePage/AutoGeneratedGuide/content/content.module.css b/web/src/components/ServicePage/AutoGeneratedGuide/content/content.module.css
@@ -54,4 +54,14 @@
   line-height: 20px;
   padding: 7px 12px;
   border-top: solid 1px #ccc;
+}
+
+@media (max-width: 480px) {
+  .childStep {
+    margin-right: 0;
+    display: block;
+  }
+  .childSteps {
+    margin: 16px 0 16px -24px;
+  }
 }
diff --git a/web/src/components/ServicePage/Methods/Banner/banner.module.css b/web/src/components/ServicePage/Methods/Banner/banner.module.css
@@ -16,4 +16,11 @@
   font-size: 14px;
   line-height: 24px;
   color: #888;
+}
+
+@media (max-width: 480px) {
+  .banner {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
diff --git a/web/src/components/ServicePage/Methods/methods.module.css b/web/src/components/ServicePage/Methods/methods.module.css
@@ -71,3 +71,24 @@
   text-overflow: ellipsis;
 }
 
+
+@media (max-width: 480px) {
+  .card { 
+    width: auto;
+    margin-left: -25px;
+    margin-right: -25px;
+    border-radius: 0;
+  }
+
+  .recommendationIcons {
+    float: none;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 0 12px;
+  }
+
+  .recommendationTitle {
+    white-space: normal;
+    line-height: 24px;
+  }
+}
diff --git a/web/src/components/TriggerToActionSelector/TriggerToActionSelector.tsx b/web/src/components/TriggerToActionSelector/TriggerToActionSelector.tsx
@@ -121,7 +121,6 @@ export default function TriggerToActionSelector ({ action, trigger, rootService,
       <div className={styles.headerTrigger}>
         <div className={styles.headerFieldLabel}>Trigger</div>
         <Select
-          autoFocus={!trigger?.id}
           styles={selectStyles}
           placeholder='Select a trigger'
           isSearchable

diff --git a/web/src/routes/root.tsx b/web/src/routes/root.tsx
@@ -31,7 +31,7 @@ export default function Root () {
           postMessageToParent({
             action: 'setWidgetHeight',
             data: {
-              widgetHeight: height + (config.innerSpace * 2)
+              widgetHeight: height + (config.innerSpace * 2) + 50
             }
           })
         }
@@ -59,6 +59,10 @@ export default function Root () {
     }
   }, [rootServiceId])
 
+  useEffect(() => {
+    postMessageToParent({ action: 'handleLoaded' })
+  }, [])
+
   return (
     <ConfigContext.Provider value={config}>
       <RootServiceContext.Provider value={rootService}>

diff --git a/web/src/utils/postMessageToParent.ts b/web/src/utils/postMessageToParent.ts
@@ -3,6 +3,7 @@ import { entityId } from '../globals'
 type Action =
     | { action: 'setWidgetHeight', data: { widgetHeight: number } }
     | { action: 'handleCardClick', data: { id: string } }
+    | { action: 'handleLoaded', data?: unknown }
 
 // Send a message from the iframe to the parent window
 function postMessageToParent (action: Action) {

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -3,5 +3,8 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
+  server: {
+    port: 3090
+  }
 })