chore: Linter issues

sites/shared/components/account/apikeys.mjs

@@ -1,11 +1,9 @@
 // Dependencies
-import { useState, useEffect, useContext } from 'react'
+import { useState, useEffect } from 'react'
 import { useTranslation } from 'next-i18next'
 import { DateTime } from 'luxon'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { shortDate, formatNumber } from 'shared/utils.mjs'
-// Context
-import { ModalContext } from 'shared/context/modal-context.mjs'
 // Hooks
 import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
@@ -13,12 +11,10 @@ import { useRouter } from 'next/router'
 import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 import { useApikeyDocs } from 'shared/hooks/use-apikey-docs.mjs'
 // Components
-import { BackToAccountButton, Choice, DisplayRow, NumberBullet } from './shared.mjs'
+import { BackToAccountButton, DisplayRow, NumberBullet } from './shared.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { LeftIcon, PlusIcon, CopyIcon, RightIcon, TrashIcon } from 'shared/components/icons.mjs'
-import { Collapse, useCollapseButton } from 'shared/components/collapse.mjs'
-import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
-import { PageLink, Link, WebLink } from 'shared/components/link.mjs'
+import { PageLink, Link } from 'shared/components/link.mjs'
 import { StringInput, ListInput, FormControl } from 'shared/components/inputs.mjs'
 
 export const ns = ['account', 'status']
