Remove reactfire (#2894)

* Initial removal of Reactfire

* Memoize results for useWorldAndSpaceByParams to not trigger re-renders

* Resolve issues with VenueChat hooks

* Replace convertToFirestoreKey with DEFERRED in useWorldBySlug

* Remove more HOCs that are not needed

* Remove almost all uses of convertToFirestoreKey() and connect()

* Remove forgotten hook use

.ncurc.js

@@ -4,10 +4,6 @@ module.exports = {
     "faker",
     "@types/faker",
 
-    // newer version has different API, should probably be easy to rework how it is used upon upgrade
-    // @see https://github.com/FirebaseExtended/reactfire/blob/main/docs/upgrade-guide.md
-    // "reactfire",
-
     // will probably require update of components that use the older and testing of the forms
     "react-hook-form",
 

package.json

@@ -169,7 +169,6 @@
     "react-show-more-text": "^1.5.2",
     "react-switch": "^6.0.0",
     "react-use": "^17.3.2",
-    "reactfire": "^4.2.1",
     "read": "^1.0.7",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",

src/components/atoms/AdminRestricted/AdminRestricted.tsx → src/components/admin/AdminRestrictedMessage.tsx

@@ -1,51 +1,45 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
 import { useAsyncFn } from "react-use";
-import { WithSlugsProps } from "components/hocs/context/withSlugs";
-import { WithAuthProps } from "components/hocs/db/withAuth";
 import firebase from "firebase/compat/app";
 
 import {
-  DEFAULT_SPACE_SLUG,
-  DEFAULT_WORLD_SLUG,
+  ATTENDEE_INSIDE_URL,
+  ATTENDEE_LANDING_URL,
   DISABLED_DUE_TO_1324,
 } from "settings";
 
-import {
-  generateAttendeeInsideUrl,
-  generateAttendeeSpaceLandingUrl,
-} from "utils/url";
+import { generateUrl } from "utils/url";
 
-import { UseAdminRole } from "hooks/user/useAdminRole";
+import { useSpaceParams } from "hooks/spaces/useSpaceParams";
+import { useUserId } from "hooks/user/useUserId";
 
 import { ButtonNG } from "components/atoms/ButtonNG";
 import { SparkleLogo } from "components/atoms/SparkleLogo";
 
 import SHAPE_DENIED from "assets/images/access-forbidden.svg";
 
-import "./AdminRestricted.scss";
-
-type Props = WithAuthProps & WithSlugsProps & Partial<ReturnType<UseAdminRole>>;
-
-export const AdminRestricted: React.FC<Props> = ({
-  userId,
-  worldSlug,
-  spaceSlug,
-}) => {
+export const AdminRestrictedMessage: React.FC = () => {
   const history = useHistory();
+  const { worldSlug, spaceSlug } = useSpaceParams();
+  const { userId } = useUserId();
 
   const [{ loading: isLoggingOut }, logout] = useAsyncFn(async () => {
     await firebase.auth().signOut();
     history.push(
-      spaceSlug ? generateAttendeeSpaceLandingUrl(worldSlug, spaceSlug) : "/"
+      generateUrl({
+        route: ATTENDEE_LANDING_URL,
+        params: { worldSlug, spaceSlug },
+        fallback: "/",
+      })
     );
   }, [history, worldSlug, spaceSlug]);
 
   const redirectToDefaultRoute = () =>
     history.push(
-      generateAttendeeInsideUrl({
-        worldSlug: DEFAULT_WORLD_SLUG,
-        spaceSlug: DEFAULT_SPACE_SLUG,
+      generateUrl({
+        route: ATTENDEE_INSIDE_URL,
+        params: { worldSlug, spaceSlug },
       })
     );
 

src/components/admin/EventsPanel/EventsPanel.tsx

@@ -12,7 +12,7 @@ import { TimingSpace } from "components/organisms/TimingSpace";
 import { Loading } from "components/molecules/Loading";
 
 type EventsPanelProps = {
-  worldId: WorldId;
+  worldId?: WorldId;
   spaces: SpaceWithId[];
 };
 

src/components/admin/Sidebar/components/SidebarContent/SidebarContent.tsx

@@ -30,6 +30,7 @@ import { AdminSidebarProfile } from "components/molecules/AdminSidebarProfile";
 import * as TW from "./SidebarContent.tailwind";
 
 import SparkleLogo from "assets/icons/sparkle-300.png";
+
 const navigation = [
   {
     name: "Spaces",
@@ -49,7 +50,7 @@ const navigation = [
 
 export const SidebarContent = () => {
   const { worldSlug } = useSpaceParams();
-  const { world } = useWorldBySlug(worldSlug);
+  const { world } = useWorldBySlug({ worldSlug });
 
   const isWorldChosen = !!worldSlug;
 

src/components/admin/SpaceEditForm.tsx

@@ -7,6 +7,7 @@ import { ImageInput } from "components/admin/ImageInput";
 
 import {
   ADMIN_IA_SPACE_BASE_PARAM_URL,
+  ALWAYS_EMPTY_ARRAY,
   ALWAYS_NOOP_FUNCTION,
   BACKGROUND_IMG_TEMPLATES,
   DEFAULT_EMBED_URL,
@@ -34,18 +35,18 @@ import {
 import { createSlug } from "api/admin";
 import { updateVenueNG } from "api/venue";
 
-import { UserId, WorldSlug } from "types/id";
-import { AnyVenue } from "types/venues";
+import { SpaceWithId, WorldId } from "types/id";
 import { VenueTemplate } from "types/VenueTemplate";
 
 import { convertToEmbeddableUrl } from "utils/embeddableUrl";
-import { WithId } from "utils/id";
 import { generateUrl } from "utils/url";
 
 import { spaceEditSchema } from "forms/spaceEditSchema";
 
+import { useRelatedSpaces } from "hooks/spaces/useRelatedSpaces";
+import { useSpaceParams } from "hooks/spaces/useSpaceParams";
 import { useFetchAssets } from "hooks/useFetchAssets";
-import { useRelatedVenues } from "hooks/useRelatedVenues";
+import { useUserId } from "hooks/user/useUserId";
 
 import { BackgroundSelect } from "pages/Admin/BackgroundSelect";
 
@@ -76,17 +77,13 @@ const HANDLED_ERRORS = [
   "columns",
 ];
 
-export interface SpaceEditFormProps {
-  space: WithId<AnyVenue>;
-  userId: UserId;
-  worldSlug: WorldSlug;
+interface SpaceEditFormProps {
+  space: SpaceWithId;
 }
 
-export const SpaceEditForm: React.FC<SpaceEditFormProps> = ({
-  space,
-  userId,
-  worldSlug,
-}) => {
+export const SpaceEditForm: React.FC<SpaceEditFormProps> = ({ space }) => {
+  const { userId } = useUserId();
+  const { worldSlug } = useSpaceParams();
   const spaceLogoImage =
     PORTAL_INFO_ICON_MAPPING[space.template] ?? DEFAULT_VENUE_LOGO;
 
@@ -193,26 +190,29 @@ export const SpaceEditForm: React.FC<SpaceEditFormProps> = ({
 
   const isReactionsMutedDisabled = !values?.showReactions;
 
-  const { relatedVenues } = useRelatedVenues();
+  const { spaces = ALWAYS_EMPTY_ARRAY } = useRelatedSpaces({
+    worldId: space.worldId as WorldId | undefined,
+    spaceId: space.id,
+  });
 
   const backButtonOptionList = useMemo(
     () =>
       Object.fromEntries(
-        relatedVenues
+        spaces
           .filter(
             ({ id, worldId }) => !(space.worldId !== worldId || id === space.id)
           )
           .map((venue) => [venue.id, venue])
       ),
-    [relatedVenues, space.worldId, space.id]
+    [spaces, space.worldId, space.id]
   );
 
   const parentSpace = useMemo(
     () =>
       space.parentId
-        ? relatedVenues.find(({ id }) => id === space.parentId)
+        ? spaces.find(({ id }) => id === space.parentId)
         : { name: "" },
-    [relatedVenues, space.parentId]
+    [spaces, space.parentId]
   );
 
   const { name: watchedName } = watch();

src/components/atoms/Forbidden/Forbidden.tsx

@@ -6,7 +6,7 @@ import firebase from "firebase/compat/app";
 import { generateAttendeeSpaceLandingUrl } from "utils/url";
 
 import { useSpaceParams } from "hooks/spaces/useSpaceParams";
-import { useUser } from "hooks/useUser";
+import { useUserId } from "hooks/user/useUserId";
 
 import { ButtonNG } from "components/atoms/ButtonNG";
 import { SparkleLogo } from "components/atoms/SparkleLogo";
@@ -16,7 +16,7 @@ import SHAPE_DENIED from "assets/images/access-forbidden.svg";
 import "./Forbidden.scss";
 
 export const Forbidden: React.FC = ({ children }) => {
-  const { user } = useUser();
+  const { userId, isLoaded } = useUserId();
   const history = useHistory();
   const { worldSlug, spaceSlug } = useSpaceParams();
 
@@ -44,7 +44,7 @@ export const Forbidden: React.FC = ({ children }) => {
         <p>
           If you don’t have an Account, please contact your event organiser.
         </p>
-        {user && (
+        {userId && isLoaded && (
           <ButtonNG
             className="Forbidden__switch-button"
             variant="primary"