Merge branch 'ag/new-bom' of https://github.com/kitspace/kitspace-v2

frontend/src/components/Board/BuyParts/Bom.jsx → frontend/src/components/Board/BuyParts/Bom.tsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 import DoubleScrollBar from 'react-double-scrollbar'
 
-import { array, bool, func, number, string } from 'prop-types'
 import styles from './Bom.module.scss'
 import TsvTable from './TsvTable'
 
-const Bom = ({ length, parts, tsv }) => {
+const Bom = ({ length, parts, tsv }: BomProps) => {
   const [diff, setDiff] = useState(0)
   const [collapsed, setCollapsed] = useState(true)
 
@@ -32,7 +31,7 @@ const Bom = ({ length, parts, tsv }) => {
   )
 }
 
-const ExpandBom = ({ diff, collapsed, setCollapsed }) => {
+const ExpandBom = ({ diff, collapsed, setCollapsed }: ExpandBomProps) => {
   const summary =
     diff > 0 && collapsed ? (
       <tr className={styles.expandSummary}>
@@ -71,16 +70,16 @@ const ExpandBom = ({ diff, collapsed, setCollapsed }) => {
   )
 }
 
-Bom.propTypes = {
-  length: number.isRequired,
-  parts: array.isRequired,
-  tsv: string.isRequired,
+interface BomProps {
+  length: number
+  parts: Array<any>
+  tsv: string
 }
 
-ExpandBom.propTypes = {
-  diff: number.isRequired,
-  collapsed: bool.isRequired,
-  setCollapsed: func.isRequired,
+interface ExpandBomProps {
+  diff: number
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
 }
 
 export default Bom

frontend/src/components/Board/BuyParts/DirectStores.jsx → frontend/src/components/Board/BuyParts/DirectStores.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react'
 
-import { array, number } from 'prop-types'
 import DigikeyData from '1-click-bom-minimal/lib/data/digikey.json'
 import FarnellData from '1-click-bom-minimal/lib/data/farnell.json'
 import countriesData from '1-click-bom-minimal/lib/data/countries.json'
 
-const DirectStores = ({ items, multiplier }) => {
+const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
   const [countryCode, setCountryCode] = useState('Other')
   const [digikeyParts, setDigikeyParts] = useState([])
   const [farnellParts, setFarnellParts] = useState([])
@@ -25,37 +24,22 @@ const DirectStores = ({ items, multiplier }) => {
     [items, multiplier],
   )
 
-  const getLocation = async () => {
-    const usedCountryCodes = Object.keys(countriesData).map(
-      key => countriesData[key],
-    )
-    const freegeoipEndpoint = 'https://freegeoip.kitspace.org'
-
-    try {
-      const res = await fetch(freegeoipEndpoint)
-      const body = await res.json()
-      const { country_code: code } = body
-      if (code === 'GB') {
-        return 'UK'
-      }
-      if (usedCountryCodes.indexOf(code) < 0) {
-        return 'Other'
-      }
-      return code
-    } catch (err) {
-      console.error(err)
-      return 'Other'
-    }
-  }
-
   useEffect(() => {
+    const abortController = new AbortController()
+    const signal = abortController.signal
     if (typeof window !== 'undefined') {
-      getLocation().then(code => setCountryCode(code))
+      getLocation(signal).then(code => {
+        if (code && !signal.aborted) {
+          setCountryCode(code)
+        }
+      })
     }
-
     setDigikeyParts(getParts('Digikey'))
     setFarnellParts(getParts('Farnell'))
     setNewarkParts(getParts('Newark'))
+    return () => {
+      abortController.abort()
+    }
   }, [getParts])
 
   const tildeDelimiter = part => `${part.sku}~${part.quantity}`
@@ -132,8 +116,31 @@ const DirectStores = ({ items, multiplier }) => {
   )
 }
 
-DirectStores.propTypes = {
-  items: array.isRequired,
-  multiplier: number.isRequired,
+const getLocation = async (signal: AbortSignal) => {
+  const usedCountryCodes = Object.keys(countriesData).map(key => countriesData[key])
+  const freegeoipEndpoint = 'https://freegeoip.kitspace.org'
+
+  try {
+    const res = await fetch(freegeoipEndpoint, { signal })
+    const body = await res.json()
+    const { country_code: code } = body
+    if (code === 'GB') {
+      return 'UK'
+    }
+    if (usedCountryCodes.indexOf(code) < 0) {
+      return 'Other'
+    }
+    return code
+  } catch (err) {
+    if (!signal.aborted) {
+      console.error(err)
+    }
+    return 'Other'
+  }
+}
+
+interface DirectStoresProps {
+  items: Array<any>
+  multiplier: number
 }
 export default DirectStores

frontend/src/components/Board/BuyParts/index.module.scss

@@ -1,6 +1,7 @@
 @import '../../breakpoint.scss';
 
 .notSelectable {
+  -webkit-user-select: none;
   user-select: none;
   cursor: default;
 }