update transform usage for testing (#221)

src/api/storage.ts

@@ -44,14 +44,16 @@ export async function uploadToCoverImageStorage({
   }
 }
 
-export const getCoverImageUrl = async (path: string) => {
+export const getCoverImageUrl = async (path: string, transform = false) => {
   const { data } = await supabase.storage
     .from("cover-images")
     .getPublicUrl(path, {
-      transform: {
-        height: 600,
-        width: 1066,
-      },
+      transform: transform
+        ? {
+            height: 600,
+            width: 1066,
+          }
+        : undefined,
     });
   return data.publicUrl ?? "";
 };

src/components/Community/CommunityCard.vue

@@ -43,7 +43,7 @@ const coverImageUrl = ref("");
 
 onMounted(async () => {
   if (props.community.cover_image) {
-    const publicUrl = await getCoverImageUrl(props.community.cover_image);
+    const publicUrl = await getCoverImageUrl(props.community.cover_image, true);
     if (publicUrl) {
       coverImageUrl.value = publicUrl;
     }

src/components/CommunityListing.vue

@@ -262,7 +262,7 @@ const coverImageUrl = ref("");
 
 onMounted(async () => {
   if (props.community.cover_image) {
-    const publicUrl = await getCoverImageUrl(props.community.cover_image);
+    const publicUrl = await getCoverImageUrl(props.community.cover_image, true);
     if (publicUrl) {
       coverImageUrl.value = publicUrl;
     }

src/components/Game/GameCard.vue

@@ -93,7 +93,7 @@ const coverImageUrl = ref("");
 
 onMounted(async () => {
   if (props.game.cover_image) {
-    coverImageUrl.value = await getCoverImageUrl(props.game.cover_image);
+    coverImageUrl.value = await getCoverImageUrl(props.game.cover_image, false);
   }
 });
 </script>

src/components/Game/SessionBlock.vue

@@ -120,6 +120,8 @@ import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 
 const { showSuccess, showError } = useToast();
 
+const isOwner = computed(() => gameStore.game.creator_id === store.user?.id);
+
 const props = defineProps({
   session: {
     type: Object as PropType<Session>,
@@ -129,10 +131,6 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  isOwner: {
-    type: Boolean,
-    required: true,
-  },
   notAMember: {
     type: Boolean,
     required: true,

src/components/ImageButton.vue

@@ -39,6 +39,9 @@ const props = defineProps({
 const src = ref("");
 onMounted(async () => {
   if (!store.user?.id) return;
-  src.value = await getCoverImageUrl(`${store.user.id}/${props.image.name}`);
+  src.value = await getCoverImageUrl(
+    `${store.user.id}/${props.image.name}`,
+    false,
+  );
 });
 </script>

src/layouts/BaseTemplate.vue

@@ -8,7 +8,7 @@
   >
     <InfoBanner
       v-if="route.query.unauthorized"
-      class="my-4 max-w-4xl mx-auto"
+      class="mt-32 max-w-4xl mx-auto"
       @dismiss="router.replace(route.path)"
     >
       You are not authorized to view that page

src/pages/Community/CommunityBase.vue

@@ -192,7 +192,10 @@ async function setCommunityDataInStore(data: Community) {
   communityData.value = data;
   communityStore.community = data;
   if (data?.cover_image) {
-    communityStore.coverImageUrl = await getCoverImageUrl(data.cover_image);
+    communityStore.coverImageUrl = await getCoverImageUrl(
+      data.cover_image,
+      true,
+    );
   } else {
     communityStore.coverImageUrl = undefined;
   }

src/pages/Community/CommunityImageLibrary.vue

@@ -108,7 +108,7 @@ async function updateImage() {
         cover_image: imagePath,
       })
       .eq("id", communityStore.community.id);
-    const publicUrl = await getCoverImageUrl(imagePath);
+    const publicUrl = await getCoverImageUrl(imagePath, false);
     communityStore.coverImageUrl = publicUrl;
     newCoverImage.value = null;
     showSuccess({ message: "Cover image updated" });

src/pages/Game/GameBase.vue

@@ -93,16 +93,7 @@
           </template>
         </GameBadge>
       </div>
-      <router-view v-slot="{ Component, route }">
-        <KeepAlive>
-          <component
-            :is="Component"
-            :key="route.meta.usePathKey ? route.path : undefined"
-            :is-owner="isOwner"
-            :user-membership="userMembership"
-          />
-        </KeepAlive>
-      </router-view>
+      <router-view> </router-view>
     </div>
   </DetailPageTemplate>
 </template>
@@ -120,7 +111,6 @@ import { GameWithCommunityAndSessions } from "@/typings/Game";
 import { clearGameStore, gameStore } from "./gameStore";
 import * as R from "ramda";
 import { Session } from "@/typings/Session";
-import { loadUserCommunityMembership } from "@/api/communityMemberships";
 import {
   UsersIcon,
   TagIcon,
@@ -140,17 +130,23 @@ const currentRoute = useRoute();
 const { game_id: id } = currentRoute.params;
 
 const gameData = ref<GameWithCommunityAndSessions>();
-const canManage = ref(false);
-const isOwner = ref(false);
 const isLoading = ref(true);
-const userMembership = ref({});
 
 const userIsInTheGame = computed(() =>
   gameStore.sessions.some((session) =>
     session.rsvps.includes(store.user?.id ?? ""),
   ),
 );
 
+const membership = computed(() => {
+  return store.userCommunityMembership[gameStore.game.community_id];
+});
+
+const canManage = computed(
+  () =>
+    membership.value?.communityMembership?.role_id === ROLES.admin ||
+    gameStore.game.creator_id === store.user?.id,
+);
 const hasAccess = computed(() => {
   return userIsInTheGame.value || canManage.value;
 });
@@ -229,17 +225,6 @@ async function getGameData() {
     if (data.cover_image) {
       loadCoverImageUrl(data.cover_image);
     }
-
-    if (store.user?.id) {
-      isOwner.value = data.creator_id.id === store.user?.id;
-      const membership = await loadUserCommunityMembership({
-        userId: store.user.id,
-        communityId: data.community_id.id,
-      });
-      if (!membership) return;
-      userMembership.value = membership;
-      canManage.value = membership.role_id === ROLES.admin || isOwner.value;
-    }
   }
 }
 

src/pages/Game/GameHome.vue

@@ -1,6 +1,6 @@
 <template>
   <section v-if="!gameStore.game.deleted_at">
-    <div v-if="userIsNotMember" class="flex flex-col items-center mb-12">
+    <div v-if="!membership" class="flex flex-col items-center mb-12">
       <p class="text-sm text-slate-700 font-semibold mb-3">
         You must be a member of the community to RSVP
       </p>
@@ -33,8 +33,7 @@
         :key="session.id"
         :session="session"
         :participant-count="session.participant_count"
-        :is-owner="isOwner"
-        :not-a-member="userIsNotMember"
+        :not-a-member="!membership"
         :is-joining="joining"
       />
     </div>
@@ -49,8 +48,7 @@
         :key="session.id"
         :session="session"
         :participant-count="session.participant_count"
-        :is-owner="isOwner"
-        :not-a-member="userIsNotMember"
+        :not-a-member="!membership"
       />
     </div>
   </section>
@@ -77,14 +75,13 @@
   </section>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, computed, PropType } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { isAfter, isBefore } from "date-fns";
 import TipTapDisplay from "@/components/TipTapDisplay.vue";
 import PrimaryButton from "@/components/Buttons/PrimaryButton.vue";
 import SessionBlock from "@/components/Game/SessionBlock.vue";
 import { getCoverImageUrl } from "@/api/storage";
 import { gameStore } from "./gameStore";
-import { ROLES } from "@/util/roles";
 import Heading from "@/components/Heading.vue";
 import { pluralize } from "@/util/grammar";
 import { joinSession } from "@/api/gamesAndSessions";
@@ -96,31 +93,20 @@ const { showSuccess, showError } = useToast();
 
 const joining = ref(false);
 
-const props = defineProps({
-  isOwner: {
-    type: Boolean,
-    required: true,
-  },
-  userMembership: {
-    type: Object as PropType<{
-      user_id?: string;
-      role_id?: ROLES;
-    }>,
-    required: true,
-  },
-});
-
 const gameCoverImage = ref("");
 
 onMounted(async () => {
   if (gameStore.game?.cover_image) {
-    gameCoverImage.value = await getCoverImageUrl(gameStore.game.cover_image);
+    gameCoverImage.value = await getCoverImageUrl(
+      gameStore.game.cover_image,
+      true,
+    );
   }
 });
 
-const userIsNotMember = computed(
-  () => props.userMembership.role_id === undefined,
-);
+const membership = computed(() => {
+  return store.userCommunityMembership[gameStore.game.community_id];
+});
 
 const upcomingSessions = computed(() =>
   gameStore.sessions.filter((session) =>