Patch 0.5.4

Dockerfile

@@ -4,10 +4,12 @@ ENV VITE_API_URL="https://burrito.tres.cyberbydlo.com"
 
 WORKDIR /app
 COPY . /app
+RUN npm config delete proxy
 RUN npm install
 RUN npm run build
 
-FROM nginx:latest
-
 COPY --from=tres-build-base /app/dist /usr/share/nginx/html
-COPY ./etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+COPY ./etc/www/tres.png /usr/share/nginx/html/tres.png
+COPY ./etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+
+FROM nginx:latest

etc/nginx/conf.d/default.conf

@@ -4,9 +4,23 @@ server {
     server_name  localhost;
 
     location / {
+
+        if ( $args ~ "mode=2" ) {
+            rewrite ^ /tres.png break;
+        }
+        if ( $args ~ "mode=3" ) {
+            add_header Content-Type text/plain;
+            return 200 "Я дочекаюся лого від Саші";
+        }
+        if ( $args ~ "mode=100" ) {
+            add_header X-Cabinet-Support "13";
+            return 200 "OK";
+        }
+
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         try_files $uri /index.html;
+
     }
 
     error_page   500 502 503 504  /50x.html;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tres",
   "private": true,
-  "version": "0.4.4",
+  "version": "0.5.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -7,44 +7,20 @@ import { ColorModeContext } from "./theme";
 import { useMode } from "./theme/hooks";
 import "./App.css";
 
-import { useLocation } from "react-router-dom";
+import { AuthProvider } from "./context/AuthContext";
 
 const App = () => {
   const [theme, colorMode] = useMode();
 
-  // =========================================
-
-  let adminWord = "";
-  const { pathname } = useLocation();
-
-  if (pathname !== "/tickets/create") {
-    document.addEventListener("keydown", e => {
-      if (adminWord.length > 5) {
-        adminWord = "";
-      }
-
-      const keyPressed = e.key.toLowerCase();
-      adminWord += keyPressed;
-
-      if (adminWord === "admin") {
-        localStorage.setItem("is-admin", "admin");
-        adminWord = "";
-      } else if (adminWord === "exit") {
-        localStorage.removeItem("is-admin");
-        adminWord = "";
-      }
-    });
-  }
-
-  // =========================================
-
   return (
-    <ColorModeContext.Provider value={colorMode}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Router />
-      </ThemeProvider>
-    </ColorModeContext.Provider>
+    <AuthProvider>
+      <ColorModeContext.Provider value={colorMode}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Router />
+        </ThemeProvider>
+      </ColorModeContext.Provider>
+    </AuthProvider>
   );
 };
 

src/Pages/CreateTicketForm/CreateTicketForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, FC } from "react";
+import { useState, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 
@@ -12,28 +12,25 @@ import { TicketBodyTextField } from "./components/TicketBodyTextField";
 import { FormActions } from "./components/FormActions";
 import { TicketVisibilityOptions } from "./components/TicketVisibilityOptions";
 
-import { useGetProfileQuery } from "../../store/api/profile/profile.api";
 import { useCreateTicketMutation } from "../../store/api/tickets/tickets.api";
 import IPalette from "../../theme/IPalette.interface";
-import { useJwtDecode } from "../../shared/hooks";
+import { getUserFacultyId } from "../../shared/functions/getLocalStorageData";
 
 const CreateTicketForm: FC = () => {
   const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
-  const jwt = useJwtDecode();
-  const userId = jwt && jwt.user_id;
+
+  const facultyId = getUserFacultyId();
 
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [queue, setQueue] = useState<number | "none">("none");
 
-  const { data, isSuccess } = useGetProfileQuery({ userId: userId });
   const [createTicket] = useCreateTicketMutation();
 
   const {
     register,
     handleSubmit,
     setValue,
-    getValues,
     resetField,
     // formState: { errors },
   } = useForm<ICreateTicketRequestBody>();
@@ -52,10 +49,6 @@ const CreateTicketForm: FC = () => {
     }
   };
 
-  useEffect(() => {
-    isSuccess && setValue("faculty", data.faculty.faculty_id);
-  }, [isSuccess, data?.faculty, setValue]);
-
   return (
     <Grid container sx={{ pb: 3 }}>
       <Typography variant="h1" sx={{ pt: 3.5, pb: 3.5 }}>
@@ -74,7 +67,7 @@ const CreateTicketForm: FC = () => {
                 mb: 1,
               },
               "& > div > div > div > fieldset": {
-                border: `2px solid ${palette.grey.divider}`,
+                border: `3px solid ${palette.grey.divider}`,
               },
               "& > div > div > .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline":
                 {
@@ -83,14 +76,14 @@ const CreateTicketForm: FC = () => {
             }}
           >
             <QueueSelect
-              faculty={isSuccess ? data.faculty.faculty_id : null}
+              faculty={facultyId}
               register={register}
               setValue={setValue}
               queue={queue}
               setQueue={setQueue}
             />
             <TicketTitleInput register={register} />
-            <TicketBodyTextField register={register} getValues={getValues} />
+            <TicketBodyTextField register={register} />
             <TicketVisibilityOptions
               setValue={setValue}
               selectedOptions={selectedOptions}

src/Pages/CreateTicketForm/components/TicketBodyTextField/TicketBodyTextField.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState, useRef, MutableRefObject } from "react";
 import { useTranslation } from "react-i18next";
 import { UseFormRegister } from "react-hook-form";
 
@@ -7,23 +7,61 @@ import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import useTheme from "@mui/material/styles/useTheme";
 
+import { MarkdownWithStyles } from "../../../../utils/markdown";
+
 import IPalette from "../../../../theme/IPalette.interface";
+import { MarkdownControls } from "./components/MarkdownControls";
 
 interface TicketBodyTextFieldProps {
   register: UseFormRegister<ICreateTicketRequestBody>;
-  getValues: any;
 }
 
 const TicketBodyTextField: FC<TicketBodyTextFieldProps> = ({ register }) => {
   const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
 
+  const inputRef: MutableRefObject<null | HTMLInputElement> = useRef(null);
+
+  const [isPreview, setIsPreview] = useState(false);
+  const [formattedText, setFormattedText] = useState("");
+
   const placeholderText: string = t("createTicket.ticketBodyPlaceholder");
 
+  const handleShowPreview = () => {
+    setIsPreview(prevState => !prevState);
+  };
+
   return (
     <Box>
       <Typography variant="h3">{t("createTicket.ticketBody")}</Typography>
+      <Box
+        sx={{
+          display: isPreview ? "block" : "none",
+          overflow: "hidden",
+          overflowY: "auto",
+          scroll: "scroll",
+          width: "100%",
+          height: 312,
+          borderRadius: 1,
+          p: "12px 16px 12px",
+          bgcolor: palette.grey.card,
+          whiteSpace: "pre-line",
+          "&::-webkit-scrollbar": {
+            width: "4px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: palette.grey.divider,
+            borderRadius: "4px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: "#555",
+          },
+        }}
+      >
+        <MarkdownWithStyles innerText={formattedText} />
+      </Box>
       <TextField
+        inputRef={inputRef}
         id="ticket-body"
         placeholder={placeholderText}
         required
@@ -32,7 +70,13 @@ const TicketBodyTextField: FC<TicketBodyTextFieldProps> = ({ register }) => {
         variant="outlined"
         fullWidth
         {...register("body")}
+        value={formattedText}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          setFormattedText(event.target.value);
+        }}
         sx={{
+          display: isPreview ? "none" : "block",
+          overflow: "hidden",
           bgcolor: palette.grey.card,
           "& > .MuiOutlinedInput-root": {
             p: "0 0 24px",
@@ -52,7 +96,13 @@ const TicketBodyTextField: FC<TicketBodyTextFieldProps> = ({ register }) => {
           },
         }}
       />
-      {/* <MarkdownControls getValues={getValues} /> */}
+      <MarkdownControls
+        text={formattedText}
+        isPreview={isPreview}
+        setFormattedText={setFormattedText}
+        handleShowPreview={handleShowPreview}
+        input={inputRef.current}
+      />
     </Box>
   );
 };