@@ -228,10 +224,8 @@ const NewKey = ({ account, setGenerate, backend, title = true }) => {
 // Component for the 'new/apikey' page
 export const NewApikey = () => {
   // Hooks
-  const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
   const { account } = useAccount()
   const backend = useBackend()
-  const { t } = useTranslation(ns)
 
   // State
   const [generate, setGenerate] = useState(false)
@@ -242,7 +236,6 @@ export const NewApikey = () => {
 
   return (
     <div className="max-w-2xl xl:pl-4">
-      <LoadingStatus />
       <NewKey
         {...{
           account,

sites/shared/components/account/bookmarks.mjs

@@ -1,5 +1,5 @@
 // Dependencies
-import { useState, useEffect, useContext } from 'react'
+import { useState, useEffect, Fragment } from 'react'
 import { useTranslation } from 'next-i18next'
 // Hooks
 import { useBackend } from 'shared/hooks/use-backend.mjs'
@@ -178,7 +178,7 @@ export const Bookmarks = () => {
       ) : null}
       {types.map((type) =>
         perType[type].length > 0 ? (
-          <>
+          <Fragment key={type}>
             <h2>{t(`${type}Bookmark`)}</h2>
             <table className="table table-auto">
               <thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
@@ -225,7 +225,7 @@ export const Bookmarks = () => {
                 ))}
               </tbody>
             </table>
-          </>
+          </Fragment>
         ) : null
       )}
       <BackToAccountButton />

sites/shared/components/account/sets.mjs

@@ -1,12 +1,10 @@
 // Dependencies
-import { useState, useEffect, useContext, useCallback } from 'react'
+import { useState, useEffect, useContext } from 'react'
 import { useTranslation } from 'next-i18next'
-import orderBy from 'lodash.orderby'
 import { measurements } from 'config/measurements.mjs'
 import { measurements as designMeasurements } from 'shared/prebuild/data/design-measurements.mjs'
 import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs'
 // Hooks
-import { useDropzone } from 'react-dropzone'
 import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
 import { useToast } from 'shared/hooks/use-toast.mjs'
@@ -16,19 +14,14 @@ import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 import { LoadingContext } from 'shared/context/loading-context.mjs'
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Components
-import { Collapse, useCollapseButton } from 'shared/components/collapse.mjs'
-import { BackToAccountButton, Choice } from './shared.mjs'
+import { BackToAccountButton } from './shared.mjs'
 import { AnchorLink, PageLink, Link } from 'shared/components/link.mjs'
-import { ModalDesignPicker } from 'shared/components/modal/design-picker.mjs'
 import {
-  FilterIcon,
-  ClearIcon,
   OkIcon,
   NoIcon,
   TrashIcon,
   EditIcon,
   UploadIcon,
-  CancelIcon,
   ResetIcon,
   MeasieIcon,
   CalendarIcon,
@@ -36,14 +29,11 @@ import {
 } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import Markdown from 'react-markdown'
-import { Tab } from './bio.mjs'
 import Timeago from 'react-timeago'
-import { Spinner } from 'shared/components/spinner.mjs'
 import { DisplayRow } from './shared.mjs'
 import { shortDate, cloudflareImageUrl, formatMm } from 'shared/utils.mjs'
 import { useSetDocs } from 'shared/hooks/use-set-docs.mjs'
 import { useMeasurementDocs } from 'shared/hooks/use-measurement-docs.mjs'
-import { Lightbox } from 'shared/components/lightbox.mjs'
 import { isDegreeMeasurement } from 'config/measurements.mjs'
 import { TextOnBg } from 'shared/components/text-on-bg.mjs'
 
@@ -62,7 +52,6 @@ export const ns = [inputNs, 'account', 'patterns', 'status', 'measurements']
 export const NewSet = () => {
   // Hooks
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
-  const { account } = useAccount()
   const backend = useBackend()
   const { t } = useTranslation(ns)
   const router = useRouter()
@@ -86,6 +75,7 @@ export const NewSet = () => {
 
   return (
     <div className="max-w-xl">
+      <LoadingStatus />
       <h5>{t('name')}</h5>
       <p>{t('setNameDesc')}</p>
       <input
@@ -113,7 +103,7 @@ export const MeasieVal = ({ val, m, imperial }) =>
   isDegreeMeasurement(m) ? <span>{val}°</span> : <span>{formatMm(val, imperial)}</span>
 
 export const MsetBanner = ({ set, control, onClick = false, href = false }) => {
-  const { t, i18n } = useTranslation(ns)
+  const { t } = useTranslation(ns)
   const info = []
   if (control > 1)
     info.push([
@@ -145,7 +135,10 @@ export const MsetBanner = ({ set, control, onClick = false, href = false }) => {
         <TextOnBg txt={set.name} />
       </h2>
       {info.map((item) => (
-        <div className="flex flex-row flex-wrap gap-2 bg-base-100 p-4 rounded bg-opacity-50 py-1 mt-2 rounded-l-none">
+        <div
+          className="flex flex-row flex-wrap gap-2 bg-base-100 p-4 rounded bg-opacity-50 py-1 mt-2 rounded-l-none"
+          key={item[0]}
+        >
           {item[0]}
           {item[1]}
         </div>
@@ -180,8 +173,6 @@ export const Mset = ({ id, publicOnly = false }) => {
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
   const backend = useBackend()
   const { t } = useTranslation(ns)
-  const router = useRouter()
-  const { locale } = router
   const docs = useSetDocs(locale)
   const measieDocs = useMeasurementDocs(locale)
 
@@ -413,7 +404,7 @@ export const Mset = ({ id, publicOnly = false }) => {
           ) : null}
           {['public', 'units', 'notes'].map((id) =>
             account.control >= conf.account.sets[id] ? (
-              <li>
+              <li key={id}>
                 <AnchorLink id="units" txt={t(id)} />
               </li>
             ) : null
@@ -582,8 +573,6 @@ export const Sets = ({ title = true }) => {
   const backend = useBackend()
   const { t, i18n } = useTranslation(ns)
   const { setLoadingStatus, LoadingStatus, LoadingProgress } = useLoadingStatus()
-  const router = useRouter()
-  const { locale } = router
 
   // State
   const [sets, setSets] = useState([])

sites/shared/components/inputs.mjs

@@ -10,9 +10,8 @@ import { useDropzone } from 'react-dropzone'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
 import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 // Components
-import { Popout } from 'shared/components/popout/index.mjs'
 import Markdown from 'react-markdown'
-import { ResetIcon, DocsIcon, HelpIcon, UploadIcon } from 'shared/components/icons.mjs'
+import { ResetIcon, DocsIcon, UploadIcon } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { isDegreeMeasurement } from 'config/measurements.mjs'
 import { measurementAsMm, formatMm, measurementAsUnits, parseDistanceInput } from 'shared/utils.mjs'
@@ -119,44 +118,19 @@ export const StringInput = ({
   original, // The original value
   placeholder, // The placeholder text
   docs = false, // Docs to load, if any
-}) => {
-  const { setModal } = useContext(ModalContext)
-
-  const labelTR = docs ? (
-    <button
-      className="btn btn-secondary btn-outline"
-      onClick={() =>
-        setModal(
-          <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="left">
-            {docs}
-          </ModalWrapper>
-        )
-      }
-    >
-      <DocsIcon />
-    </button>
-  ) : (
-    false
-  )
-
-  return (
-    <FormControl label={label} docs={docs}>
-      <input
-        type="text"
-        placeholder={placeholder}
-        value={current}
-        onChange={(evt) => update(evt.target.value)}
-        className={`input w-full input-bordered ${
-          current === original
-            ? 'input-secondary'
-            : valid(current)
-            ? 'input-success'
-            : 'input-error'
-        }`}
-      />
-    </FormControl>
-  )
-}
+}) => (
+  <FormControl label={label} docs={docs}>
+    <input
+      type="text"
+      placeholder={placeholder}
+      value={current}
+      onChange={(evt) => update(evt.target.value)}
+      className={`input w-full input-bordered ${
+        current === original ? 'input-secondary' : valid(current) ? 'input-success' : 'input-error'
+      }`}
+    />
+  </FormControl>
+)
 
 /*
  * Dropdown for designs
@@ -349,7 +323,6 @@ export const MarkdownInput = ({
   placeholder, // The placeholder content
   docs = false, // Docs to load, if any
 }) => {
-  const { t } = useTranslation(ns)
   const [activeTab, setActiveTab] = useState('edit')
 
   return (
@@ -378,18 +351,6 @@ export const MarkdownInput = ({
   )
 }
 
-const Mval = ({ m, val = false, imperial = false, className = '' }) =>
-  val ? (
-    isDegreeMeasurement(m) ? (
-      <span className={className}>{val}°</span>
-    ) : (
-      <span
-        dangerouslySetInnerHTML={{ __html: formatMm(val, imperial ? 'imperial' : 'metric') }}
-        className={className}
-      />
-    )
-  ) : null
-
 export const MeasieInput = ({
   imperial, // True for imperial, False for metric
   m, // The measurement name

sites/shared/components/support.mjs

@@ -8,10 +8,8 @@ import { useBackend } from 'shared/hooks/use-backend.mjs'
 // Components
 import { Popout } from 'shared/components/popout/index.mjs'
 import {
-  GitHubIcon,
   HeartIcon,
   ChatIcon,
-  EmailIcon,
   BugIcon,
   SettingsIcon,
   DocsIcon,
@@ -31,7 +29,6 @@ import {
 import { cloudflareImageUrl } from 'shared/utils.mjs'
 import { CodeBox } from 'shared/components/code-box.mjs'
 import { WebLink } from 'shared/components/link.mjs'
-import Markdown from 'react-markdown'
 
 // Translation namespaces used on this page
 export const ns = ['support', 'designs', 'account', 'status']
@@ -201,7 +198,7 @@ export const SupportForm = ({ preload }) => {
       <>
         <div className="grid grid-cols-3 gap-2">
           {types.map((_type) => (
-            <SupportType type={_type} active={type === _type} update={setType} t={t} />
+            <SupportType type={_type} active={type === _type} update={setType} t={t} key={_type} />
           ))}
         </div>
         <p className="text-right">