Skip to content

Commit 7a0727f

Browse files
risenWrisenW
committed
Add changes tracker to update saving status
1 parent 636cb86 commit 7a0727f

6 files changed

Lines changed: 50 additions & 30 deletions

File tree

‎src/frontend/components/CellEditor/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import dynamic from "next/dynamic";
22
import { useState } from "react";
33
import { useDispatch, useSelector } from "react-redux";
4-
import { updateCells } from "../../lib/state/reducer"
4+
import { updateCells, setNotebookSavingStatus } from "../../lib/state/reducer"
55
import { AppState, NbCell } from "../../lib/typings/types";
66

77
const AceEditor = dynamic(
@@ -32,6 +32,7 @@ const Editor = ({ cell }: { cell: NbCell }) => {
3232
const [code, updateCode] = useState(cell?.content);
3333

3434
const handleCodeChange = (newCode: any) => {
35+
dispatch(setNotebookSavingStatus("unsaved"))
3536
updateCode(newCode);
3637
const newCurrCell = { ...cell, content: newCode }
3738

‎src/frontend/components/IconMenu/file.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
addNotebook,
2222
setActiveNotebookTabNumber,
2323
updateActiveNotebookName,
24-
setNotebookIsSaving
24+
setNotebookSavingStatus,
2525
} from "../../lib/state/reducer"
2626
import { useDispatch, useSelector } from 'react-redux';
2727
import { AppState } from '../../lib/typings/types';
@@ -47,12 +47,12 @@ export default function FileMenu() {
4747
}
4848

4949
const handleSaveFile = async () => {
50-
dispatch(setNotebookIsSaving(true))
50+
dispatch(setNotebookSavingStatus("saving"))
5151
const currentNotebook = notebooks[activeNotebookName]
5252
const fileHandle = currentNotebook.metadata?.fileHandle
5353
const contents = JSON.stringify(currentNotebook)
5454
await saveNotebookToFileSystem(fileHandle, contents)
55-
dispatch(setNotebookIsSaving(false))
55+
dispatch(setNotebookSavingStatus("saved"))
5656
}
5757

5858
const downloadActiveNotebook = async () => {
@@ -82,7 +82,7 @@ export default function FileMenu() {
8282
⌘O
8383
</Typography>
8484
</MenuItem>
85-
<MenuItem>
85+
<MenuItem disabled={activeNotebookName === "Dashboard"}>
8686
<ListItemIcon>
8787
<DriveFileRenameOutlineIcon fontSize="small" />
8888
</ListItemIcon>
@@ -91,7 +91,7 @@ export default function FileMenu() {
9191
⌘R
9292
</Typography>
9393
</MenuItem>
94-
<MenuItem onClick={() => handleSaveFile()}>
94+
<MenuItem onClick={() => handleSaveFile()} disabled={activeNotebookName === "Dashboard"}>
9595
<ListItemIcon>
9696
<SaveIcon fontSize="small" />
9797
</ListItemIcon>
@@ -100,7 +100,7 @@ export default function FileMenu() {
100100
⌘S
101101
</Typography>
102102
</MenuItem>
103-
<MenuItem onClick={() => downloadActiveNotebook()}>
103+
<MenuItem onClick={() => downloadActiveNotebook()} disabled={activeNotebookName === "Dashboard"}>
104104
<ListItemIcon>
105105
<SaveAltIcon fontSize="small" />
106106
</ListItemIcon>
@@ -109,7 +109,7 @@ export default function FileMenu() {
109109
⌘D
110110
</Typography>
111111
</MenuItem>
112-
<MenuItem>
112+
<MenuItem disabled={activeNotebookName === "Dashboard"}>
113113
<ListItemIcon>
114114
<ImportExportIcon fontSize="small" />
115115
</ListItemIcon>

‎src/frontend/components/MenuBar/notebookOptionsBar.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@ import ViewMenu from '../IconMenu/view'
77
import RunMenu from '../IconMenu/run'
88
import ServerMenu from '../IconMenu/server'
99
import SettingsModal from '../Modals/Settings';
10-
import Chip from '@mui/material/Chip';
11-
import CheckIcon from '@mui/icons-material/Check';
1210
import { useSelector } from 'react-redux';
1311
import { AppState } from '../../lib/typings/types';
14-
12+
import SaveStatusLabel from './saveStatusLabel';
1513

1614
const MenuBar = () => {
17-
const { notebookIsSaving } = useSelector((state: { app: AppState }) => state.app)
15+
const { notebookSavingStatus, activeNotebookName } = useSelector((state: { app: AppState }) => state.app)
1816
const [activeMenuOption, setActiveMenuOptions] = useState({
1917
"file-menu": false,
2018
"edit-menu": false,
@@ -139,19 +137,10 @@ const MenuBar = () => {
139137
</div>
140138
<div className='justify-self-end mr-5'>
141139
{
142-
notebookIsSaving ?
143-
<Chip
144-
size='small'
145-
label={"Saving..."}
146-
color='info'
147-
/>
140+
activeNotebookName !== "Dashboard" ?
141+
<SaveStatusLabel notebookStatus={notebookSavingStatus} />
148142
:
149-
<Chip
150-
size='small'
151-
label={"Saved"}
152-
color='success'
153-
icon={<CheckIcon />}
154-
/>
143+
<div></div>
155144
}
156145
</div>
157146
</div>

‎src/frontend/components/MenuBar/saveStatusLabel.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { NotebookSaveStatus } from "../../lib/typings/types";
2+
import { Chip } from "@mui/material";
3+
import CheckIcon from '@mui/icons-material/Check';
4+
5+
export default function SaveStatusLabel({ notebookStatus }: { notebookStatus: NotebookSaveStatus }) {
6+
switch (notebookStatus) {
7+
case "saved":
8+
return <Chip
9+
size='small'
10+
label={"Saved"}
11+
color='success'
12+
icon={<CheckIcon />}
13+
/>
14+
case "saving":
15+
return <Chip
16+
size='small'
17+
label={"Saving..."}
18+
color='info'
19+
/>
20+
case "unsaved":
21+
return <Chip
22+
size='small'
23+
label={"* Not Saved"}
24+
color='secondary'
25+
/>
26+
default:
27+
return <div></div>
28+
}
29+
}

‎src/frontend/lib/state/reducer.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const initialState: AppState = {
2727
autosaveNotebook: true,
2828
},
2929
directories: [],
30-
notebookIsSaving: false,
30+
notebookSavingStatus: "saved"
3131
}
3232

3333
const appReducer = createSlice({
@@ -61,9 +61,9 @@ const appReducer = createSlice({
6161
setActiveNotebookTabNumber: (state, action) => {
6262
state.activeNotebookTabNumber = action.payload;
6363
},
64-
setNotebookIsSaving: (state, action) => {
65-
state.notebookIsSaving = action.payload;
66-
}
64+
setNotebookSavingStatus: (state, action) => {
65+
state.notebookSavingStatus = action.payload;
66+
},
6767
}
6868
});
6969

@@ -76,7 +76,7 @@ export const {
7676
setDirectories,
7777
addNotebook,
7878
setActiveNotebookTabNumber,
79-
setNotebookIsSaving,
79+
setNotebookSavingStatus
8080
} = appReducer.actions;
8181

8282
export default appReducer.reducer;

‎src/frontend/lib/typings/types.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export type CellLanguages = {
5959
}
6060
}
6161

62+
export type NotebookSaveStatus = "unsaved" | "saving" | "saved";
6263

6364
export type AppState = {
6465
interpreterMode: string;
@@ -69,5 +70,5 @@ export type AppState = {
6970
}
7071
directories: DirectoryObj[],
7172
config: Partial<NotebookConfig>;
72-
notebookIsSaving: boolean;
73+
notebookSavingStatus: NotebookSaveStatus
7374
}

0 commit comments

Comments
 (0)