Merge pull request #1774 from dandi/rest-composition-conversion

web/src/components/AppBar/AppBar.vue

@@ -94,7 +94,7 @@
     <div v-if="!insideIFrame">
       <template v-if="loggedIn">
         <v-btn
-          :disabled="!dandiRest.user?.approved"
+          :disabled="!user?.approved"
           :to="{ name: 'createDandiset' }"
           exact
           class="mx-3"
@@ -139,6 +139,7 @@ import {
   loggedIn as loggedInFunc,
   insideIFrame as insideIFrameFunc,
   dandiRest,
+  user,
 } from '@/rest';
 import {
   dandiAboutUrl, dandiDocumentationUrl, dandiHelpUrl, dandihubUrl,

web/src/components/AppBar/UserMenu.vue

@@ -21,17 +21,17 @@
     >
       <v-list-item>
         <v-list-item-content>
-          <span v-if="dandiRest.user">
+          <span v-if="user">
             You are logged in as <a
-              :href="`https://github.com/${dandiRest.user.username}`"
+              :href="`https://github.com/${user.username}`"
               target="_blank"
               rel="noopener"
-              v-text="dandiRest.user.username"
+              v-text="user.username"
             />.
           </span>
         </v-list-item-content>
       </v-list-item>
-      <ApiKeyItem v-if="dandiRest.user?.approved" />
+      <ApiKeyItem v-if="user?.approved" />
       <v-list-item @click="logout">
         <v-list-item-content>
           Logout
@@ -47,10 +47,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { user as userFunc, dandiRest } from '@/rest';
+import { user, dandiRest } from '@/rest';
 import ApiKeyItem from '@/components/AppBar/ApiKeyItem.vue';
 
-const user = computed(userFunc);
 const userInitials = computed(() => {
   if (user.value) {
     const { name } = user.value;

web/src/components/DLP/DandisetOwnersDialog.vue

@@ -214,7 +214,7 @@
 <script lang="ts">
 import { debounce } from 'lodash';
 
-import { dandiRest } from '@/rest';
+import { dandiRest, user } from '@/rest';
 import { useDandisetStore } from '@/stores/dandiset';
 import type { Ref } from 'vue';
 import {
@@ -285,7 +285,6 @@ export default defineComponent({
       }
     }
 
-    const user = computed(() => dandiRest.user);
     function ownerIsCurrentUser(owner: User) {
       return user.value && user.value.username === owner.username;
     }
@@ -334,10 +333,10 @@ export default defineComponent({
       if (currentDandiset.value?.dandiset) {
         const owner = owners.value
           ?.map((u: User) => u.username)
-          .includes(dandiRest.user!.username);
+          .includes(user.value!.username);
 
         // If necessary, open display and return. Otherwise, proceed to save.
-        if (!adminWarningDisplay.value && dandiRest.user?.admin && !owner) {
+        if (!adminWarningDisplay.value && user.value?.admin && !owner) {
           adminWarningDisplay.value = true;
           return;
         }

web/src/components/Meditor/localStorage.ts

@@ -1,33 +1,33 @@
-import { dandiRest } from '@/rest';
+import { user } from '@/rest';
 import type { DandiModel } from './types';
 // eslint-disable-next-line import/no-cycle
 import type { MeditorTransaction } from './transactions';
 
 function getModelLocalStorage(identifier: string) {
-  const model = localStorage.getItem(`${dandiRest.user?.username}-${identifier}-model`);
+  const model = localStorage.getItem(`${user.value?.username}-${identifier}-model`);
   return model ? JSON.parse(model) : null;
 }
 
 function setModelLocalStorage(identifier: string, model: DandiModel) {
-  localStorage.setItem(`${dandiRest.user?.username}-${identifier}-model`, JSON.stringify(model));
+  localStorage.setItem(`${user.value?.username}-${identifier}-model`, JSON.stringify(model));
 }
 
 function getTransactionsLocalStorage(identifier: string) {
-  const model = localStorage.getItem(`${dandiRest.user?.username}-${identifier}-transactions`);
+  const model = localStorage.getItem(`${user.value?.username}-${identifier}-transactions`);
   return model ? JSON.parse(model) : null;
 }
 
 function setTransactionsLocalStorage(identifier: string, model: MeditorTransaction[]) {
-  localStorage.setItem(`${dandiRest.user?.username}-${identifier}-transactions`, JSON.stringify(model));
+  localStorage.setItem(`${user.value?.username}-${identifier}-transactions`, JSON.stringify(model));
 }
 
 function getTransactionPointerLocalStorage(identifier: string) {
-  const model = localStorage.getItem(`${dandiRest.user?.username}-${identifier}-transactionPointer`);
+  const model = localStorage.getItem(`${user.value?.username}-${identifier}-transactionPointer`);
   return model ? JSON.parse(model) : null;
 }
 
 function setTransactionPointerLocalStorage(identifier: string, transactionPointer: number) {
-  localStorage.setItem(`${dandiRest.user?.username}-${identifier}-transactionPointer`, JSON.stringify(transactionPointer));
+  localStorage.setItem(`${user.value?.username}-${identifier}-transactionPointer`, JSON.stringify(transactionPointer));
 }
 
 function dataInLocalStorage(identifier: string) {
@@ -39,9 +39,9 @@ function dataInLocalStorage(identifier: string) {
 }
 
 function clearLocalStorage(identifier: string) {
-  localStorage.removeItem(`${dandiRest.user?.username}-${identifier}-model`);
-  localStorage.removeItem(`${dandiRest.user?.username}-${identifier}-transactions`);
-  localStorage.removeItem(`${dandiRest.user?.username}-${identifier}-transactionPointer`);
+  localStorage.removeItem(`${user.value?.username}-${identifier}-model`);
+  localStorage.removeItem(`${user.value?.username}-${identifier}-transactions`);
+  localStorage.removeItem(`${user.value?.username}-${identifier}-transactionPointer`);
 }
 
 export {

web/src/components/Search/forms/GenotypeForm.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { debounce } from 'lodash';
-import { dandiRest } from '@/rest';
+import { client } from '@/rest';
 import { searchParameters } from '../store';
 
 const searchTerm = ref<string | null>(null);
 const options = ref<string[]>([]);
 const loading = ref<boolean>(false);
 async function populateGenotypeList(newSearchTerm: string) {
   loading.value = true;
-  const genotypes: string[] = (await dandiRest.client.get('/search/genotypes', { params: { genotype: newSearchTerm } })).data;
+  const genotypes: string[] = (await client.get('/search/genotypes', { params: { genotype: newSearchTerm } })).data;
   options.value = genotypes.filter((g) => g.includes(newSearchTerm));
   loading.value = false;
 }

web/src/components/Search/forms/SpeciesForm.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { dandiRest } from '@/rest';
+import { client } from '@/rest';
 import { searchParameters } from '../store';
 
 const searchTerm = ref<string | null>(null);
 const options = ref<string[]>([]);
 const loading = ref<boolean>(false);
 async function populateSpeciesList(newSearchTerm: string = '') {
   loading.value = true;
-  const species: string[] = (await dandiRest.client.get('/search/species', { params: { species: newSearchTerm } })).data;
+  const species: string[] = (await client.get('/search/species', { params: { species: newSearchTerm } })).data;
   options.value = species;
   loading.value = false;
 }

web/src/components/UserStatusBanner.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { dandiRest } from '@/rest';
+import { user } from '@/rest';
 import type { ComputedRef } from 'vue';
 import { computed, defineComponent } from 'vue';
 
@@ -30,8 +30,7 @@ export default defineComponent({
   components: { },
   setup() {
     const bannerInfo: ComputedRef<StatusBanner|null> = computed(() => {
-      const { user } = dandiRest;
-      switch (user?.status) {
+      switch (user.value?.status) {
         case 'PENDING':
           return {
             text: 'Your DANDI account is currently pending approval. Please allow up to 2 business days for approval and contact the DANDI admins at [email protected] if you have any questions.',