upd

2023-10-16 12:23:31 +05:00
parent 826ac1f621
commit 4c83933741
8 changed files with 435 additions and 95 deletions
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Card from "../components/Card";
 import EmptyCard from "../components/EmptyCard";
 import TabButton from "../components/TabButton";
@@ -48,6 +48,7 @@ function DashboardPage() {
  );
  const [isLoadingScheduledSessions, setIsLoadingScheduledSessions] =
    useState(true);
+  const scheduledSessionsRef = useRef<HTMLDivElement>(null);

  // const [selectedDate, setSelectedDate] = useState(
  //   format(new Date(), "d MMMM, yyyy", { locale: ru })
@@ -73,7 +74,6 @@ function DashboardPage() {

    try {
      const result: any = await api.get(`companies/${user.companyId}`).json();
-      console.log("getCompany result: ", result);
      setCompany(result);
    } catch (error) {
      if (error instanceof Error) {
@@ -92,7 +92,6 @@ function DashboardPage() {
      const result: any = await api
        .get(`companies/${user.companyId}/builds`)
        .json();
-      console.log("getBuilds result: ", result);
      setBuilds(result);
    } catch (error) {
      if (error instanceof Error) {
@@ -109,7 +108,6 @@ function DashboardPage() {

    try {
      const result: any = await api.get(`companies/${company.id}/users`).json();
-      console.log("getManagers result: ", result);
      setManagers(result);
    } catch (error) {
      if (error instanceof Error) {
@@ -118,20 +116,18 @@ function DashboardPage() {
    }
  }

-  async function getScheduledSessions() {
+  async function getScheduledSessions(useLoader?: boolean) {
    if (!company) {
      console.log("No ScheduledSessions");
      return;
    }

-    console.log("selectedBuild", selectedBuild);
-
    if (!selectedBuild || !selectedBuild.id) {
      console.log("No selectedBuild");
      return;
    }

-    setIsLoadingScheduledSessions(true);
+    if (useLoader) setIsLoadingScheduledSessions(true);

    try {
      const result: any = await api
@@ -141,16 +137,15 @@ function DashboardPage() {
          }/scheduled_sessions?date=${selectedDate.toISOString()}`
        )
        .json();
-      console.log("getScheduledSessions result: ", result);

      setScheduledSessions(result);
-      setIsLoadingScheduledSessions(false);
    } catch (error) {
-      setIsLoadingScheduledSessions(false);
      if (error instanceof Error) {
        console.log("Error: ", error.message);
      }
    }
+
+    if (useLoader) setIsLoadingScheduledSessions(false);
  }

  function logout() {
@@ -185,6 +180,36 @@ function DashboardPage() {
    setGeneratedScheduledSessions(arr);
  }

+  async function updateScheduledSessionManager(
+    scheduledSessionId: string,
+    managerId: string
+  ) {
+    if (!company || !scheduledSessions) return;
+
+    try {
+      const result: any = await api
+        .put(
+          `companies/${company.id}/scheduled_sessions/${scheduledSessionId}`,
+          {
+            json: { userId: managerId },
+          }
+        )
+        .json();
+
+      console.log(scheduledSessions, result);
+
+      setScheduledSessions(
+        scheduledSessions.map((scheduledSession) =>
+          scheduledSession.id === result.id ? result : scheduledSession
+        )
+      );
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log("Error: ", error.message);
+      }
+    }
+  }
+
  useEffect(() => {
    getCompany();

@@ -210,18 +235,27 @@ function DashboardPage() {

  useEffect(() => {
    if (!managers || !selectedDate || !selectedBuild) return;
-    getScheduledSessions();
+    getScheduledSessions(true);

-    console.log(selectedBuild);
+    const interval = setInterval(() => {
+      getScheduledSessions();
+    }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    };
  }, [managers, selectedDate, selectedBuild]);

  useEffect(() => {
    if (!scheduledSessions) return;
    generateScheduledSessions();
-
-    console.log(scheduledSessions);
  }, [scheduledSessions]);

+  useEffect(() => {
+    // setIsLoadingScheduledSessions(true);
+    scheduledSessionsRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [selectedDate, selectedBuild]);
+
  return (
    <div className="main h-screen flex">
      <div className="left flex flex-col w-full">
@@ -282,6 +316,7 @@ function DashboardPage() {
        </div>

        <div
+          ref={scheduledSessionsRef}
          className={`overflow-y-auto overflow-x-hidden flex-1 bg-[#F2F2F2] border-r border-[#DAE0E5]`}
        >
          <Transition
@@ -299,43 +334,65 @@ function DashboardPage() {
            )}
          </Transition>

-          {!isLoadingScheduledSessions &&
+          {company &&
+            selectedBuild &&
+            user &&
+            managers?.length &&
            generatedScheduledSessions?.map(
-              (generatedScheduledSession, index) => (
-                <div key={index} className="flex">
-                  {generatedScheduledSession.map((scheduledSession, index2) => {
-                    if (index2 === 0) {
-                      return (
-                        <div
-                          key={index2}
-                          className="w-[84px] h-[128px] flex justify-center items-center text-sm font-semibold bg-[#F0F1F2] border-r border-b border-[#DAE0E5]"
-                        >
-                          {format(scheduledSession, "HH:mm")}
-                        </div>
-                      );
-                    } else {
-                      if (Object.keys(scheduledSession).length) {
-                        return (
-                          <Card
-                            key={index2}
-                            client={{
-                              name: scheduledSession.clientName,
-                              phone: scheduledSession.clientPhone,
-                              email: scheduledSession.clientEmail,
-                            }}
-                            manager={managers?.find(
-                              (manager) =>
-                                manager.id === scheduledSession.userId
-                            )}
-                          />
-                        );
-                      } else {
-                        return <EmptyCard key={index2} />;
+              (generatedScheduledSession, index) => {
+                return (
+                  <div key={index} className="flex">
+                    {generatedScheduledSession.map(
+                      (scheduledSession, index2) => {
+                        if (index2 === 0) {
+                          return (
+                            <div
+                              key={index2}
+                              className="w-[84px] h-[128px] flex justify-center items-center text-sm font-semibold bg-[#F0F1F2] border-r border-b border-[#DAE0E5]"
+                            >
+                              {format(scheduledSession, "HH:mm")}
+                            </div>
+                          );
+                        } else {
+                          if (Object.keys(scheduledSession).length) {
+                            const selectedManager = managers.find(
+                              (manager) => manager.id == scheduledSession.userId
+                            );
+
+                            return (
+                              <Card
+                                key={index2}
+                                companyId={company.id}
+                                buildId={selectedBuild.id}
+                                scheduledSessionId={scheduledSession.id}
+                                scheduleSessionStartAt={
+                                  scheduledSession.startAt
+                                }
+                                client={{
+                                  name: scheduledSession.clientName,
+                                  phone: scheduledSession.clientPhone,
+                                  email: scheduledSession.clientEmail,
+                                }}
+                                manager={selectedManager}
+                                managers={managers}
+                                // managers={managers}
+                                handleSelect={(scheduledSessionId, managerId) =>
+                                  updateScheduledSessionManager(
+                                    scheduledSessionId,
+                                    managerId
+                                  )
+                                }
+                              />
+                            );
+                          } else {
+                            return <EmptyCard key={index2} />;
+                          }
+                        }
                      }
-                    }
-                  })}
-                </div>
-              )
+                    )}
+                  </div>
+                );
+              }
            )}
        </div>
      </div>