Fixes org switching

MuckRock · Nov 29, 2023 · 7ca13f5 · 7ca13f5
1 parent e17e804
commit 7ca13f5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 47 deletions.
diff --git a/src/pages/app/AccountNavigation/OrgMenu.svelte b/src/pages/app/AccountNavigation/OrgMenu.svelte
@@ -42,9 +42,9 @@
     return orgs;
   }
 
-  async function changeOrg(id) {
-    changeActive(id);
-    getOrgPromise = getOrg(id);
+  async function changeOrg(org) {
+    changeActive(org);
+    getOrgPromise = getOrg(org.id);
   }
 
   let getOrgPromise = getOrg(org.id);
@@ -70,6 +70,9 @@
     color: var(--gray);
     margin: 0;
   }
+  .medium-width {
+    min-width: 20rem;
+  }
 </style>
 
 {#await getOrgPromise}
@@ -102,20 +105,21 @@
         </span>
       </MenuTitle>
       <Menu>
-        {#if isPremiumOrg(activeOrg)}
-          <MenuInsert>
-            <CreditMeter
-              id="org-credits"
-              label={$_("authSection.credits.monthlyOrg")}
-              helpText={$_("authSection.credits.refreshOn", {
-                values: {
-                  date: formatResetDate(activeOrg.credit_reset_date, $locale),
-                },
-              })}
-              value={activeOrg.monthly_credits}
-              max={activeOrg.monthly_credit_allowance}
-            />
-            <!-- TODO: Support credit purchases (#342)
+        <div class="medium-width">
+          {#if isPremiumOrg(activeOrg)}
+            <MenuInsert>
+              <CreditMeter
+                id="org-credits"
+                label={$_("authSection.credits.monthlyOrg")}
+                helpText={$_("authSection.credits.refreshOn", {
+                  values: {
+                    date: formatResetDate(activeOrg.credit_reset_date, $locale),
+                  },
+                })}
+                value={activeOrg.monthly_credits}
+                max={activeOrg.monthly_credit_allowance}
+              />
+              <!-- TODO: Support credit purchases (#342)
           <CreditMeter
             id="purchased-credits"
             label={$_("authSection.credits.purchased")}
@@ -134,36 +138,37 @@
               {$_("authSection.credits.purchaseCreditsAdminOnly")}
             </p>
           {/if} -->
-          </MenuInsert>
-        {:else if isOrgAdmin(user)}
-          <MenuInsert>
-            <div class="freeOrg">
-              <h3 class="heading">
-                {$_("authSection.premiumUpgrade.orgHeading")}
-              </h3>
-              <p class="description">
-                {$_("authSection.premiumUpgrade.orgDescription")}
-              </p>
-              <Button
-                label={$_("authSection.premiumUpgrade.cta")}
-                fullWidth={true}
-                premium={true}
-                on:click={() => triggerPremiumUpgradeFlow(activeOrg)}
-              />
-              <div class="learnMore">
-                <Link toUrl="/help/premium" color={true} on:click={close}>
-                  {$_("authSection.premiumUpgrade.docs")}
-                </Link>
+            </MenuInsert>
+          {:else if isOrgAdmin(user)}
+            <MenuInsert>
+              <div class="freeOrg">
+                <h3 class="heading">
+                  {$_("authSection.premiumUpgrade.orgHeading")}
+                </h3>
+                <p class="description">
+                  {$_("authSection.premiumUpgrade.orgDescription")}
+                </p>
+                <Button
+                  label={$_("authSection.premiumUpgrade.cta")}
+                  fullWidth={true}
+                  premium={true}
+                  on:click={() => triggerPremiumUpgradeFlow(activeOrg)}
+                />
+                <div class="learnMore">
+                  <Link toUrl="/help/premium" color={true} on:click={close}>
+                    {$_("authSection.premiumUpgrade.docs")}
+                  </Link>
+                </div>
               </div>
-            </div>
-          </MenuInsert>
-        {/if}
-        <OrgMemberList orgId={activeOrg.id} myId={user.id} />
-        {#await listOrgsPromise then orgOptions}
-          {#if orgOptions.length > 1}
-            <OrgPicker {activeOrg} {orgOptions} handleChange={changeOrg} />
+            </MenuInsert>
           {/if}
-        {/await}
+          <OrgMemberList orgId={activeOrg.id} myId={user.id} />
+          {#await listOrgsPromise then orgOptions}
+            {#if orgOptions.length > 1}
+              <OrgPicker {activeOrg} {orgOptions} handleChange={changeOrg} />
+            {/if}
+          {/await}
+        </div>
       </Menu>
     </Dropdown>
   {/if}

diff --git a/src/pages/app/AccountNavigation/OrgPicker.svelte b/src/pages/app/AccountNavigation/OrgPicker.svelte
@@ -12,7 +12,7 @@
   export let activeOrg: Org;
   export let loading = false;
   export let orgOptions: Org[] = [];
-  export let handleChange: (id: string) => void = () => {};
+  export let handleChange: (org: Org) => void = () => {};
 </script>
 
 <style>
@@ -62,7 +62,7 @@
             <MenuItem
               on:click={() => {
                 closeDropdown("orgSelect");
-                handleChange?.(org.id);
+                handleChange?.(org);
               }}
               selected={org.id === activeOrg.id}
             >