move the remove addon state up to the Panel state/

chromaui · Feb 6, 2024 · 36f4e50 · 36f4e50
1 parent 44b0cdc
commit 36f4e50
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -11,6 +11,7 @@ import {
   IS_OUTDATED,
   LOCAL_BUILD_PROGRESS,
   PANEL_ID,
+  REMOVE_ADDON,
   START_BUILD,
 } from "./constants";
 import { Project } from "./gql/graphql";
@@ -61,12 +62,12 @@ export const Panel = ({ active, api }: PanelProps) => {
 
   // If the user creates a project in a dialog (either during login or later, it get set here)
   const [createdProjectId, setCreatedProjectId] = useState<Project["id"]>();
-  const [addonUninstalled, setAddonUninstalled] = useState<boolean>(false);
+  const [addonUninstalled, setAddonUninstalled] = useSharedState<boolean>(REMOVE_ADDON);
 
   if (addonUninstalled) {
     return (
       <Provider key={PANEL_ID} value={client}>
-        <UninstallProvider>
+        <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
           <Sections hidden={!active}>
             <Uninstalled />
           </Sections>
@@ -80,7 +81,7 @@ export const Panel = ({ active, api }: PanelProps) => {
     console.error(gitInfoError);
     return (
       <Provider key={PANEL_ID} value={client}>
-        <UninstallProvider>
+        <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
           <Sections hidden={!active}>
             <GitNotFound gitInfoError={gitInfoError} setAccessToken={setAccessToken} />
           </Sections>
@@ -93,7 +94,7 @@ export const Panel = ({ active, api }: PanelProps) => {
   if (!accessToken) {
     return (
       <Provider key={PANEL_ID} value={client}>
-        <UninstallProvider>
+        <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
           <Sections hidden={!active}>
             <Authentication
               key={PANEL_ID}
@@ -115,7 +116,7 @@ export const Panel = ({ active, api }: PanelProps) => {
   if (!projectId)
     return (
       <Provider key={PANEL_ID} value={client}>
-        <UninstallProvider>
+        <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
           <Sections hidden={!active}>
             <LinkProject
               createdProjectId={createdProjectId}
@@ -135,7 +136,7 @@ export const Panel = ({ active, api }: PanelProps) => {
     }
 
     return (
-      <UninstallProvider>
+      <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
         <Sections hidden={!active}>
           <LinkingProjectFailed
             projectId={projectId}
@@ -153,7 +154,7 @@ export const Panel = ({ active, api }: PanelProps) => {
 
     return (
       <Provider key={PANEL_ID} value={client}>
-        <UninstallProvider>
+        <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
           <Sections hidden={!active}>
             <LinkedProject
               projectId={projectId}
@@ -170,7 +171,7 @@ export const Panel = ({ active, api }: PanelProps) => {
   const localBuildIsRightBranch = gitInfo.branch === localBuildProgress?.branch;
   return (
     <Provider key={PANEL_ID} value={client}>
-      <UninstallProvider>
+      <UninstallProvider addonUninstalled={addonUninstalled} setAddonUninstalled={setAddonUninstalled}>
         <Sections hidden={!active}>
           <ControlsProvider>
             <VisualTests

diff --git a/src/screens/Uninstalled/UninstallContext.tsx b/src/screens/Uninstalled/UninstallContext.tsx
@@ -3,16 +3,22 @@ import React, { createContext, ReactNode } from "react";
 
 import { REMOVE_ADDON } from "../../constants";
 import { useRequiredContext } from "../../utils/useRequiredContext";
-import { useSharedState } from "../../utils/useSharedState";
 
 const UninstallContext = createContext<
   { addonUninstalled: boolean | undefined; uninstallAddon: () => void } | undefined
 >(undefined);
 
-export const UninstallProvider = ({ children }: { children: ReactNode }) => {
+export const UninstallProvider = ({
+  children,
+  addonUninstalled,
+  setAddonUninstalled,
+}: {
+  children: ReactNode;
+  addonUninstalled: boolean | undefined;
+  setAddonUninstalled: (value: boolean) => void;
+}) => {
   const channel = useStorybookApi().getChannel();
   if (!channel) throw new Error("Channel not available");
-  const [addonUninstalled, setAddonUninstalled] = useSharedState<boolean>(REMOVE_ADDON);
   const uninstallAddon = () => {
     channel.emit(REMOVE_ADDON);
     setAddonUninstalled(true);