feat 215: Comments section

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
         'plugin:react-hooks/recommended',
     ],
     rules: {
+        '@typescript-eslint/quotes': 'off',
         'jsx-a11y/click-events-have-key-events': 'off',
         'jsx-a11y/no-noninteractive-element-interactions': 'off',
         'jsx-a11y/no-static-element-interactions': 'off',
@@ -30,7 +31,6 @@ module.exports = {
         'import/no-cycle': 'off',
         'react/jsx-indent': 'off',
         'no-nested-ternary': 'off',
-        '@typescript-eslint/indent': 'off',
         'consistent-return': 'off',
         'react/react-in-jsx-scope': 'off',
         'react/require-default-props': 'off',

.github/workflows/azure-static-web-apps-agreeable-ground-01c3b230f.yml

@@ -4,12 +4,12 @@ on:
   push:
     branches:
       - main
-      - dev
+      # - dev
   pull_request:
     types: [opened, synchronize, reopened, closed]
     branches:
       - main 
-      - dev
+      # - dev 
 
 jobs:
   build_and_deploy_job:

.gitignore

@@ -28,3 +28,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+.vs/

package.json

@@ -15,11 +15,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@tinymce/tinymce-react": "^4.3.0",
+    "@tinymce/tinymce-react": "^6.3.0",
     "@types/googlemaps": "^3.43.3",
     "@types/jest": "^27.5.2",
     "@types/maplibre-gl": "^1.14.0",
-    "@types/node": "^16.18.9",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "antd": "^5.21.2",
@@ -28,6 +27,7 @@
     "date-fns": "^2.29.3",
     "dayjs": "^1.11.7",
     "dnd-core": "^16.0.1",
+    "dompurify": "^3.4.6",
     "dotenv": "^16.1.4",
     "dotenv-webpack": "^8.0.1",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -69,10 +69,9 @@
     "react-toastify": "^9.1.1",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.6",
-    "svg-react-loader": "^0.4.6",
     "svg-url-loader": "^8.0.0",
-    "swiper": "^8.4.6",
-    "tinymce": "^6.4.0",
+    "swiper": "^12.1.4",
+    "tinymce": "^8.5.0",
     "typescript": "^4.9.4",
     "yet-another-react-lightbox": "^2.2.7"
   },
@@ -111,6 +110,7 @@
     "@babel/core": "^7.21.3",
     "@svgr/webpack": "^6.5.1",
     "@types/leaflet": "^1.9.0",
+    "@types/node": "^16.18.9",
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-slick": "^0.23.10",
@@ -122,14 +122,26 @@
     "eslint-config-airbnb": "^19.0.4",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
-    "lint-staged": "^13.1.0",
-    "sass": "^1.57.1",
-    "sass-loader": "^13.2.0",
+    "lint-staged": "^17.0.5",
+    "sass": "^1.99.0",
+    "sass-loader": "^16.0.8",
     "ts-loader": "^9.4.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^5.2.4"
+  },
+  "overrides": {
+    "tangram": {
+      "js-yaml": "^3.14.2",
+      "jszip": "^3.10.1"
+    },
+    "nth-check": "^2.1.1",
+    "postcss": "^8.4.38",
+    "react-scripts": {
+      "webpack-dev-server": "^5.2.4",
+      "serialize-javascript": "^6.0.2"
+    }
   },
   "description": "<a href=\"https://softserve.academy/\">   <img src=\"https://raw.githubusercontent.com/ita-social-projects/StreetCode/master/StreerCodeLogo.jpg\"    title=\"SoftServe IT Academy\"    alt=\"SoftServe IT Academy\"> </a>",
   "main": ".eslintrc.js",

src/app/api/agent.api.ts

@@ -1,13 +1,31 @@
-import { redirect } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { ReasonPhrases, StatusCodes } from 'http-status-codes';
 
 import FRONTEND_ROUTES from '../common/constants/frontend-routes.constants';
 import UserLoginStore from '../stores/user-login-store';
 
-axios.defaults.baseURL = process.env.NODE_ENV === 'development'
-    ? 'https://localhost:5001/api' : 'https://app-streetcode-webapi-eu-prop-001-gsbqfwc2fdh6hhaw.polandcentral-01.azurewebsites.net/api';
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+axios.defaults.baseURL = isDevelopment
+    ? 'https://localhost:5001/api'
+    : 'https://app-streetcode-webapi-eu-prop-001-gsbqfwc2fdh6hhaw.polandcentral-01.azurewebsites.net/api';
+
+const getErrorMessage = (data: unknown): string | undefined => {
+    if (Array.isArray(data)) {
+        return data[0]?.message;
+    }
+
+    if (
+        typeof data === 'object'
+        && data !== null
+        && 'message' in data
+    ) {
+        return String(data['message']);
+    }
+
+    return undefined;
+};
 
 axios.interceptors.response.use(
     async (response) => response,
@@ -22,13 +40,14 @@ axios.interceptors.response.use(
             break;
         case StatusCodes.UNAUTHORIZED:
             errorMessage = ReasonPhrases.UNAUTHORIZED;
-            redirect(FRONTEND_ROUTES.ADMIN.LOGIN);
+            UserLoginStore.clearUserData();
+            globalThis.location.href = FRONTEND_ROUTES.ADMIN.LOGIN;
             break;
         case StatusCodes.NOT_FOUND:
             errorMessage = ReasonPhrases.NOT_FOUND;
             break;
-        case StatusCodes.BAD_REQUEST:
-            errorMessage = ReasonPhrases.BAD_REQUEST;
+        case StatusCodes.BAD_REQUEST:            
+            errorMessage = getErrorMessage(response?.data) || ReasonPhrases.BAD_REQUEST;
             break;
         case StatusCodes.FORBIDDEN:
             errorMessage = ReasonPhrases.FORBIDDEN;
@@ -40,7 +59,7 @@ axios.interceptors.response.use(
             toast.error(errorMessage);
         }
 
-        return Promise.reject(message);
+        return Promise.reject(response?.data || message);
     },
 );
 

