Merge pull request #168 from hexlet-rus/fix-routing

Fix routing

backend/package.json

@@ -10,7 +10,7 @@
     "format": "prettier --write \\\"src/**/*.ts\\\" \\\"__test__/**/*.ts\\\"",
     "start": "NODE_ENV=development PORT=5001 nest start",
     "typeorm": "typeorm-ts-node-commonjs",
-    "start:debug": "NODE_ENV=development nest start --debug --watch",
+    "start:debug": "NODE_ENV=development PORT=5001 nest start --debug --watch",
     "start:prod": "node dist/main",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",

backend/src/snippets/snippets.controller.ts

@@ -33,6 +33,14 @@ export class SnippetsController {
     return this.snippetsService.findAll();
   }
 
+  @Get(':login/:slug')
+  async findOneByLoginSlug(
+    @Param('login') login: string,
+    @Param('slug') slug: string,
+  ): Promise<Snippet> {
+    return this.snippetsService.findByLoginSlug(login, slug);
+  }
+
   @Get(':id')
   async findOne(@Param('id', new ParseIntPipe()) id: number): Promise<Snippet> {
     return this.snippetsService.findOne(id);

backend/src/snippets/snippets.service.ts

@@ -26,13 +26,24 @@ export class SnippetsService {
     return this.snippetsRepository.findOneBy({ id });
   }
 
+  async findByLoginSlug(login: string, slug: string): Promise<any> {
+    const user = await this.usersRepository.findOneBy({ login });
+    const snippet = await this.snippetsRepository.findOne({
+      where: {
+        user: {
+          id: user.id,
+        },
+        slug,
+      },
+    });
+    return snippet;
+  }
+
   async getSlug(name: string, login: string, id: number): Promise<string> {
     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 })

backend/src/snippets/validation/validation.pipe.ts

@@ -18,7 +18,7 @@ export class ValidationPipe implements PipeTransform<any> {
     const object = plainToInstance(metatype, value);
     const errors = await validate(object);
     if (errors.length > 0) {
-      throw new BadRequestException('Validation failed');
+      throw new BadRequestException('Validation failed', errors.join(' '));
     }
     return value;
   }

backend/src/users/validation/validation.pipe.ts

@@ -18,7 +18,7 @@ export class ValidationPipe implements PipeTransform<any> {
     const object = plainToInstance(metatype, value);
     const errors = await validate(object);
     if (errors.length > 0) {
-      throw new BadRequestException('Validation failed');
+      throw new BadRequestException('Validation failed', errors.join(' '));
     }
     return value;
   }

frontend/src/App.jsx

@@ -1,23 +1,28 @@
 import { useTranslation } from 'react-i18next';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLoaderData } from 'react-router';
+// 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';
 
 export function App() {
   const dispatch = useDispatch();
   const snippetApi = useSnippets();
-  const loaderData = useLoaderData();
+  const params = useParams();
 
   useEffect(() => {
     const loadSnippet = async () => {
-      if (snippetApi.hasViewSnippetParams(loaderData)) {
+      const snippetParams = {
+        login: params.login,
+        slug: params.slug,
+      };
+      if (snippetApi.hasViewSnippetParams(snippetParams)) {
         const snippetData = await snippetApi.getSnippetDataByViewParams(
-          loaderData,
+          snippetParams,
         );
         dispatch(actions.updateCode(snippetData.code));
       }
@@ -32,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/App.test.jsx

@@ -4,6 +4,6 @@ import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/hexlet/i);
   expect(linkElement).toBeInTheDocument();
 });

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function NotFound() {
+  const { t } = useTranslation();
+
+  return <div>{t('appRotes.pageNotFound')}</div>;
+}
+
+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,27 +1,36 @@
 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();
   const auth = useAuth();
   const snippetsApi = useSnippets();
   const { t } = useTranslation();
+  const params = useParams();
 
   useEffect(() => {
-    if (snippetsApi.hasViewSnippetParams()) {
-      const decodedId = snippetsApi.getSnippetIdFromParams();
-      setCurrentSnippetId(decodedId);
-    } else {
-      setCurrentSnippetId(false);
-    }
+    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);
+      }
+    };
+    getSnippetData();
   }, []);
 
   const getTypeOfModal = (isLoggedIn) => {
@@ -65,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,8 +23,10 @@ function SnippetsProvider({ children }) {
   };
 
   const getSnippetDataByViewParams = async ({ login, slug }) => {
-    const { data } = await axios.get(routes.userInfoPath(login));
-    return data.snippets.find((snippet) => snippet.slug === slug);
+    const { data } = await axios.get(
+      routes.getSnippetPathByLoginSlug(login, slug),
+    );
+    return data;
   };
 
   const saveSnippet = async (code, name) => {
@@ -51,7 +53,7 @@ function SnippetsProvider({ children }) {
     return url.searchParams.has('snippet');
   };
 
-  const hasViewSnippetParams = (urlData) => {
+  const hasViewSnippetParams = (urlData = {}) => {
     return urlData.login && urlData.slug;
   };
 
@@ -72,6 +74,7 @@ function SnippetsProvider({ children }) {
   };
 
   const genSnippetLink = (encodedId) => {
+    // TODO: переделать на получение ссылки вида /users/${login}/snippets/${slug}
     const url = new URL(routes.homePagePath(), window.location);
     url.searchParams.set('snippet', encodedId);
     return url.toString();

frontend/src/routes.js

@@ -13,6 +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('/'),
   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 },
     });