upd

src/components/Button.tsx

@@ -27,7 +27,7 @@ function Button({
         onClick?.(e);
       }}
       className={clsx(
-        "transition-all flex outline-none 2xl:gap-[0.556vw] gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6] cursor-pointerdisabled:cursor-default",
+        "transition-all flex outline-none 2xl:gap-[0.556vw] gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6]",
         variant === "critical" &&
           "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
         variant === "secondary" &&

src/components/ProjectSelector.tsx

@@ -20,6 +20,10 @@ function ProjectSelector({
   setSelectedProject,
   activeProject,
 }: Props) {
+  useEffect(() => {
+    console.log(projects);
+  }, [projects]);
+
   const [isOpen, setIsOpen] = useState(false);
 
   const [pointedProject, setPointedProject] = useState<IApp | null>(null);

src/components/SearchInput.tsx

@@ -1,15 +1,14 @@
 import React, { useRef } from "react";
 import SearchIcon from "./icons/SearchIcon";
 import CloseIcon from "./icons/CloseIcon";
-import Button from "./Button";
 import clsx from "clsx";
 
 function SearchInput(
   props: React.InputHTMLAttributes<HTMLInputElement> & {
-    onEnter?: () => void;
     setSearch: React.Dispatch<React.SetStateAction<string | null>>;
   }
 ) {
+  // const [value, setValue] = useState();
   const ref = useRef<HTMLInputElement>(null);
 
   return (
@@ -26,9 +25,6 @@ function SearchInput(
           className="outline-none focus:outline-none placeholder:button-m placeholder:font-medium placeholder:text-[#7D7D7D] button-m font-medium flex-1"
           {...props}
           ref={ref}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") props.onEnter?.();
-          }}
         />
       </div>
       <div
@@ -40,31 +36,18 @@ function SearchInput(
         <button
           disabled={!props.value}
           className="outline-none cursor-pointer disabled:cursor-default"
-          // onClick={() => {
-          //   if (ref.current) {
-          //     ref.current.value = "";
-          //     ref.current.focus();
-          //   }
-          // }}
+          onClick={() => {
+            if (ref.current) {
+              ref.current.value = "";
+              ref.current.focus();
+              props.setSearch(ref.current.value);
+            }
+          }}
         >
-          <div
-            className="text-[#7D7D7D] size-[1.111vw]"
-            onClick={() => {
-              if (ref.current) {
-                ref.current.value = "";
-                ref.current.focus();
-                props.setSearch(ref.current.value);
-              }
-            }}
-          >
+          <div className="text-[#7D7D7D] size-[1.111vw]">
             <CloseIcon />
           </div>
         </button>
-        {/* {pr ops.onEnter && (
-          <Button size="small" disabled={!props.value} onClick={props.onEnter}>
-            Искать
-          </Button>
-        )} */}
       </div>
     </div>
   );

src/components/modals/CreateSessionModal.tsx

@@ -42,7 +42,9 @@ export default function CreateSessionModal({ targetServerId }: Props) {
 
   useEffect(() => {
     setSelectedApp(
-      selectedServer?.sessions?.[0]?.app || selectedServer?.apps?.[0] || null
+      selectedServer?.sessions?.[0]?.app ||
+        selectedServer?.apps?.[0].app ||
+        null
     );
   }, [selectedServer]);
 
@@ -204,7 +206,7 @@ export default function CreateSessionModal({ targetServerId }: Props) {
                     ? selectedApp
                     : null
                 }
-                projects={selectedServer?.apps}
+                projects={selectedServer?.apps.map(({ app }) => app)}
                 selectedProject={selectedApp}
                 setSelectedProject={setSelectedApp}
               />

src/pages/SessionsPage.tsx

@@ -13,6 +13,7 @@ import MultySelect from "../components/MultySelect";
 import Button from "../components/Button";
 import SearchInput from "../components/SearchInput";
 import CloseIcon from "../components/icons/CloseIcon";
+import SpinIcon from "../components/icons/SpinIcon";
 
 function SessionsPage() {
   const [limit, setLimit] = useState(10);
@@ -39,7 +40,7 @@ function SessionsPage() {
     enabled: !!me,
   });
 
-  const { data: grouppedSessions } = useQuery({
+  const { data: grouppedSessions, isLoading } = useQuery({
     queryKey: ["sessions", managerIds, appIds, debouncedSearch, limit],
     queryFn: () =>
       api
@@ -86,7 +87,6 @@ function SessionsPage() {
               placeholder="Поиск по имени клиента"
               value={search || ""}
               onChange={(e) => setSearch(e.target.value)}
-              onEnter={() => {}}
               setSearch={setSearch}
             />
             <div className="flex gap-[0.556vw]">
@@ -127,7 +127,11 @@ function SessionsPage() {
         </div>
       </div>
       <div className="space-y-[1.667vw]">
-        {grouppedSessions?.length ? (
+        {isLoading ? (
+          <div className="size-[2.222vw] m-auto text-[#7B60F3] animate-spin">
+            <SpinIcon />
+          </div>
+        ) : grouppedSessions?.length ? (
           grouppedSessions?.map(([timestamp, sessions]) => (
             <div key={timestamp} className="space-y-[0.833vw]">
               <p className="caption-m font-medium opacity-40">
@@ -159,9 +163,7 @@ function SessionsPage() {
           size="large"
           variant="primary"
           className="w-full"
-          onClick={() => {
-            setLimit((prev) => prev + 10);
-          }}
+          onClick={() => setLimit((prev) => prev + 10)}
           disabled={!!count && limit >= count}
         >
           Показать еще

src/types/Server.ts

@@ -8,7 +8,7 @@ export interface Server {
   description: string;
   companyId: string;
   sessions?: Session[];
-  apps?: App[];
+  apps?: { app: App }[];
   status: "online" | "offline";
   ipAddress: string;
 }