add ability to hide full or locked tables (#1706)

* added hide locked tables for JazzBar template

* hide not free tables on Jazz bar

* created TableControlBar component; updated its usage

* Update ConversationSpace.tsx

* updated styles for TablesControlBar

* Update TablesControlBar.tsx

* fixed comments; updated props

* Update TablesControlBar.tsx

* updated TablesControlBar with Checkbox component

* updated tables when defaultTables are changed

* Update TablesControlBar.scss

* fixed changes from staging

* Update ConversationSpace.tsx

* added useTables hook; fixed its usage; updated TablesControlBar

* Update useTables.ts

* Update useTables.ts

* updated useTables hook; fixed its usage

* updated useAvailableTables hook; fixed its usage

* removed unused hook; updated TablesUserList usage

* Update TablesUserList.tsx

* Update TablesUserList.tsx

* Update TablesUserList.tsx

* fixed vars naming; updated tablesUserList usage

* Update TablesUserList.tsx

* Update TablesUserList.tsx

* Update TablesUserList.tsx

src/components/molecules/TablesControlBar/TablesControlBar.scss

@@ -0,0 +1,12 @@
+@import "scss/constants.scss";
+
+$control-bar-height: 40px;
+
+.TablesControlBar {
+  height: $control-bar-height;
+  margin-top: $spacing--md;
+
+  &__checkbox {
+    justify-content: start;
+  }
+}

src/components/molecules/TablesControlBar/TablesControlBar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import classNames from "classnames";
+
+import { Checkbox } from "components/atoms/Checkbox";
+
+import "./TablesControlBar.scss";
+
+export interface TablesControlBarProps {
+  showOnlyAvailableTables: boolean;
+  onToggleAvailableTables: () => void;
+  containerClassName?: string;
+}
+
+export const TablesControlBar: React.FC<TablesControlBarProps> = ({
+  showOnlyAvailableTables,
+  onToggleAvailableTables,
+  containerClassName,
+}) => {
+  const containerClasses = classNames("TablesControlBar", containerClassName);
+
+  return (
+    <div className={containerClasses}>
+      <Checkbox
+        checked={showOnlyAvailableTables}
+        onChange={onToggleAvailableTables}
+        label="Hide full/locked tables"
+        containerClassName="TablesControlBar__checkbox"
+      />
+    </div>
+  );
+};

src/components/molecules/TablesControlBar/index.ts

@@ -0,0 +1 @@
+export { TablesControlBar } from "./TablesControlBar";

src/components/molecules/TablesUserList/TablesUserList.tsx

@@ -15,6 +15,7 @@ import { User } from "types/User";
 import { experienceSelector } from "utils/selectors";
 import { isTruthy } from "utils/types";
 import { getUserExperience } from "utils/user";
+import { WithId } from "utils/id";
 
 import { useSelector } from "hooks/useSelector";
 import { useShowHide } from "hooks/useShowHide";
@@ -60,7 +61,8 @@ export interface TablesUserListProps {
   venueName: string;
   setSeatedAtTable: (value: string) => void;
   seatedAtTable: string;
-  customTables?: Table[];
+  customTables: Table[];
+  showOnlyAvailableTables?: boolean;
   TableComponent: React.FC<TableComponentPropsType>;
   joinMessage: boolean;
   leaveText?: string;
@@ -71,6 +73,7 @@ export const TablesUserList: React.FC<TablesUserListProps> = ({
   setSeatedAtTable,
   seatedAtTable,
   customTables,
+  showOnlyAvailableTables = false,
   TableComponent,
   joinMessage,
 }) => {
@@ -130,19 +133,41 @@ export const TablesUserList: React.FC<TablesUserListProps> = ({
     [recentVenueUsers, user, venueName, videoRoom]
   );
 
-  const tableLocked = useCallback(
-    (table: string) => {
-      const areUsersAtTable = recentVenueUsers.some(
-        (user: User) => getUserExperience(venueName)(user)?.table === table
-      );
+  const usersAtTableReducer = useCallback(
+    (obj: Record<string, WithId<User>[]>, table: Table) => ({
+      ...obj,
+      [table.reference]: recentVenueUsers.filter(
+        (user: User) =>
+          getUserExperience(venueName)(user)?.table === table.reference
+      ),
+    }),
+    [recentVenueUsers, venueName]
+  );
+
+  const usersSeatedAtTables = useMemo(
+    () => tables.reduce(usersAtTableReducer, {}),
+    [tables, usersAtTableReducer]
+  );
 
+  const isFullTable = useCallback(
+    (table: Table) => {
+      const numberOfSeatsLeft =
+        table.capacity &&
+        table.capacity - usersSeatedAtTables[table.reference].length;
+      return numberOfSeatsLeft === 0;
+    },
+    [usersSeatedAtTables]
+  );
+
+  const tableLocked = useCallback(
+    (tableReference: string) => {
       // Empty tables are never locked
-      if (!areUsersAtTable) return false;
+      if (!usersSeatedAtTables[tableReference].length) return false;
 
       // Locked state is in the experience record
-      return isTruthy(experience?.tables?.[table]?.locked);
+      return isTruthy(experience?.tables?.[tableReference]?.locked);
     },
-    [experience?.tables, recentVenueUsers, venueName]
+    [experience?.tables, usersSeatedAtTables]
   );
 
   const onAcceptJoinMessage = useCallback(
@@ -175,14 +200,8 @@ export const TablesUserList: React.FC<TablesUserListProps> = ({
 
   const emptyTables = useMemo(
     () =>
-      tables.filter(
-        (table) =>
-          !recentVenueUsers.some(
-            (user: User) =>
-              getUserExperience(venueName)(user)?.table === table.reference
-          )
-      ),
-    [recentVenueUsers, tables, venueName]
+      tables.filter((table) => !usersSeatedAtTables[table.reference].length),
+    [tables, usersSeatedAtTables]
   );
 
   const canStartTable =
@@ -191,9 +210,16 @@ export const TablesUserList: React.FC<TablesUserListProps> = ({
   const renderedTables = useMemo(() => {
     if (isSeatedAtTable) return;
 
-    return tables.map((table: Table, index: number) => (
+    const tablesToShow = showOnlyAvailableTables
+      ? tables.filter(
+          (table) => !(isFullTable(table) || tableLocked(table.reference))
+        )
+      : tables;
+
+    return tablesToShow.map((table: Table, index: number) => (
       <TableComponent
         key={table.reference}
+        // @debt provide usersAtTables instead of (experienceName + users) for better perfomance
         experienceName={venueName}
         users={recentVenueUsers}
         table={table}
@@ -210,6 +236,8 @@ export const TablesUserList: React.FC<TablesUserListProps> = ({
     recentVenueUsers,
     tableLocked,
     tables,
+    showOnlyAvailableTables,
+    isFullTable,
     venueName,
   ]);
 

src/components/templates/ConversationSpace/ConversationSpace.scss

@@ -253,6 +253,12 @@
     margin: 10px 70px;
   }
 
+  .ControlBar__container {
+    margin: $spacing--md 40px 0 auto;
+    padding-right: 40px;
+    width: max-content;
+  }
+
   .seated-area {
     border: 0px solid white;
     display: flex;

src/components/templates/ConversationSpace/ConversationSpace.tsx

@@ -9,6 +9,7 @@ import { WithId } from "utils/id";
 
 import { useRecentVenueUsers } from "hooks/users";
 import { useExperiences } from "hooks/useExperiences";
+import { useShowHide } from "hooks/useShowHide";
 import { useRelatedVenues } from "hooks/useRelatedVenues";
 
 import { InformationLeftColumn } from "components/organisms/InformationLeftColumn";
@@ -20,6 +21,7 @@ import TableComponent from "components/molecules/TableComponent";
 import TableHeader from "components/molecules/TableHeader";
 import { UserList } from "components/molecules/UserList";
 import { TablesUserList } from "components/molecules/TablesUserList";
+import { TablesControlBar } from "components/molecules/TablesControlBar";
 
 import { BackButton } from "components/atoms/BackButton";
 
@@ -40,6 +42,11 @@ export const ConversationSpace: React.FC<ConversationSpaceProps> = ({
 
   const { recentVenueUsers } = useRecentVenueUsers({ venueName: venue?.name });
 
+  const {
+    isShown: showOnlyAvailableTables,
+    toggle: toggleTablesVisibility,
+  } = useShowHide();
+
   const [seatedAtTable, setSeatedAtTable] = useState("");
 
   useExperiences(venue?.name);
@@ -113,6 +120,13 @@ export const ConversationSpace: React.FC<ConversationSpaceProps> = ({
                   />
                 </div>
               )}
+              {!seatedAtTable && (
+                <TablesControlBar
+                  containerClassName="ControlBar__container"
+                  onToggleAvailableTables={toggleTablesVisibility}
+                  showOnlyAvailableTables={showOnlyAvailableTables}
+                />
+              )}
             </div>
           </div>
           <div className="seated-area">
@@ -123,6 +137,7 @@ export const ConversationSpace: React.FC<ConversationSpaceProps> = ({
               TableComponent={TableComponent}
               joinMessage={venue.hideVideo === false}
               customTables={tables}
+              showOnlyAvailableTables={showOnlyAvailableTables}
             />
           </div>
           <UserList

src/components/templates/Jazzbar/JazzTab/JazzTab.scss

@@ -97,6 +97,10 @@
         }
       }
     }
+
+    .ControlBar__container {
+      width: 100%;
+    }
   }
 
   &--tableview {

src/components/templates/Jazzbar/JazzTab/JazzTab.tsx

@@ -27,6 +27,7 @@ import { ReactionsBar } from "components/molecules/ReactionsBar";
 // NOTE: This functionality will probably be returned in the nearest future.
 // import CallOutMessageForm from "components/molecules/CallOutMessageForm/CallOutMessageForm";
 import TableHeader from "components/molecules/TableHeader";
+import { TablesControlBar } from "components/molecules/TablesControlBar";
 import { UserList } from "components/molecules/UserList";
 import { TablesUserList } from "components/molecules/TablesUserList";
 
@@ -53,6 +54,11 @@ interface JazzProps {
 const Jazz: React.FC<JazzProps> = ({ setUserList, venue }) => {
   const { recentVenueUsers } = useRecentVenueUsers({ venueName: venue.name });
 
+  const {
+    isShown: showOnlyAvailableTables,
+    toggle: toggleTablesVisibility,
+  } = useShowHide();
+
   const { parentVenue } = useRelatedVenues({ currentVenueId: venue.id });
 
   const parentVenueId = parentVenue?.id;
@@ -203,6 +209,13 @@ const Jazz: React.FC<JazzProps> = ({ setUserList, venue }) => {
                   )} */}
                 </div>
               )}
+              {!seatedAtTable && (
+                <TablesControlBar
+                  containerClassName="ControlBar__container"
+                  onToggleAvailableTables={toggleTablesVisibility}
+                  showOnlyAvailableTables={showOnlyAvailableTables}
+                />
+              )}
             </>
           )}
         </div>
@@ -222,6 +235,7 @@ const Jazz: React.FC<JazzProps> = ({ setUserList, venue }) => {
           TableComponent={JazzBarTableComponent}
           joinMessage={!venue.hideVideo ?? true}
           customTables={jazzbarTables}
+          showOnlyAvailableTables={showOnlyAvailableTables}
         />
       </div>
     </div>