fixes

backend/src/snippets/snippets.controller.ts

@@ -17,7 +17,6 @@ import { CreateSnippetDto } from './dto/create-snippet.dto';
 import { UpdateSnippetDto } from './dto/update-snippet.dto';
 import { Snippet } from './interfaces/snippets.interface';
 import { SnippetsService } from './snippets.service';
-import { UsersService } from '../users/users.service';
 import { HttpExceptionFilter } from './exceptions/http-exception.filter';
 import { ParseIntPipe } from './pipes/parse-int.pipe';
 import { JwtAuthGuard } from '../auth/jwt-auth.guard';
@@ -27,19 +26,18 @@ import { User } from '../users/interfaces/users.interface';
 @Controller('snippets')
 @UseFilters(new HttpExceptionFilter())
 export class SnippetsController {
-  constructor(
-    private snippetsService: SnippetsService,
-    private usersService: UsersService,
-  ) {}
+  constructor(private snippetsService: SnippetsService) {}
 
   @Get()
   async findAll(): Promise<Snippet[]> {
-    console.log('check')
     return this.snippetsService.findAll();
   }
 
   @Get(':login/:slug')
-  async findOneByLoginSlug(@Param('login') login: string, @Param('slug') slug: string): Promise<Snippet> {
+  async findOneByLoginSlug(
+    @Param('login') login: string,
+    @Param('slug') slug: string,
+  ): Promise<Snippet> {
     return this.snippetsService.findByLoginSlug(login, slug);
   }
 

backend/src/snippets/snippets.service.ts

@@ -43,9 +43,7 @@ export class SnippetsService {
     const trimmedName = name.trim();
     const extension = path.extname(trimmedName);
     const basename = path.basename(trimmedName, extension);
-    const slug = `${basename
-      .replace(/\s/g, '-')
-      .toLowerCase()}_${extension.slice(1)}`;
+    const slug = `${basename.replace(/\s/g, '-').toLowerCase()}`;
     const snippets = await this.snippetManager
       .createQueryBuilder(Snippets, 'snippet')
       .where('snippet.userId= :id', { id })

frontend/src/App.jsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 // import { useLoaderData } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { MonacoEditor } from './components/Editor/index.jsx';
-import { Button } from './components/Button/index.jsx';
+import { SnippetButton } from './components/SnippetButton/index.jsx';
 import { Terminal } from './components/Terminal/index.jsx';
 import { actions } from './slices/index.js';
 import { useSnippets } from './hooks';
@@ -37,7 +37,7 @@ export function App() {
     <main className="container-fluid bg-dark py-5">
       <div className="row mb-2">
         <div className="col-12">
-          <Button />
+          <SnippetButton />
           <div className="mt-2 text-center text-muted">
             <small>
               {isAllSaved ? t('editor.allSaved') : t('editor.unsavedChanges')}

frontend/src/AppRoutes.jsx

@@ -31,6 +31,7 @@ function AppRoutes() {
       <Route path="/" element={<Layout />}>
         <Route index element={<Landing />} />
         <Route path="/editor" element={<App />} />
+        <Route path="/users/:login/snippets/:slug" element={<App />} />
         <Route path={routes.aboutPagePath()} element={<About />} />
         <Route element={<ProtectedRoute user={isLoggedIn} />}>
           <Route path={routes.profilePagePath()} element={<Profile />} />

frontend/src/Pages/NotFound.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 function NotFound() {
   const { t } = useTranslation();
 
-  return (<div>{t('appRotes.pageNotFound')}</div>);
+  return <div>{t('appRotes.pageNotFound')}</div>;
 }
 
-export default NotFound;
+export default NotFound;

frontend/src/components/Embed/EmbedRunButton.jsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useButton } from '../Button/hooks';
-import classes from '../Button/Button.module.css';
+import { useButton } from '../SnippetButton/hooks';
+import classes from '../SnippetButton/SnippetButton.module.css';
 
 export const EmbedRunButton = memo(() => {
   const { onClick, disabled } = useButton();

frontend/src/components/Embed/EmbedSnippet.jsx

@@ -6,7 +6,7 @@ import { EmbedRunButton } from './EmbedRunButton.jsx';
 import { Terminal } from '../Terminal';
 import { actions } from '../../slices/index.js';
 import { useSnippets } from '../../hooks';
-import classes from '../Button/Button.module.css';
+import classes from '../SnippetButton/SnippetButton.module.css';
 
 function EmbedSnippet() {
   const snippetApi = useSnippets();

frontend/src/components/Button/hooks.js → frontend/src/components/SnippetButton/hooks.js

@@ -17,8 +17,11 @@ export const useButton = () => {
     () => dispatch(runCode(code)),
     [dispatch, runCode, code],
   );
-  const update = async (id) => {
-    const response = await axios.put(routes.updateSnippetPath(id), { code });
+  const update = async (id, name) => {
+    const response = await axios.put(routes.updateSnippetPath(id), {
+      code,
+      name,
+    });
     dispatch(actions.updateSavedCode(code));
     return response;
   };

frontend/src/components/Button/index.jsx → frontend/src/components/SnippetButton/index.jsx

@@ -1,13 +1,14 @@
 import { useTranslation } from 'react-i18next';
 import React, { memo, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import classes from './Button.module.css';
+import { useParams } from 'react-router-dom';
+import classes from './SnippetButton.module.css';
 import { useButton } from './hooks';
 import { useAuth, useSnippets } from '../../hooks';
 
 import { actions as modalActions } from '../../slices/modalSlice.js';
 
-export const Button = memo(() => {
+export const SnippetButton = memo(() => {
   const { onClick, disabled, update } = useButton();
   const [currentSnippetId, setCurrentSnippetId] = useState();
   const dispatch = useDispatch();
@@ -17,16 +18,19 @@ export const Button = memo(() => {
   const params = useParams();
 
   useEffect(() => {
-    const snippetParams = {
-      login: params.login,
-      slug: params.slug,
+    const getSnippetData = async () => {
+      const snippetParams = {
+        login: params.login,
+        slug: params.slug,
+      };
+      if (snippetsApi.hasViewSnippetParams(snippetParams)) {
+        const snippetData = await snippetsApi.getSnippetDataByViewParams(snippetParams);
+        setCurrentSnippetId(snippetData.id);
+      } else {
+        setCurrentSnippetId(false);
+      }
     };
-    if (snippetsApi.hasViewSnippetParams(snippetParams)) {
-      const decodedId = snippetsApi.getSnippetIdFromParams();
-      setCurrentSnippetId(decodedId);
-    } else {
-      setCurrentSnippetId(false);
-    }
+    getSnippetData();
   }, []);
 
   const getTypeOfModal = (isLoggedIn) => {
@@ -70,7 +74,7 @@ export const Button = memo(() => {
         disabled={disabled}
         onClick={() => {
           onClick();
-          update(currentSnippetId);
+          update(currentSnippetId, params.slug);
         }}
       >
         {t('editor.runButton')}

frontend/src/providers/SnippetsProvider.jsx

@@ -23,7 +23,9 @@ function SnippetsProvider({ children }) {
   };
 
   const getSnippetDataByViewParams = async ({ login, slug }) => {
-    const { data } = await axios.get(routes.getSnippetPathByLoginSlug(login, slug));
+    const { data } = await axios.get(
+      routes.getSnippetPathByLoginSlug(login, slug),
+    );
     return data;
   };
 

frontend/src/routes.js

@@ -13,7 +13,8 @@ export default {
   snippetsPath: () => [apiPath, 'snippets'].join('/'), // get - shows all snippets
   createSnippetPath: () => [apiPath, 'snippets'].join('/'), // post - create snippet: { name, code }
   getSnippetPath: (id) => [apiPath, 'snippets', `${id}`].join('/'), // get snippet
-  getSnippetPathByLoginSlug: (login, slug) => [apiPath, 'snippets', login, slug].join('/'),
+  getSnippetPathByLoginSlug: (login, slug) =>
+    [apiPath, 'snippets', login, slug].join('/'),
   updateSnippetPath: (id) => [apiPath, 'snippets', `${id}`].join('/'), // put - update snippet info: { name, code }
   deleteSnippetPath: (id) => [apiPath, 'snippets', `${id}`].join('/'), // delete snippet
   homePagePath: () => '/editor',

frontend/src/slices/terminalSlice.js

@@ -5,7 +5,7 @@ import axios from 'axios';
 export const runCode = createAsyncThunk(
   'terminal/runCode',
   async (code) => {
-    const { data, status } = await axios.get(`api/compile`, {
+    const { data, status } = await axios.get(`/api/compile`, {
       params: { code },
     });