Merge branch 'main' into ViewButtonForEditor

frontend/src/hooks/index.js

@@ -3,8 +3,9 @@ import { useContext } from 'react';
 import { AuthContext, SnippetsContext } from '../contexts';
 import useLanguage from './useLanguage.js';
 import useRunButton from './useRunButton.js';
+import useSaveButton from './useSaveButton.js';
 
 const useAuth = () => useContext(AuthContext);
 const useSnippets = () => useContext(SnippetsContext);
 
-export { useAuth, useLanguage, useRunButton, useSnippets };
+export { useAuth, useLanguage, useRunButton, useSnippets, useSaveButton };

frontend/src/hooks/useSaveButton.js

@@ -0,0 +1,16 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { actions } from '../slices/editorSlice.js';
+
+const useSaveButton = () => {
+  const currentCode = useSelector((state) => state.editor.code);
+  const dispatch = useDispatch();
+  const saveCode = () => {
+    dispatch(actions.setCodeAndSavedCode(currentCode));
+  };
+
+  return {
+    saveCode,
+  };
+};
+
+export default useSaveButton;

frontend/src/locales/en.json

@@ -327,11 +327,16 @@
     "openOnRunIT": "Edit on RunIT",
     "rename": "Renane",
     "run": "Run",
-    "share": "Share"
+    "share": "Share",
+    "save": "Save"
   },
   "toasts": {
     "duplicateSnippet": {
       "success": "Snippet successfully copied!"
+    },
+    "saveCode": {
+      "success": "Snippet successfully saved!",
+      "error" : "Snippet was not saved"
     }
   }
 }

frontend/src/locales/ru.json

@@ -458,11 +458,16 @@
     "openOnRunIT": "Редактировать в RunIT",
     "rename": "Переименовать",
     "run": "Запустить",
-    "share": "Поделиться"
+    "share": "Поделиться",
+    "save": "Сохранить"
   },
   "toasts": {
     "duplicateSnippet": {
       "success": "Сниппет успешно скопирован!"
+    },
+    "saveCode": {
+      "success": "Сниппет успешно сохранен!",
+      "error" : "Не удалось сохранить сниппет"
     }
   }
 }

frontend/src/pages/snippet/ActionsToolbar.jsx

@@ -4,15 +4,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import Button from 'react-bootstrap/Button';
 import Col from 'react-bootstrap/Col';
 import { BoxArrowUp, Files, PlayFill } from 'react-bootstrap-icons';
+import { toast } from 'react-toastify';
 import { actions } from '../../slices';
-import { useAuth, useRunButton } from '../../hooks';
 import DisplayIconView from '../../components/ActionsToolbar/index.jsx';
+import { useAuth, useRunButton, useSaveButton } from '../../hooks';
+import 'react-toastify/dist/ReactToastify.css';
 
 function ActionsToolbar({ snippet }) {
   const { t } = useTranslation();
   const { onClick, disabled } = useRunButton();
+  const { saveCode } = useSaveButton();
   const dispatch = useDispatch();
-  const { snippetData, code } = snippet;
+  const { snippetData, code, isAllSaved } = snippet;
   const { name: snippetName, ownerUsername } = snippetData;
   const { isLoggedIn } = useAuth();
   const { direction } = useSelector((state) => state.editor);
@@ -50,6 +53,15 @@ function ActionsToolbar({ snippet }) {
     }
   };
 
+  const handleSaveCode = () => {
+    if (isAllSaved) {
+      saveCode();
+      toast.success(t('toasts.saveCode.success'));
+      return;
+    }
+    toast.error(t('toasts.saveCode.error'));
+  };
+
   const handleView = () => {
     if (direction === 'horizontal') {
       dispatch(actions.updateDirection('vertical'));
@@ -76,7 +88,6 @@ function ActionsToolbar({ snippet }) {
       >
         <Files />
       </Button>
-
       <Button
         className="btn-icon-only-full-height"
         onClick={handleShare}
@@ -94,6 +105,14 @@ function ActionsToolbar({ snippet }) {
         <PlayFill className="bi" />
         {t('snippetActions.run')}
       </Button>
+      <Button
+        className={`ms-3 btn-run${disabled ? ' running' : ''}`}
+        disabled={!isAllSaved}
+        onClick={handleSaveCode}
+        variant="primary"
+      >
+        {t('snippetActions.save')}
+      </Button>
     </Col>
   );
 }