No more consumer

components/pages/StyledApp.tsx

@@ -1,4 +1,4 @@
-import { SessionConsumer } from "contexts/session";
+import { useSession } from "contexts/session";
 import type { FeatureBundle } from "framer-motion";
 import { LazyMotion } from "framer-motion";
 import { ThemeProvider } from "styled-components";
@@ -9,17 +9,17 @@ import { DEFAULT_THEME } from "utils/constants";
 const motionFeatures = async (): Promise<FeatureBundle> =>
   (await import("styles/motionFeatures")).default;
 
-const StyledApp: FC = ({ children }) => (
-  <SessionConsumer>
-    {({ themeName }) => (
-      <ThemeProvider theme={themes[themeName] || themes[DEFAULT_THEME]}>
-        <GlobalStyle />
-        <LazyMotion features={motionFeatures} strict>
-          {children}
-        </LazyMotion>
-      </ThemeProvider>
-    )}
-  </SessionConsumer>
-);
+const StyledApp: FC = ({ children }) => {
+  const { themeName } = useSession();
+
+  return (
+    <ThemeProvider theme={themes[themeName] || themes[DEFAULT_THEME]}>
+      <GlobalStyle />
+      <LazyMotion features={motionFeatures} strict>
+        {children}
+      </LazyMotion>
+    </ThemeProvider>
+  );
+};
 
 export default StyledApp;

components/system/Apps/AppsLoader.tsx

@@ -1,4 +1,4 @@
-import { ProcessConsumer } from "contexts/process";
+import { useProcesses } from "contexts/process";
 import { AnimatePresence } from "framer-motion";
 import dynamic from "next/dynamic";
 import { memo } from "react";
@@ -7,26 +7,26 @@ const RenderComponent = dynamic(
   () => import("components/system/Apps/RenderComponent")
 );
 
-const AppsLoader: FC = () => (
-  <ProcessConsumer>
-    {({ processes = {} }) => (
-      <AnimatePresence initial={false} presenceAffectsLayout={false}>
-        {Object.entries(processes).map(
-          ([id, { closing, Component, hasWindow }]) =>
-            id &&
-            Component &&
-            !closing && (
-              <RenderComponent
-                key={id}
-                Component={Component}
-                hasWindow={hasWindow}
-                id={id}
-              />
-            )
-        )}
-      </AnimatePresence>
-    )}
-  </ProcessConsumer>
-);
+const AppsLoader: FC = () => {
+  const { processes = {} } = useProcesses();
+
+  return (
+    <AnimatePresence initial={false} presenceAffectsLayout={false}>
+      {Object.entries(processes).map(
+        ([id, { closing, Component, hasWindow }]) =>
+          id &&
+          Component &&
+          !closing && (
+            <RenderComponent
+              key={id}
+              Component={Component}
+              hasWindow={hasWindow}
+              id={id}
+            />
+          )
+      )}
+    </AnimatePresence>
+  );
+};
 
 export default memo(AppsLoader);

components/system/Taskbar/TaskbarEntries/index.tsx

@@ -1,5 +1,5 @@
 import StyledTaskbarEntries from "components/system/Taskbar/TaskbarEntries/StyledTaskbarEntries";
-import { ProcessConsumer } from "contexts/process";
+import { useProcesses } from "contexts/process";
 import { AnimatePresence } from "framer-motion";
 import dynamic from "next/dynamic";
 
@@ -7,23 +7,22 @@ const TaskbarEntry = dynamic(
   () => import("components/system/Taskbar/TaskbarEntry")
 );
 
-const TaskbarEntries: FC = () => (
-  <StyledTaskbarEntries>
-    <ProcessConsumer>
-      {({ processes = {} }) => (
-        <AnimatePresence initial={false} presenceAffectsLayout={false}>
-          {Object.entries(processes)
-            .filter(
-              ([, { closing, hideTaskbarEntry }]) =>
-                !closing && !hideTaskbarEntry
-            )
-            .map(([id, { icon, title }]) => (
-              <TaskbarEntry key={id} icon={icon} id={id} title={title} />
-            ))}
-        </AnimatePresence>
-      )}
-    </ProcessConsumer>
-  </StyledTaskbarEntries>
-);
+const TaskbarEntries: FC = () => {
+  const { processes = {} } = useProcesses();
+
+  return (
+    <StyledTaskbarEntries>
+      <AnimatePresence initial={false} presenceAffectsLayout={false}>
+        {Object.entries(processes)
+          .filter(
+            ([, { closing, hideTaskbarEntry }]) => !closing && !hideTaskbarEntry
+          )
+          .map(([id, { icon, title }]) => (
+            <TaskbarEntry key={id} icon={icon} id={id} title={title} />
+          ))}
+      </AnimatePresence>
+    </StyledTaskbarEntries>
+  );
+};
 
 export default TaskbarEntries;

contexts/contextFactory.tsx

@@ -4,14 +4,12 @@ const contextFactory = <T,>(
   useContextState: () => T,
   ContextComponent?: JSX.Element
 ): {
-  Consumer: React.Consumer<T>;
   Provider: React.MemoExoticComponent<FC>;
   useContext: () => T;
 } => {
   const Context = createContext(Object.create(null) as T);
 
   return {
-    Consumer: Context.Consumer,
     Provider: memo<FC>(({ children }) => (
       <Context.Provider value={useContextState()}>
         {children}

contexts/process/index.tsx

@@ -1,12 +1,6 @@
 import contextFactory from "contexts/contextFactory";
 import useProcessContextState from "contexts/process/useProcessContextState";
 
-const { Consumer, Provider, useContext } = contextFactory(
-  useProcessContextState
-);
+const { Provider, useContext } = contextFactory(useProcessContextState);
 
-export {
-  Consumer as ProcessConsumer,
-  Provider as ProcessProvider,
-  useContext as useProcesses,
-};
+export { Provider as ProcessProvider, useContext as useProcesses };

contexts/session/index.tsx

@@ -1,12 +1,6 @@
 import contextFactory from "contexts/contextFactory";
 import useSessionContextState from "contexts/session/useSessionContextState";
 
-const { Consumer, Provider, useContext } = contextFactory(
-  useSessionContextState
-);
+const { Provider, useContext } = contextFactory(useSessionContextState);
 
-export {
-  Consumer as SessionConsumer,
-  Provider as SessionProvider,
-  useContext as useSession,
-};
+export { Provider as SessionProvider, useContext as useSession };