Merge pull request #458 from ironcalc/name-sync

FIX: sync changes of the localstorage in the left drawer

webapp/app.ironcalc.com/frontend/src/App.tsx

@@ -30,6 +30,7 @@ function App() {
   const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
   const [isTemplatesDialogOpen, setTemplatesDialogOpen] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [localStorageId, setLocalStorageId] = useState<number>(1);
 
   useEffect(() => {
     async function start() {
@@ -129,6 +130,7 @@ function App() {
         newModel={handleNewModel}
         setModel={handleSetModel}
         onDelete={handleDeleteModelByUuid}
+        localStorageId={localStorageId}
       />
       <MainContent isDrawerOpen={isDrawerOpen}>
         {isDrawerOpen && (
@@ -153,6 +155,7 @@ function App() {
           onDelete={handleDeleteModel}
           isDrawerOpen={isDrawerOpen}
           setIsDrawerOpen={setIsDrawerOpen}
+          setLocalStorageId={setLocalStorageId}
         />
         <IronCalc model={model} />
       </MainContent>

webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx

@@ -34,6 +34,7 @@ export function FileBar(properties: {
   onDelete: () => void;
   isDrawerOpen: boolean;
   setIsDrawerOpen: (open: boolean) => void;
+  setLocalStorageId: (updater: (id: number) => number) => void;
 }) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const spacerRef = useRef<HTMLDivElement>(null);
@@ -67,7 +68,6 @@ export function FileBar(properties: {
         }}
       >
         <DrawerButton
-          // $isDrawerOpen={properties.isDrawerOpen}
           onClick={() => properties.setIsDrawerOpen(!properties.isDrawerOpen)}
           disableRipple
         >
@@ -96,6 +96,7 @@ export function FileBar(properties: {
           onNameChange={(name) => {
             properties.model.setName(name);
             updateNameSelectedWorkbook(properties.model, name);
+            properties.setLocalStorageId((id) => id + 1);
           }}
           maxWidth={maxTitleWidth}
         />

webapp/app.ironcalc.com/frontend/src/components/LeftDrawer/LeftDrawer.tsx

@@ -10,6 +10,7 @@ interface LeftDrawerProps {
   newModel: () => void;
   setModel: (key: string) => void;
   onDelete: (uuid: string) => void;
+  localStorageId: number;
 }
 
 function LeftDrawer({