responsiveness fix and prevent crash on zupass gated events in app

Author: lassejaco

devconnect-app/src/app/store.hooks.ts

@@ -12,7 +12,11 @@ import { AppState } from './store';
 export const useFavorites = () => {
   const userData = useGlobalStore(useShallow((state) => state.userData));
   const favorites =
-    useGlobalStore((state) => state.userData?.favorite_events) || [];
+    useGlobalStore((state) => {
+      console.log('SELECTOR RUNNING, state:', state);
+
+      return state.userData?.favorite_events;
+    }) || [];
   const setFavoriteEvents = useGlobalStore((state) => state.setFavoriteEvents);
 
   const updateFavorite = (eventId: string) => {

devconnect-app/src/app/store.provider.tsx

@@ -44,8 +44,13 @@ export const GlobalStoreProvider = ({
 }: GlobalStoreProviderProps) => {
   const storeRef = useRef<AppStore | null>(null);
 
+  console.log('running on server client');
+
   if (storeRef.current === null) {
+    console.log('creating store');
     storeRef.current = createGlobalStore(initGlobalStore(events, userData));
+  } else {
+    console.log('store already created');
   }
 
   useStore(storeRef.current, (state) => console.log('STATE', state));

lib/components/event-schedule-new/filter.tsx

@@ -167,7 +167,7 @@ export const FilterSummary = ({ filter }: { filter: any }) => {
     <div
       className={cn(
         filterCss["active-filters"],
-        "max-w-[200px] truncate text-ellipsis"
+        "max-w-[200px] truncate text-ellipsis hidden sm:!flex"
       )}
     >
       {/* <p className="small-text">Active filter:</p> */}

lib/components/event-schedule-new/layout-app.tsx

@@ -6,6 +6,7 @@ import filterCss from "./filter.module.scss";
 import Link from "lib/components/link/Link";
 import layoutCss from "./layout-app.module.scss";
 import cn from "classnames";
+import { withParcnetProvider } from "./zupass/zupass";
 // import TicketPurple from "lib/assets/icons/ticket-purple.svg";
 
 type CalendarLayoutProps = ScheduleProps & {
@@ -33,7 +34,7 @@ const Layout = (props: CalendarLayoutProps) => {
         layoutCss["layout-app"]
       )}
     >
-      <div className="flex-col md:flex-row flex justify-between gap-4 md:mt-1 md:mb-1 mb-1 px-4 md:px-0">
+      <div className="flex-col md:flex-row flex justify-between gap-4 md:mt-1 md:mb-1 mb-1">
         <div
           className={cn(
             "text-sm overflow-hidden px-4 py-2 text-[#36364C] self-center w-full",
@@ -123,4 +124,4 @@ const Layout = (props: CalendarLayoutProps) => {
   );
 };
 
-export default Layout;
+export default withParcnetProvider(Layout);