Add filter to require Cosmo colors

Author: cheshire137

src/App.tsx

@@ -5,6 +5,7 @@ import './App.css'
 import {HideColorsProvider} from './HideColorsContext'
 import {RequireJpCoatsProvider} from './RequireJpCoatsContext'
 import {RequireAnchorProvider} from './RequireAnchorContext'
+import {RequireCosmoProvider} from './contexts/RequireCosmoProvider'
 import {ColorsProvider} from './ColorsContext'
 import {Header} from './Header'
 import {FiltersAndTable} from './FiltersAndTable'
@@ -33,9 +34,11 @@ const ProviderStack = ({children}: PropsWithChildren) => (
     <HideColorsProvider>
       <RequireJpCoatsProvider>
         <RequireAnchorProvider>
-          <SortProvider>
-            <ColorsProvider>{children}</ColorsProvider>
-          </SortProvider>
+          <RequireCosmoProvider>
+            <SortProvider>
+              <ColorsProvider>{children}</ColorsProvider>
+            </SortProvider>
+          </RequireCosmoProvider>
         </RequireAnchorProvider>
       </RequireJpCoatsProvider>
     </HideColorsProvider>

src/ColorsContext.tsx

@@ -1,6 +1,7 @@
 import {createContext, type PropsWithChildren, useContext, useMemo} from 'react'
 import {useRequireAnchor} from './RequireAnchorContext'
 import {useRequireJpCoats} from './RequireJpCoatsContext'
+import {useRequireCosmo} from './contexts/cosmo-context'
 import dmcNamedColorCodes from './assets/dmc-color-codes-names.json'
 import dmcNewJpCoatsColors from './assets/dmc-old-new-jp-coats-colors.json'
 import dmcCosmoColors from './assets/dmc-cosmo-colors.json'
@@ -17,6 +18,7 @@ const ColorsContext = createContext<Colors | undefined>(undefined)
 export function ColorsProvider({children}: PropsWithChildren) {
   const {requireAnchor} = useRequireAnchor()
   const {requireJpCoats} = useRequireJpCoats()
+  const {requireCosmo} = useRequireCosmo()
   const {sortOption} = useSort()
   const dataByDmcCode = useMemo<Record<string, EmbroideryFlossColor>>(() => {
     const result: Record<string, EmbroideryFlossColor> = {}
@@ -51,7 +53,7 @@ export function ColorsProvider({children}: PropsWithChildren) {
   const contextProps = useMemo(
     () => ({
       colors: colors
-        .filter(({anchorCode, jpCoatsOld, jpCoatsNew}) => {
+        .filter(({anchorCode, cosmoCodes, jpCoatsOld, jpCoatsNew}) => {
           if (requireAnchor && anchorCode === undefined) return false
           if (
             requireJpCoats &&
@@ -60,11 +62,14 @@ export function ColorsProvider({children}: PropsWithChildren) {
           ) {
             return false
           }
+          if (requireCosmo && (cosmoCodes === undefined || cosmoCodes.length < 1)) {
+            return false
+          }
           return true
         })
         .sort(colorCompareFunction(sortOption)),
     }),
-    [colors, requireAnchor, requireJpCoats, sortOption]
+    [colors, requireAnchor, requireCosmo, requireJpCoats, sortOption]
   )
   return (
     <ColorsContext.Provider value={contextProps}>

src/Filters.tsx

@@ -2,10 +2,12 @@ import {Checkbox, FormControl} from '@primer/react'
 import {Fieldset} from './Fieldset'
 import {useRequireJpCoats} from './RequireJpCoatsContext'
 import {useRequireAnchor} from './RequireAnchorContext'
+import {useRequireCosmo} from './contexts/cosmo-context'
 
 export const Filters = () => {
   const {requireJpCoats, setRequireJpCoats} = useRequireJpCoats()
   const {requireAnchor, setRequireAnchor} = useRequireAnchor()
+  const {requireCosmo, setRequireCosmo} = useRequireCosmo()
 
   return (
     <Fieldset
@@ -18,17 +20,24 @@ export const Filters = () => {
     >
       <FormControl>
         <Checkbox
-          checked={requireJpCoats}
-          onChange={() => setRequireJpCoats(!requireJpCoats)}
+          checked={requireAnchor}
+          onChange={() => setRequireAnchor(!requireAnchor)}
         />
-        <FormControl.Label>J&amp;P Coats</FormControl.Label>
+        <FormControl.Label>Anchor</FormControl.Label>
       </FormControl>
       <FormControl>
         <Checkbox
-          checked={requireAnchor}
-          onChange={() => setRequireAnchor(!requireAnchor)}
+          checked={requireCosmo}
+          onChange={() => setRequireCosmo(!requireCosmo)}
         />
-        <FormControl.Label>Anchor</FormControl.Label>
+        <FormControl.Label>Cosmo</FormControl.Label>
+      </FormControl>
+      <FormControl>
+        <Checkbox
+          checked={requireJpCoats}
+          onChange={() => setRequireJpCoats(!requireJpCoats)}
+        />
+        <FormControl.Label>J&amp;P Coats</FormControl.Label>
       </FormControl>
     </Fieldset>
   )

src/RequireAnchorContext.tsx

@@ -13,7 +13,7 @@ interface RequireAnchor {
 
 const RequireAnchorContext = createContext<RequireAnchor | undefined>(undefined)
 
-export const RequireAnchorProvider = ({children}: PropsWithChildren) => {
+export function RequireAnchorProvider({children}: PropsWithChildren) {
   const [requireAnchor, setRequireAnchor] = useState(false)
   const contextProps = useMemo(
     () => ({requireAnchor, setRequireAnchor}),
@@ -26,7 +26,7 @@ export const RequireAnchorProvider = ({children}: PropsWithChildren) => {
   )
 }
 
-export const useRequireAnchor = () => {
+export function useRequireAnchor() {
   const context = useContext(RequireAnchorContext)
   if (context === undefined)
     throw new Error(

src/contexts/RequireCosmoProvider.tsx

@@ -0,0 +1,15 @@
+import {type PropsWithChildren, useMemo, useState} from 'react'
+import {RequireCosmoContext} from './cosmo-context'
+
+export function RequireCosmoProvider({children}: PropsWithChildren) {
+  const [requireCosmo, setRequireCosmo] = useState(false);
+  const contextProps = useMemo(
+    () => ({requireCosmo, setRequireCosmo}),
+    [requireCosmo, setRequireCosmo]
+  );
+  return (
+    <RequireCosmoContext.Provider value={contextProps}>
+      {children}
+    </RequireCosmoContext.Provider>
+  );
+}

src/contexts/cosmo-context.ts

@@ -0,0 +1,16 @@
+import {createContext, useContext} from 'react'
+
+interface RequireCosmoContextProps {
+  requireCosmo: boolean
+  setRequireCosmo: (val: boolean) => void
+}
+
+export const RequireCosmoContext = createContext<RequireCosmoContextProps | undefined>(undefined)
+
+export function useRequireCosmo() {
+  const context = useContext(RequireCosmoContext)
+  if (context === undefined) {
+    throw new Error('useRequireCosmo must be used within a RequireCosmoProvider')
+  }
+  return context
+}