servers and apps selects in modal

src/components/modals/CreateSessionModal.tsx

@@ -1,13 +1,41 @@
-import { IServer } from "../../types/IServer.ts";
-import Button from "../Button.tsx";
-import Input from "../Input.tsx";
-import DisplayIcon from "../icons/DisplayIcon.tsx";
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { IServer } from '../../types/IServer.ts';
+import Button from '../Button.tsx';
+import DesktopSelect from '../DesktopSelect.tsx';
+import Input from '../Input.tsx';
+import DisplayIcon from '../icons/DisplayIcon.tsx';
+import Select from '../Select.tsx';
+import { useQueryClient } from '@tanstack/react-query';
+import { IUser } from '../../types/IUser.ts';
+import { IApp } from '../../types/IApp.ts';
 
 interface Props {
   servers: IServer[];
 }
 
 export default function CreateSessionModal({ servers }: Props) {
+  const queryClient = useQueryClient();
+
+  const user = queryClient.getQueryData<IUser>(['me']);
+
+  const [selectedServer, setSelectedServer] = useState<IServer | undefined>(
+    servers.find(
+      ({ sessions }) =>
+        !sessions || !sessions.length || sessions[0].status === 'ended'
+    )
+  );
+
+  const [selectedApp, setSelectedApp] = useState<IApp | undefined>(
+    user?.company.apps.filter((app) => app.serverId === selectedServer?.id)[0]
+  );
+
+  useEffect(() => {
+    setSelectedApp(
+      user?.company.apps.filter((app) => app.serverId === selectedServer?.id)[0]
+    );
+  }, [selectedServer, user?.company.apps]);
+
   return (
     <div className="w-[34.375vw] rounded-[0.833vw] bg-white p-[1.667vw] flex flex-col min-h-[calc(100dvh-0.972vw*2)] justify-between gap-[1.111vw]">
       <div className="gap-y-[1.111vw] flex flex-col justify-between">
@@ -45,13 +73,48 @@ export default function CreateSessionModal({ servers }: Props) {
             <Input placeholder="sample@mail.ru" type="email" />
           </div>
         </div>
+        <div className="flex flex-col gap-y-[0.556vw]">
+          <div className="flex justify-between items-center">
+            <p className="text-[0.972vw]">Стол</p>
+            {selectedServer && (
+              <DesktopSelect
+                servers={servers}
+                value={selectedServer}
+                onChange={setSelectedServer}
+              />
+            )}
+          </div>
+          <p className="text-[0.694vw] text-black/30 w-[13.889vw] leading-[115%] self-end">
+            При запуске нового сеанса текущий будет завершен принудительно.
+          </p>
+        </div>
+        {user && selectedServer && (
+          <div className="flex justify-between items-center">
+            <p className="text-[0.972vw]">Проекты</p>
+            <div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
+              {selectedApp && (
+                <Select
+                  options={user.company.apps
+                    .filter((app) => app.serverId === selectedServer.id)
+                    .map((app) => app.name)}
+                  value={selectedApp?.name}
+                  onChange={(option) =>
+                    setSelectedApp(
+                      user.company.apps.find((app) => app.name === option)
+                    )
+                  }
+                />
+              )}
+            </div>
+          </div>
+        )}
         <hr className="border-black/10" />
       </div>
       <div className="flex justify-between">
         <Button className="bg-[#F9F9F9] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
           <p className="text-black font-medium text-[0.972vw]">Отменить</p>
         </Button>
-        <Button className="bg-[#2D68F6] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
+        <Button className="bg-[#EF3C26] px-[2.222vw] py-[0.556vw] !rounded-[0.556vw]">
           <p className="text-[0.972vw] font-medium">Запустить сеанс</p>
         </Button>
       </div>