chore: fix various eslint errors and warnings

Signed-off-by: Will Lopez <[email protected]>

apiUtils/headerLanguage.js

@@ -1,3 +1,9 @@
+/**
+ * Look up the accepted languages in the HTTP headers
+ *
+ * @param {Object} req - the current request
+ * @returns {Array} A list of accepted languages
+ */
 export default function headerLookup(req) {
   let found;
 
@@ -9,23 +15,23 @@ export default function headerLookup(req) {
     const acceptLanguage = headers["accept-language"];
 
     if (acceptLanguage) {
-      const lngs = []; let i; let m;
+      const languages = []; let index; let match;
       const rgx = /(([a-z]{2})-?([A-Z]{2})?)\s*;?\s*(q=([0-9.]+))?/gi;
 
       do {
-        m = rgx.exec(acceptLanguage);
-        if (m) {
-          const lng = m[1]; const weight = m[5] || "1"; const q = Number(weight);
-          if (lng && !isNaN(q)) {
-            lngs.push({ lng, q });
+        match = rgx.exec(acceptLanguage);
+        if (match) {
+          const lng = match[1]; const weight = match[5] || "1"; const priority = Number(weight);
+          if (lng && !isNaN(priority)) {
+            languages.push({ lng, priority });
           }
         }
-      } while (m);
+      } while (match);
 
-      lngs.sort((a, b) => b.q - a.q);
+      languages.sort((langA, langB) => langB.priority - langA.priority);
 
-      for (i = 0; i < lngs.length; i++) {
-        locales.push(lngs[i].lng);
+      for (index = 0; index < languages.length; index += 1) {
+        locales.push(languages[index].lng);
       }
 
       if (locales.length) found = locales;

apiUtils/redirect.js

@@ -1,3 +1,11 @@
+/**
+ * Redirects to a new given location
+ *
+ * @param {Object} res  - response
+ * @param {String} statusCode  - HTTP response status code
+ * @param {String} location - the new location
+ * @returns {Object} the updated response object
+ */
 export default function redirect(res, statusCode, location) {
   if (!res) {
     throw new Error("Response object required");

components/AccountDropdown/AccountDropdown.js

@@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => ({
 const AccountDropdown = () => {
   const classes = useStyles();
   const [anchorElement, setAnchorElement] = useState(null);
-  const [viewer, isLoadingViewer] = useViewer();
+  const [viewer] = useViewer();
   const isAuthenticated = viewer && viewer._id;
 
   const toggleOpen = (event) => {

components/CartPopover/CartPopover.js

@@ -145,7 +145,6 @@ class CartPopover extends Component {
         isContainerHidden,
         isContainerVisible
       },
-      theme,
       uiStore
     } = this.props;
 

components/Link/Link.js

@@ -6,13 +6,27 @@ import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
 import useTranslation from "hooks/useTranslation";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   anchor: {
     color: "inherit",
     textDecoration: "none"
   }
 }));
 
+/**
+ * A wrapper around the next Link component
+ *
+ * @param {React.node} children - The elements the Link will wrap
+ * @param {String} className - Classes to apply
+ * @param {String} href - the links destination
+ * @param {Boolean} isUrlAbsolute - true if the link is absolute
+ * @param {Function} onClick - onClick handler
+ * @param {Object} param - route params
+ * @param {Object} route - the route object
+ * @param {Boolean} shouldOpenInNewWindow - if true link opens in new window
+ * @param {String} to - another way to specify the links destination
+ * @returns {React.Component} A wrapped link element
+ */
 function Link({
   children,
   className,
@@ -36,7 +50,7 @@ function Link({
   };
 
   // If link is an absolute link, or if link should open in new window,
-  // then directly us an `a` tag, insted of the `NextLink` component
+  // then directly us an `a` tag, instead of the `NextLink` component
   if (isUrlAbsolute || shouldOpenInNewWindow) {
     return (
       <a
@@ -87,6 +101,7 @@ Link.defaultProps = {
 };
 
 Link.propTypes = {
+  as: PropTypes.sting,
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   href: PropTypes.string,

components/LocaleDropdown/LocaleDropdown.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
 const LocaleDropdown = () => {
   const classes = useStyles();
   const router = useRouter();
-  const { locale, t } = useTranslation("common");
+  const { locale, t } = useTranslation("common"); // eslint-disable-line id-length
   const { uiStore } = useStores();
 
   const changeLanguage = useCallback(
@@ -42,7 +42,7 @@ const LocaleDropdown = () => {
         value={locale}
         onChange={(event) => changeLanguage(event.target.value)}
       >
-        { locales.map((locale, index) => <MenuItem key={index} value={locale}>{t(locale)}</MenuItem>)}
+        { locales.map((localeOption, index) => <MenuItem key={index} value={localeOption}>{t(localeOption)}</MenuItem>)}
       </Select>
     </div>
   );

components/MediaGallery/MediaGallery.js

@@ -86,7 +86,7 @@ class MediaGallery extends Component {
   }
 
   render() {
-    const { classes, mediaItems, theme } = this.props;
+    const { classes, mediaItems } = this.props;
 
     return (
       <Grid container className={classes.root}>

components/MiniCart/MiniCart.js

@@ -12,7 +12,6 @@ import Badge from "@material-ui/core/Badge";
 import Popper from "@material-ui/core/Popper";
 import Fade from "@material-ui/core/Fade";
 import withCart from "containers/cart/withCart";
-import variantById from "lib/utils/variantById";
 
 const styles = ({ palette, zIndex }) => ({
   popper: {
@@ -79,7 +78,7 @@ class MiniCart extends Component {
   anchorElement = null
 
   handlePopperOpen = () => {
-    const { cart, uiStore: { openCart } } = this.props;
+    const { uiStore: { openCart } } = this.props;
     openCart();
   }
 

components/PageSizeSelector/PageSizeSelector.js

@@ -4,8 +4,15 @@ import Select from "components/Select";
 import { PAGE_SIZES } from "lib/utils/pageSizes";
 import useTranslation from "hooks/useTranslation";
 
+/**
+ * Renders the page size selector
+ *
+ * @param {Integer} pageSize - the page size
+ * @param {Function} onChange - the onChange page size handler
+ * @returns {React.Component} The page size selector
+ */
 function PageSizeSelector({ pageSize, onChange }) {
-  const { t } = useTranslation("common");
+  const { t } = useTranslation("common"); // eslint-disable-line id-length
 
   return (
     <Select

components/ProductDetail/ProductDetail.js

@@ -181,7 +181,6 @@ class ProductDetail extends Component {
       currencyCode,
       product,
       routingStore,
-      theme,
       uiStore: { pdpSelectedOptionId, pdpSelectedVariantId },
       width
     } = this.props;

components/ProductDetailAddToCart/ProductDetailAddToCart.js

@@ -66,6 +66,7 @@ class ProductDetailAddToCart extends Component {
     onClick: PropTypes.func,
     selectedOptionId: PropTypes.string,
     selectedVariantId: PropTypes.string,
+    t: PropTypes.func, // eslint-disable-line id-length
     uiStore: PropTypes.shape({
       openCartWithTimeout: PropTypes.func
     }).isRequired,
@@ -197,7 +198,7 @@ class ProductDetailAddToCart extends Component {
         quantitySvg,
         quantityTypography
       },
-      t
+      t // eslint-disable-line id-length
     } = this.props;
 
     const { addToCartQuantity } = this.state;

components/ProfileMenu/ProfileMenu.js

@@ -20,6 +20,11 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
+/**
+ * Renders the menu in the profile view
+ *
+ * @returns {React.Component} The profile view react component
+ */
 function ProfileMenu() {
   const classes = useStyles();
   const { account } = useAuthStore();

components/SortBySelector/SortBySelector.js

@@ -3,8 +3,15 @@ import PropTypes from "prop-types";
 import Select from "components/Select";
 import useTranslation from "hooks/useTranslation";
 
+/**
+ * Renders the select to allow users to sort products
+ *
+ * @param {String} sortBy - the key to sort by
+ * @param {Function} onChange - the onChange event handler
+ * @returns {React.Component} - the sort by selector
+ */
 function SortBySelector({ sortBy, onChange }) {
-  const { t } = useTranslation("common");
+  const { t } = useTranslation("common"); // eslint-disable-line id-length
 
   return (
     <Select

containers/address/withAddressBook.js

@@ -10,7 +10,7 @@ import useUpdateAccountAddressBookEntry from "hooks/address/useUpdateAccountAddr
  * @return {React.Component} Wrapped component
  */
 export default function withAddressBook(Component) {
-  function WithAddressBook(props) {
+  function WithAddressBook(props) { // eslint-disable-line require-jsdoc
     const [addAccountAddressBookEntry] = useAddAccountAddressBookEntry();
     const [updateAccountAddressBookEntry] = useUpdateAccountAddressBookEntry();
     const [removeAccountAddressBookEntry] = useRemoveAccountAddressBookEntry();

containers/address/withAddressValidation.js

@@ -8,7 +8,7 @@ import useAddressValidation from "hooks/address/useAddressValidation";
  * @returns {React.Component} Higher order component
  */
 export default function withAddressValidation(Component) {
-  function WithAddressValidation(props) {
+  function WithAddressValidation(props) { // eslint-disable-line require-jsdoc
     const [addressValidation, addressValidationResults] = useAddressValidation();
 
     return (

containers/cart/withCart.js

@@ -10,7 +10,7 @@ import hoistNonReactStatic from "hoist-non-react-statics";
  * @returns {React.Component} - Component with `cart` props and callbacks
  */
 export default function withCart(Component) {
-  function WithCart(props) {
+  function WithCart(props) { // eslint-disable-line require-jsdoc
     const cart = useCart();
 
     return (

containers/order/withOrder.js

@@ -9,7 +9,7 @@ import useOrder from "../../hooks/orders/useOrder";
  * @returns {React.Component} - Component with `cart` props and callbacks
  */
 export default function withOrder(Component) {
-  function WithOrder(props) {
+  function WithOrder(props) { // eslint-disable-line require-jsdoc
     const [order, isLoading] = useOrder();
 
     return (

containers/order/withOrders.js

@@ -9,7 +9,7 @@ import useOrders from "hooks/orders/useOrders";
  * @returns {React.Component} - Component with `orders` props and callbacks
  */
 export default function withOrders(Component) {
-  function WithOrders(props) {
+  function WithOrders(props) { // eslint-disable-line require-jsdoc
     const [orders, isLoading, pagination] = useOrders();
 
     return (

context/AuthContext.js

@@ -1,10 +1,17 @@
 import { createContext, useState, useEffect } from "react";
+import PropTypes from "prop-types";
 import fetch from "isomorphic-unfetch";
 import useSWR from "swr";
 import { setAccessToken as setApolloToken } from "lib/apollo/apolloClient";
 
-const fetcher = (url) => fetch(url).then((r) => r.json());
+const fetcher = (url) => fetch(url).then((response) => response.json());
 
+/**
+ * Splits the user's full name into first and last name
+ *
+ * @param {Object} account - the users account
+ * @returns {Object} users first and last name as object properties
+ */
 function splitNames(account) {
   let firstName = "";
   let lastName = "";
@@ -61,3 +68,7 @@ export const AuthProvider = ({ children }) => {
     </AuthContext.Provider>
   );
 };
+
+AuthProvider.propTypes = {
+  children: PropTypes.node
+};

context/CartContext.js

@@ -1,4 +1,5 @@
 import { createContext, useState, useEffect } from "react";
+import PropTypes from "prop-types";
 import Cookies from "js-cookie";
 
 const ANONYMOUS_CART_ID_KEY_NAME = "anonymousCartId";
@@ -41,8 +42,8 @@ export const CartProvider = ({ children }) => {
   };
 
   const setAnonymousCartCredentialsFromLocalStorage = () => {
-    const anonymousCartId = localStorage.getItem(ANONYMOUS_CART_ID_KEY_NAME);
-    const anonymousCartToken = localStorage.getItem(ANONYMOUS_CART_TOKEN_KEY_NAME);
+    const anonymousCartId = localStorage.getItem(ANONYMOUS_CART_ID_KEY_NAME); // eslint-disable-line no-shadow
+    const anonymousCartToken = localStorage.getItem(ANONYMOUS_CART_TOKEN_KEY_NAME); // eslint-disable-line no-shadow
 
     setAnonymousCartCredentials(anonymousCartId, anonymousCartToken);
   };
@@ -74,7 +75,7 @@ export const CartProvider = ({ children }) => {
       clearAnonymousCartCredentials,
       setAnonymousCartCredentialsFromLocalStorage,
       setIsReconcilingCarts,
-      hasAnonymousCartCredentials: anonymousCartId && anonymousCartToken || false,
+      hasAnonymousCartCredentials: (anonymousCartId && anonymousCartToken) || false,
       hasAccountCart: typeof accountCartId === "string",
       setAccountCartId,
       addCheckoutPayment,
@@ -86,3 +87,7 @@ export const CartProvider = ({ children }) => {
     </CartContext.Provider>
   );
 };
+
+CartProvider.propTypes = {
+  children: PropTypes.node
+};

context/ContextProviders.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { RoutingProvider } from "context/RoutingContext";
 import { AuthProvider } from "context/AuthContext";
 import { CartProvider } from "context/CartContext";
@@ -32,3 +33,8 @@ export const ContextProviders = ({ children, pageProps }) => {
     </RoutingProvider>
   );
 };
+
+ContextProviders.propTypes = {
+  children: PropTypes.node,
+  pageProps: PropTypes.object
+};

context/LocaleContext.js

@@ -1,4 +1,5 @@
 import React, { createContext, useState, useEffect } from "react";
+import PropTypes from "prop-types";
 import { useRouter } from "next/router";
 import isLocale from "translations/isLocale";
 
@@ -41,3 +42,10 @@ export const LocaleProvider = ({ lang, translations, namespaces, children }) =>
     </LocaleContext.Provider>
   );
 };
+
+LocaleProvider.propTypes = {
+  children: PropTypes.node,
+  lang: PropTypes.string,
+  namespaces: PropTypes.array,
+  translations: PropTypes.array
+};