src/app/api/media/videos.api.ts

@@ -1,3 +1,4 @@
+import { VideoCreateDto } from '@/models/media/video.model';
 import Agent from '@api/agent.api';
 import { API_ROUTES } from '@constants/api-routes.constants';
 import Video from '@models/media/video.model';
@@ -11,7 +12,7 @@ const VideosApi = {
         `${API_ROUTES.VIDEOS.GET_BY_STREETCODE_ID}/${streetcodeId}`,
     ),
 
-    create: (video: Video) => Agent.post<Video>(`${API_ROUTES.VIDEOS.CREATE}`, video),
+    create: (video: VideoCreateDto) => Agent.post<Video>(`${API_ROUTES.VIDEOS.CREATE}`, video),
 
     update: (video: Video) => Agent.post<Video>(`${API_ROUTES.VIDEOS.UPDATE}`, video),
 

src/app/api/streetcode/streetcodes.api.ts

@@ -56,6 +56,12 @@ const StreetcodesApi = {
     existWithIndex: (index:number) => Agent.get<boolean>(`${API_ROUTES.STREETCODES.EXIST_WITH_INDEX}/${index}`),
 
     existWithUrl: (url: string) => Agent.get<boolean>(`${API_ROUTES.STREETCODES.EXIST_WITH_URL}/${url}`),
+
+    create: (streetcode: Streetcode) => Agent.post<Streetcode>(`${API_ROUTES.STREETCODES.CREATE}`, streetcode),
+
+    update: (streetcode: Streetcode) => Agent.put<Streetcode>(`${API_ROUTES.STREETCODES.UPDATE}`, streetcode),
+
+    getAll: () => Agent.get<Streetcode[]>(`${API_ROUTES.STREETCODES.GET_ALL}`),
 };
 
 export default StreetcodesApi;

src/app/api/streetcode/text-content/related-terms.api.ts

@@ -1,19 +1,20 @@
 import Agent from '@api/agent.api';
 import { API_ROUTES } from '@constants/api-routes.constants';
 
-import { RelatedTerm } from '@/models/streetcode/text-contents.model';
+import { CreateRelatedTerm, RelatedTerm } from '@/models/streetcode/text-contents.model';
 
 const RelatedTermApi = {
     getAllByTermId: (id: number) => Agent.get<RelatedTerm[]>(`${API_ROUTES.RELATED_TERMS.GET_ALL_BY_TERM_ID}/${id}`),
 
-    create: (relatedTerm: RelatedTerm) => Agent.post<RelatedTerm>(`${API_ROUTES.RELATED_TERMS.CREATE}`, relatedTerm),
+    create: (relatedTerm: CreateRelatedTerm) => Agent.post<RelatedTerm>(`${API_ROUTES.RELATED_TERMS.CREATE}`, relatedTerm),
 
     update: (id: number, relatedTerm: RelatedTerm) => Agent.put<RelatedTerm>(
         `${API_ROUTES.RELATED_TERMS.UPDATE}/${id}`,
         relatedTerm,
     ),
 
-    delete: (word: string) => Agent.delete<RelatedTerm>(`${API_ROUTES.RELATED_TERMS.DELETE}/${word}`),
+    delete: (word: string, termId: number) => 
+    Agent.delete(`${API_ROUTES.RELATED_TERMS.DELETE}/${word}/${termId}`)
 };
 
 export default RelatedTermApi;

src/app/api/streetcode/text-content/terms.api.ts

@@ -1,13 +1,13 @@
 import Agent from '@api/agent.api';
 import { API_ROUTES } from '@constants/api-routes.constants';
