restart session logic

src/components/ModalContainer.tsx

@@ -45,7 +45,7 @@ function ModalContainer() {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className='h-full'
+          className="h-full"
         >
           <div
             ref={popoverRef}
@@ -55,27 +55,28 @@ function ModalContainer() {
               position === "right" && "items-end"
             )}
           >
-            <div className='max-h-full'>
-              <div ref={divRef} className='p-[0.972vw]'>
+            <div className="max-h-full">
+              <div ref={divRef} className="p-[0.972vw]">
                 <div
                   ref={backdropRef}
-                  className='absolute inset-0 cursor-pointer'
+                  className="absolute inset-0 cursor-pointer"
                   onClick={() => setModal(null)}
                 />
                 <div
                   ref={containerRef}
-                  className='relative w-full'
+                  className="relative w-full"
                   // style={{
                   //   height: `calc(${backdropRef.current?.clientHeight}px - 0.972vw * 2)`,
                   // }}
                 >
                   {modal}
                   <NewButton
-                    variant='secondary'
-                    className='absolute top-[1.389vw] right-[1.389vw] p-[0.556vw]'
+                    size="small"
+                    variant="secondary"
+                    className="absolute top-[1.389vw] right-[1.389vw] p-[0.556vw]"
                     onClick={() => setModal(null)}
                   >
-                    <span className='w-[0.972vw] h-[0.972vw] text-[#7D7D7D]'>
+                    <span className="w-[0.972vw] h-[0.972vw] text-[#7D7D7D]">
                       <CloseIcon />
                     </span>
                   </NewButton>

src/components/NewInput.tsx

