Merge pull request activist-org#861 from nicomaz/update-buttons-based…

…-on-screen-size Update buttons based on screen size
aasimsyed · May 1, 2024 · f68f3d1 · f68f3d1
2 parents 74c6f58 + 31e4e2b
commit f68f3d1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 47 deletions.
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
@@ -67,10 +67,7 @@
           :event="event"
         />
         <MediaMap
-          v-if="
-            (event.offlineLocation && !textExpanded) ||
-            (event.offlineLocation && isUnderLargeBP)
-          "
+          v-if="event.offlineLocation && !textExpanded"
           class="h-[17.5rem] w-full"
           :markerColors="event.type === 'learn' ? ['#2176AE'] : ['#BA3D3B']"
           :eventNames="[event.name]"
@@ -102,41 +99,30 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const currentWidth = ref(window.innerWidth);
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const windowWidth = ref(window.innerWidth);
+
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  if (currentWidth.value < Breakpoint.SMALL) {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value < Breakpoint.SMALL) {
     shareButtonLabel.value = "components.btn-action.share";
   } else {
     shareButtonLabel.value = "components._global.share-group";
   }
 }
 
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener("resize", updateShareBtnLabel);
   updateShareBtnLabel();
 });
 
-const isUnderLargeBP = ref(false);
-
-const checkUnderLargeBP = () => {
-  isUnderLargeBP.value = window.innerWidth < 1024;
-};
-
-const handleResize = () => {
-  checkUnderLargeBP();
-
-  if (resizeTimeout) {
-    clearTimeout(resizeTimeout);
-  }
-  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
-};
+onUpdated(() => {
+  updateShareBtnLabel();
+});
 
-onMounted(() => {
-  window.addEventListener("resize", handleResize);
-  handleResize(); // initial check
+onUnmounted(() => {
+  window.removeEventListener("resize", updateShareBtnLabel);
 });
 
 const modalIsOpen = ref(false);

diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
@@ -124,30 +124,31 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const currentWidth = ref(window.innerWidth);
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const windowWidth = ref(window.innerWidth);
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  if (currentWidth.value < Breakpoint.SMALL) {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value < Breakpoint.SMALL) {
     shareButtonLabel.value = "components.btn-action.share";
   } else {
     shareButtonLabel.value = "components._global.share-organization";
   }
 }
 
-const handleResize = () => {
-  if (resizeTimeout) {
-    clearTimeout(resizeTimeout);
-  }
-  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
-};
-
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener("resize", updateShareBtnLabel);
+  updateShareBtnLabel();
+});
+
+onUpdated(() => {
   updateShareBtnLabel();
 });
 
+onUnmounted(() => {
+  window.removeEventListener("resize", updateShareBtnLabel);
+});
+
 // TODO: for testing purpose, should be removed.
 // const upVotes = ref(123);
 // const downVotes = ref(123);

diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[id]/about.vue
@@ -101,30 +101,31 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const currentWidth = ref(window.innerWidth);
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const windowWidth = ref(window.innerWidth);
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  if (currentWidth.value < Breakpoint.SMALL) {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value < Breakpoint.SMALL) {
     shareButtonLabel.value = "components.btn-action.share";
   } else {
     shareButtonLabel.value = "components._global.share-group";
   }
 }
 
-const handleResize = () => {
-  if (resizeTimeout) {
-    clearTimeout(resizeTimeout);
-  }
-  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
-};
-
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener("resize", updateShareBtnLabel);
+  updateShareBtnLabel();
+});
+
+onUpdated(() => {
   updateShareBtnLabel();
 });
 
+onUnmounted(() => {
+  window.removeEventListener("resize", updateShareBtnLabel);
+});
+
 const modalIsOpen = ref(false);
 
 function openModal() {