-import { Term } from '@models/streetcode/text-contents.model';
+import { Term, TermCreate } from '@models/streetcode/text-contents.model';
 
 const TermsApi = {
     getById: (id: number) => Agent.get<Term>(`${API_ROUTES.TERMS.GET}/${id}`),
 
     getAll: () => Agent.get<Term[]>(`${API_ROUTES.TERMS.GET_ALL}`),
 
-    create: (term: Term) => Agent.post<Term>(`${API_ROUTES.TERMS.CREATE}`, term),
+    create: (term: TermCreate) => Agent.post<Term>(`${API_ROUTES.TERMS.CREATE}`, term),
 
     update: (term: Term) => Agent.put<Term>(`${API_ROUTES.TERMS.UPDATE}`, term),
 

src/app/api/streetcode/text-content/texts.api.ts

@@ -1,3 +1,4 @@
+import { TextCreateUpdate } from '@/models/streetcode/text-contents.model';
 import Agent from '@api/agent.api';
 import { API_ROUTES } from '@constants/api-routes.constants';
 import { Text } from '@models/streetcode/text-contents.model';
@@ -11,7 +12,7 @@ const TextsApi = {
         `${API_ROUTES.TEXTS.GET_BY_STREETCODE_ID}/${streetcodeId}`,
     ),
 
-    create: (text: Text) => Agent.post<Text>(`${API_ROUTES.TEXTS.CREATE}`, text),
+    create: (text: TextCreateUpdate) => Agent.post<Text>(`${API_ROUTES.TEXTS.CREATE}`, text),
 
     update: (text: Text) => Agent.put<Text>(`${API_ROUTES.TEXTS.UPDATE}`, text),
 

src/app/api/user/user.api.ts

@@ -6,9 +6,29 @@ import {
     UserLoginRequest, UserLoginResponce,
 } from '@/models/user/user.model';
 
-const UserApi = {
-    login: (loginParams:UserLoginRequest) => Agent.post<UserLoginResponce>(API_ROUTES.USERS.LOGIN, loginParams),
-    refreshToken: (token:RefreshTokenRequest) => Agent
-        .post<RefreshTokenResponce>(API_ROUTES.USERS.REFRESH_TOKEN, token),
-};
+    const UserApi = {
+        login: (loginParams: UserLoginRequest) =>
+            Agent.post<UserLoginResponce>(
+                API_ROUTES.USERS.LOGIN,
+                loginParams,
+            ),
+
+        refreshToken: (token: RefreshTokenRequest) =>
+            Agent.post<RefreshTokenResponce>(
+                API_ROUTES.USERS.REFRESH_TOKEN,
+                token,
+            ),
+
+        adminLogin: (loginParams: UserLoginRequest) =>
+            Agent.post<UserLoginResponce>(
+                API_ROUTES.ADMIN_AUTHORIZATION.LOGIN,
+                loginParams,
+            ),
+
+        adminRefreshToken: (token: RefreshTokenRequest) =>
+            Agent.post<RefreshTokenResponce>(
+                API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN,
+                token,
+            ),
+    };
 export default UserApi;

src/app/common/components/RequireAuth/RequireAuth.component.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import FRONTEND_ROUTES from '@constants/frontend-routes.constants';
+import UserLoginStore from '@stores/user-login-store';
+
+const RequireAuth = () => {
+    if (!UserLoginStore.isLoggedIn) {
+        return <Navigate to={FRONTEND_ROUTES.ADMIN.LOGIN} replace />;
+    }
+
+    return <Outlet />;
+};
+
+export default RequireAuth;

src/app/common/components/SortIcon.component.tsx

@@ -0,0 +1,29 @@
+// Виносимо за межі Dictionary!
+const CustomSortIcon = ({ sortOrder }: { sortOrder?: "ascend" | "descend" | null }) => {
+  const color = "#1D1F23";
+
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 7.25L12.5 7.25L6.5 0.5L0.5 7.25Z"
+        fill={sortOrder === "ascend" ? color : "transparent"}
+        stroke={color}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.5 10.75L12.5 10.75L6.5 17.5L0.5 10.75Z"
+        fill={sortOrder === "descend" ? color : "transparent"}
+        stroke={color}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CustomSortIcon;

src/app/common/components/StrictModeDroppable.tsx

@@ -7,7 +7,6 @@ const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
         const animation = requestAnimationFrame(() => setEnabled(true));
         return () => {
             cancelAnimationFrame(animation);
-            setEnabled(false);
         };
     }, []);
     if (!enabled) {

src/app/common/components/modals/ConfirmationModal/ConfirmationModal.component.tsx

@@ -10,16 +10,19 @@ const ConfirmationModal = () => {
         <Modal
             title="Підтведження"
             open={confirmation.isOpen}
-            onOk={() => {
-                if (confirmation.confirmationProps?.onSubmit) {
-                    confirmation.confirmationProps.onSubmit();
+            onOk={async () => {
+                try {
+                    await confirmation.confirmationProps?.onSubmit?.();
+                } finally {
+                    setConfirmationModal('confirmation', undefined, undefined, false);
                 }
             }}
             onCancel={() => {
                 if (confirmation.confirmationProps?.onCancel) {
-                    confirmation.confirmationProps?.onCancel();
+                    confirmation.confirmationProps.onCancel();
+                } else {
+                    setConfirmationModal('confirmation', undefined, undefined, false);
                 }
-                setConfirmationModal('confirmation');
             }}
         >
             {(confirmation.confirmationProps?.text)