@@ -13,11 +13,11 @@ function NewInput({
   ...props
 }: NewInputProps) {
   return (
-    <div className='relative'>
-      <div className='relative'>
+    <div className="relative">
+      <div className="relative">
         <input
           {...props}
-          placeholder=''
+          placeholder=""
           className={clsx(
             isError
               ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
@@ -27,15 +27,15 @@ function NewInput({
         />
         {placeholder && (
           <span
-            className='absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 
+            className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 
               peer-focus:caption-xs peer-focus:font-medium peer-focus:top-[0.556vw] peer-focus:translate-y-0
-              peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:font-medium peer-[:not(:placeholder-shown)]:top-[0.278vw] peer-[:not(:placeholder-shown)]:translate-y-0'
+              peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:font-medium peer-[:not(:placeholder-shown)]:top-[0.278vw] peer-[:not(:placeholder-shown)]:translate-y-0"
           >
             {placeholder}
           </span>
         )}
         {isError && (
-          <p className='caption-s font-medium text-[#FF4517] mt-[0.556vw]'>
+          <p className="caption-s font-medium text-[#FF4517] mt-[0.556vw]">
             {errorMessage}
           </p>
         )}

src/components/TableSelector.tsx

@@ -24,13 +24,15 @@ function TableSelector({
             onSelect(table);
           }}
           className={clsx(
-            "rounded-[0.833vw] outline-none p-[1.111vw] space-y-[0.278vw] disabled:text-[#D6D6D6] disabled:cursor-not-allowed enabled:cursor-pointer enabled:hover:bg-[#F0F0F0] transition-colors shrink-0",
+            "rounded-[0.833vw] outline-none p-[1.111vw] space-y-[0.278vw] disabled:text-[#D6D6D6] enabled:cursor-pointer disabled:!cursor-not-allowed enabled:hover:bg-[#F0F0F0] transition-colors shrink-0",
             selectedTable?.id === table.id && "bg-[#F6F6F6]"
           )}
         >
-          <p className="button-m font-medium">{table.name}</p>
+          <p className="button-m font-medium text-left">{table.name}</p>
           {table.status === "offline" ? (
-            <p className="text-[#D6D6D6] font-medium caption-s">Недоступен</p>
+            <p className="text-[#D6D6D6] font-medium caption-s text-left">
+              Недоступен
+            </p>
           ) : table.sessions &&
             table.sessions.length > 0 &&
             table.sessions[0].status !== "ended" ? (

src/components/modals/CreateSessionModal.tsx

@@ -18,9 +18,9 @@ interface Props {
 
 export default function CreateSessionModal({ targetServerId }: Props) {
   const { setModal } = useModalStore();
-  const [name, setName] = useState("");
-  const [phone, setPhone] = useState("");
-  const [email, setEmail] = useState("");
+  const [name, setName] = useState<string | null>(null);
+  const [phone, setPhone] = useState<string | null>(null);
+  const [email, setEmail] = useState<string | null>(null);
   const [isSessionExists, setIsSessionExists] = useState(false);
 
   const queryClient = useQueryClient();
@@ -120,26 +120,54 @@ export default function CreateSessionModal({ targetServerId }: Props) {
     }
 
     endSession(undefined, {
-      onSuccess: () => {
-        createClient(undefined, {
-          onSuccess: (client) => {
-            createSession({
-              clientId: client.id,
-              serverId: selectedServer.id,
-              appId: selectedApp.id,
-            });
-          },
-          onError: (error) => {
-            console.log(error);
-          },
-        });
-      },
+      // onSuccess: () => {
+      //   createClient(undefined, {
+      //     onSuccess: (client) => {
+      //       createSession({
+      //         clientId: client.id,
+      //         serverId: selectedServer.id,
+      //         appId: selectedApp.id,
+      //       });
+      //     },
+      //     onError: (error) => {
+      //       console.log(error);
+      //     },
+      //   });
+      // },
       onError: (error) => {
         console.log("Ошибка при завершении сессии:", error);
       },
     });
   }
 
+  useEffect(() => {
+    console.log(servers, selectedServer, selectedApp, isSessionExists);
+    if (
+      selectedServer &&
+      servers?.find((server) => server.id === selectedServer?.id)?.sessions?.[0]
+        ?.status === "ended" &&
+      selectedApp &&
+      isSessionExists
+    ) {
+      createClient(undefined, {
+        onSuccess: (client) => {
+          createSession({
+            clientId: client.id,
+            serverId: selectedServer?.id,
+            appId: selectedApp.id,
+          });
+        },
+      });
+    }
+  }, [
+    selectedApp,
+    servers,
+    createClient,
+    createSession,
+    isSessionExists,
+    selectedServer,
+  ]);
+
   const ref = useRef<HTMLFormElement>(null);
 
   return (
@@ -162,20 +190,20 @@ export default function CreateSessionModal({ targetServerId }: Props) {
           <p className="title-s font-medium">Укажите данные клиента</p>
           <div className="flex flex-col gap-y-[0.556vw]">
             <NewInput
-              value={phone}
+              value={phone || ""}
               onChange={(e) => setPhone(e.target.value)}
               placeholder="Номер телефона"
               required
             />
             <NewInput
-              value={name}
+              value={name || ""}
               onChange={(e) => setName(e.target.value)}
               placeholder="Имя"
               required
             />
             <NewInput
               type="email"
-              value={email}
+              value={email || ""}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="Электронная почта"
             />

src/components/modals/CurrentSessionModal.tsx

@@ -103,7 +103,7 @@ function CurrentSessionModal({ session }: { session: ISession }) {
         </div>
         <div className="flex flex-col gap-[0.833vw]">
           <h2 className="title-s font-medium">Детали</h2>
-          <div>
+          <div className="flex flex-col gap-[0.556vw]">
             <div className="flex gap-[0.556vw]">
               <p className="caption-s font-medium text-[#BDBDBD]">Менеджер:</p>
               <p className="caption-s font-medium">{session.owner.fullname}</p>
@@ -118,6 +118,7 @@ function CurrentSessionModal({ session }: { session: ISession }) {
         </div>
         <div className="flex flex-col gap-[0.556vw]">
           <NewButton
+            size="large"
             variant="critical"
             className="w-full"
             onClick={() => {
@@ -128,6 +129,7 @@ function CurrentSessionModal({ session }: { session: ISession }) {
             Завершить сеанс
           </NewButton>
           <NewButton
+            size="large"
             variant="primary"
             className="w-full"
             onClick={() => setModal(null)}