Merge pull request #131 from maddbuzz/snippet-saving-status

Show the current saving status of the snippet. Closes #28
hexlet-rus · Dec 27, 2022 · b63dc85 · b63dc85
2 parents cca82ec + f81892f
commit b63dc85
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 5 deletions.
diff --git a/app/javascript/App.jsx b/app/javascript/App.jsx
@@ -1,9 +1,10 @@
+import { useTranslation } from 'react-i18next';
 import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { MonacoEditor } from './components/Editor/index.jsx';
 import { Button } from './components/Button/index.jsx';
 import { Terminal } from './components/Terminal/index.jsx';
 import { actions } from './slices/index.js';
-import { useDispatch } from 'react-redux';
 import { useSnippets } from './hooks';
 
 export function App() {
@@ -15,17 +16,25 @@ export function App() {
       if (snippetApi.hasSnippetParams()) {
         const decodedId = snippetApi.getSnippetIdFromParams();
         const snippetData = await snippetApi.getSnippetData(decodedId);
-        dispatch(actions.updateCode(snippetData.code));
+        dispatch(actions.setCodeAndSavedCode(snippetData.code));
       }
     };
     loadSnippet();
   }, []);
 
+  const isAllSaved = useSelector((state) => state.editor.isAllSaved);
+  const { t } = useTranslation();
+
   return (
     <main className="container-fluid bg-dark py-5">
-      <div className="row mb-4">
+      <div className="row mb-2">
         <div className="col-12">
           <Button />
+          <div className="mt-2 text-center text-muted">
+            <small>
+              {isAllSaved ? t('editor.allSaved') : t('editor.unsavedChanges')}
+            </small>
+          </div>
         </div>
       </div>
       <div className="row">

diff --git a/app/javascript/components/Button/hooks.js b/app/javascript/components/Button/hooks.js
@@ -22,6 +22,7 @@ export const useButton = () => {
       const response = await axios.put(routes.updateSnippetPath(id), {
         code: code,
       });
+      dispatch(actions.updateSavedCode(code));
       return response;
     }
   };

diff --git a/app/javascript/components/Embed/EmbedSnippet.jsx b/app/javascript/components/Embed/EmbedSnippet.jsx
@@ -21,7 +21,7 @@ const EmbedSnippet = () => {
       if (snippetApi.hasSnippetParams()) {
         const decodedId = snippetApi.getSnippetIdFromParams();
         const snippetData = await snippetApi.getSnippetData(decodedId);
-        dispatch(actions.updateCode(snippetData.code));
+        dispatch(actions.setCodeAndSavedCode(snippetData.code));
       }
     };
     loadSnippet();

diff --git a/app/javascript/components/Repls/index.jsx b/app/javascript/components/Repls/index.jsx
@@ -15,7 +15,7 @@ export const Repls = () => {
   const { t } = useTranslation();
 
   const openTerminal = (code) => () => {
-    dispatch(actions.updateCode(code)); // далее роутинг на App
+    dispatch(actions.setCodeAndSavedCode(code)); // далее роутинг на App
     navigate(routes.homePagePath());
   };
 

diff --git a/app/javascript/locales/en.js b/app/javascript/locales/en.js
@@ -154,6 +154,8 @@ const enLocales = {
       authBanner: 'Log in to edit',
       runButton: 'Run',
       shareButton: 'Share',
+      unsavedChanges: 'There are unsaved changes in the code',
+      allSaved: 'No unsaved changes',
     },
     modals: {
       share: {

diff --git a/app/javascript/locales/ru.js b/app/javascript/locales/ru.js
@@ -156,6 +156,8 @@ const ruLocales = {
       authBanner: 'Авторизуйтесь для редактирования',
       runButton: 'Запустить',
       shareButton: 'Поделиться',
+      unsavedChanges: 'В коде есть несохраненные изменения',
+      allSaved: 'Несохраненных изменений нет',
     },
     modals: {
       share: {

diff --git a/app/javascript/slices/editorSlice.js b/app/javascript/slices/editorSlice.js
@@ -8,10 +8,22 @@ const slice = createSlice({
     error: false,
     isFetching: false,
     code: '// Write your code in JS\n',
+    savedCode: '// Write your code in JS\n',
+    isAllSaved: true,
   },
   reducers: {
+    setCodeAndSavedCode(state, { payload }) {
+      state.code = payload;
+      state.savedCode = payload;
+      state.isAllSaved = true;
+    },
     updateCode(state, { payload }) {
       state.code = payload;
+      state.isAllSaved = state.code === state.savedCode;
+    },
+    updateSavedCode(state, { payload }) {
+      state.savedCode = payload;
+      state.isAllSaved = state.code === state.savedCode;
     },
   },
 });