Merge pull request #14 from aisflat439/cleanup

feat: assorted cleanup and addition of an interface

components/Navigation/TopNav.tsx

@@ -3,20 +3,27 @@ import { Tabs } from '@shopify/polaris';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 
-type TNavType =  string
+type TNavType = string
 
 interface IFRQuery {
-    type?: string
+  type?: string
 }
 
 interface IFcurrentPath {
   path?: string,
   href?: string,
 }
 
+interface EnumTabItem {
+  id: string,
+  content: string,
+  accessibilityLabel: string,
+  url: string,
+}
+
+interface EnumTabItems extends Array<EnumTabItem> { }
 
-// @todo add interface
-const tabs = [
+const tabs: EnumTabItems = [
   {
     id: 'dashboard',
     content: 'Dashboard',
@@ -45,23 +52,22 @@ const TopNav = () => {
 
   const router = useRouter()
   const currentPath: IFcurrentPath = useSelector(state => state.app.currentPath)
- 
+
   const query: IFRQuery = router.query
   const navType: TNavType = query.type ? query.type : ''
 
-
   // Sync the index
   useEffect(() => {
 
-    if(currentPath && currentPath.path) {
+    if (currentPath && currentPath.path) {
       const indexOfTab = tabs.findIndex(item => item.url.includes(currentPath.path))
-      if(indexOfTab !== -1 && selected !== indexOfTab) {
+      if (indexOfTab !== -1 && selected !== indexOfTab) {
         setSelected(indexOfTab)
       }
-      
-      if(indexOfTab === -1 && navType) {
+
+      if (indexOfTab === -1 && navType) {
         const typedTab = tabs.findIndex(item => item.url.includes(navType))
-        if(typedTab !== -1) {
+        if (typedTab !== -1) {
           setSelected(typedTab)
         }
       }
@@ -71,7 +77,7 @@ const TopNav = () => {
   }, [currentPath, currentPath])
 
 
-  if(!tabs || tabs.length === 0) {
+  if (!tabs || tabs.length === 0) {
     return null
   }
 

components/billing/BillingSelector.tsx

@@ -1,42 +1,40 @@
-import React, { useEffect, useContext } from 'react'
-import { Card, Layout, Banner, FooterHelp, Link } from '@shopify/polaris'
+import React, { useEffect } from 'react'
+import { Layout, FooterHelp, Link } from '@shopify/polaris'
 import BillingCards from './BillingCards'
 import { useSelector, useDispatch } from 'react-redux';
 import useBilling from '../../hooks/useBilling'
 import billingOptions from '../../_config/billingOptions';
 import BillingBannerInit from './BillingBannerInit';
 import CONSTANTS from '../../_constants';
-import useAppBridge from '../../hooks/useAppBridge';
-import { Redirect } from '@shopify/app-bridge/actions';
 
 const BillingSelector = () => {
 
   const dispatch = useDispatch()
   const loading = useSelector(state => state.laoding)
 
   const billing = useSelector(state => state.app.billing)
-  const {changePlan, data, fetching, mustRedirect} = useBilling()
-  if(billing === 'init') { return null }
-  
+  const { changePlan, data, fetching, mustRedirect } = useBilling()
+  if (billing === 'init') { return null }
+
 
 
   // set fetching
   useEffect(() => {
-    if(loading !== fetching) {
-      dispatch({type: CONSTANTS.LOADING, payload: fetching})
+    if (loading !== fetching) {
+      dispatch({ type: CONSTANTS.LOADING, payload: fetching })
     }
   }, [fetching])
 
   return (
     <Layout>
-      
-      {(billing.status === 'init' || !billing.active) &&  
+
+      {(billing.status === 'init' || !billing.active) &&
         <Layout.Section fullWidth>
           <BillingBannerInit />
         </Layout.Section>
       }
-      
-      <BillingCards items={billingOptions} changePlan={changePlan}/>
+
+      <BillingCards items={billingOptions} changePlan={changePlan} />
 
       <FooterHelp>
         Learn more about{' '}

hooks/useQuery.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, FunctionComponent } from 'react'
-import {useSelector} from 'react-redux'
+import React, { useState, useEffect } from 'react'
+import { useSelector } from 'react-redux'
 import Axios from 'axios'
 import merge from 'deepmerge'
 
@@ -10,58 +10,58 @@ export interface IFPageOptions {
   }
 }
 
- interface IFUseQuery {
+interface IFUseQuery {
   query: string
   variables: any
   options: IFPageOptions
 }
 
 interface IFUseQueryReturn {
-  fetching: boolean, 
-  error: boolean, 
-  data: any, 
-  runQuery: (variables?: any) => any, 
-  fetchMore: (variables?: any) => any, 
-  first: boolean, 
+  fetching: boolean,
+  error: boolean,
+  data: any,
+  runQuery: (variables?: any) => any,
+  fetchMore: (variables?: any) => any,
+  first: boolean,
   cursors: {
     next: string,
-    prev: string, 
-  }, 
+    prev: string,
+  },
   pageInfo?: {
     hasNextPage?: boolean,
-    hasPreviousPage?: boolean, 
-  } 
+    hasPreviousPage?: boolean,
+  }
 }
 
 
-const useQuery  = (query: string, variables: any, {shaper, pageOptions} : IFPageOptions) =>  {
+const useQuery = (query: string, variables: any, { shaper, pageOptions }: IFPageOptions) => {
 
-  // used to check that all the stte is set
+  // used to check that all the state is set
   const permanentDomain = useSelector(state => state.shop.domain)
-  
+
   // states
   const [fetching, setFetching] = useState(false)
   const [error, setError] = useState(false)
   const [data, setData] = useState()
   const [first, setFirst] = useState(true)
-  const [cursors, setCursors] = useState({next: '', prev: ''})
-  const [pageInfo, setPageInfo] = useState({hasNextPage: false, hasPreviousPage: false})
-  
+  const [cursors, setCursors] = useState({ next: '', prev: '' })
+  const [pageInfo, setPageInfo] = useState({ hasNextPage: false, hasPreviousPage: false })
+
   /**
    * defines next & previous and sets the value
    * - Only triggered when a shaper is used
    * @param {array} shapedRespnse 
    */
 
-  const defineAndSetCursors = (shapedRespnse) => {        
-    if(shapedRespnse[0].cursor) {
-      const indexOfLast = shapedRespnse.length -1
+  const defineAndSetCursors = (shapedRespnse) => {
+    if (shapedRespnse[0].cursor) {
+      const indexOfLast = shapedRespnse.length - 1
       const lastCursor = shapedRespnse[indexOfLast].cursor
 
       const indexOfPrevCursor = 0
       const prevCursor = shapedRespnse[indexOfPrevCursor].cursor
-     
-      setCursors({next: lastCursor, prev: prevCursor})
+
+      setCursors({ next: lastCursor, prev: prevCursor })
     }
   }
 
@@ -72,12 +72,12 @@ const useQuery  = (query: string, variables: any, {shaper, pageOptions} : IFPage
    * @param {object} response - raw response to plug page info from
    */
   const defineAndSetPageInfo = (response) => {
-    if(!pageOptions) { return false}
+    if (!pageOptions) { return false }
 
-    const {key} = pageOptions
-    if(response.data.data[key] && response.data.data[key].pageInfo) {
-      const {hasNextPage, hasPreviousPage} = response.data.data[key].pageInfo
-      setPageInfo({hasNextPage, hasPreviousPage})
+    const { key } = pageOptions
+    if (response.data.data[key] && response.data.data[key].pageInfo) {
+      const { hasNextPage, hasPreviousPage } = response.data.data[key].pageInfo
+      setPageInfo({ hasNextPage, hasPreviousPage })
     }
   }
 
@@ -88,8 +88,8 @@ const useQuery  = (query: string, variables: any, {shaper, pageOptions} : IFPage
    */
 
   const runQuery = async (newVariables?: any) => {
-    if(fetching || !permanentDomain) { return false}
-    
+    if (fetching || !permanentDomain) { return false }
+
     try {
       setFetching(true)
       setError(false)
@@ -103,16 +103,16 @@ const useQuery  = (query: string, variables: any, {shaper, pageOptions} : IFPage
       })
 
       // Set Data
-      if(response.data) { setData(shaper ? shaper(response) : response) }
-      
+      if (response.data) { setData(shaper ? shaper(response) : response) }
+
       // Set cursors
-      if(shaper){
+      if (shaper) {
         const cursorData = shaper(response)
         defineAndSetCursors(cursorData)
       }
 
       // set page information
-      if(pageOptions) {
+      if (pageOptions) {
         defineAndSetPageInfo(response)
       }
 
@@ -126,37 +126,37 @@ const useQuery  = (query: string, variables: any, {shaper, pageOptions} : IFPage
 
   /**
    * fetchMore
-   * Runs a graphql query through the middleware and aggregates the data into the 
+   * Runs a graphql query through the middleware and aggregates the data into the response
    * @param {object} variables - object of variables to be passed to the query for fetching additional dat
    */
 
   const fetchMore = async (newVariables) => {
-    
-    if(fetching || !newVariables || !permanentDomain) { return false}
+
+    if (fetching || !newVariables || !permanentDomain) { return false }
 
     try {
       setFetching(true)
       setError(false)
-      
+
       const response = await Axios.post('/api/query', {
         gql: query,
         shop: permanentDomain,
         variables: newVariables
       })
 
-      if(response.data) { 
-        const mergedData: any = shaper ? merge(data, shaper(response)) : merge(data, response) 
+      if (response.data) {
+        const mergedData: any = shaper ? merge(data, shaper(response)) : merge(data, response)
         setData(mergedData)
       }
-      
+
       // Set cursors
-      if(shaper){
+      if (shaper) {
         const cursorData = shaper(response)
         defineAndSetCursors(cursorData)
       }
 
       // set page information
-      if(pageOptions) {
+      if (pageOptions) {
         defineAndSetPageInfo(response)
       }
 
@@ -171,17 +171,17 @@ const useQuery  = (query: string, variables: any, {shaper, pageOptions} : IFPage
 
   // Run the query on first load. 
   useEffect(() => {
-    
-    if(first && permanentDomain) {
+
+    if (first && permanentDomain) {
       runQuery()
       setFirst(false)
-    } 
-    
-    return () => {}
+    }
+
+    return () => { }
   }, [permanentDomain])
 
 
-  const hookReturns: IFUseQueryReturn = {fetching, error, data, runQuery, fetchMore, first, cursors, pageInfo}
+  const hookReturns: IFUseQueryReturn = { fetching, error, data, runQuery, fetchMore, first, cursors, pageInfo }
   return hookReturns
 }