reconsidered data layer and refactored all "me" usage

src/components/Conversation.svelte

@@ -1,10 +1,10 @@
 <script>
+import { me } from '../data/user'
 import { formatDistanceToNow } from 'date-fns'
 import { sendCommit, acceptCommittment } from '../data/gqlQueries'
 import { createEventDispatcher } from 'svelte'
 import { unreads, saw, send } from '../data/messaging'
 
-export let me = {}
 export let conversation = {}
 export let minimal = false
 
@@ -90,15 +90,15 @@ const focusOnCreate = element => element.focus()
     </div>
 
     <div class="col text-right mb-1">
-      {#if creator.id == me.id }
+      {#if creator.id == $me.id }
         {#if provider.nickname }
           { provider.nickname } committed to bring this.
         {/if}
         {#if post.status === 'COMMITTED' && isConversingWithProvider}
           <button class="btn btn-sm btn-success" on:click={ accept }>Accept</button>
         {/if}
       {:else}
-        {#if provider.id == me.id }
+        {#if provider.id == $me.id }
           You committed to bring this.
         {:else if provider.id }
           Someone else has committed to bring this.
@@ -114,7 +114,7 @@ const focusOnCreate = element => element.focus()
   <hr class="mt-1" />
 
   {#each messages as message}
-    {#if message.sender.id === me.id}
+    {#if message.sender.id === $me.id}
       <blockquote class="blockquote text-right">
         <p class="mb-0 message-content">{message.content}</p>
         <footer class="blockquote-footer">you, { whenWas(message.createdAt) }</footer>

src/components/ConversationListEntry.svelte

@@ -1,4 +1,5 @@
 <script>
+import { me } from '../data/user'
 import Icon from 'fa-svelte'
 import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
 import { createEventDispatcher } from 'svelte'
@@ -7,15 +8,14 @@ import { unreads } from '../data/messaging'
 
 export let active = false
 export let conversation = {}
-export let me = {}
 export let minimal = false
 
 const dispatch = createEventDispatcher()
 
-$: isCreatedByMe = post => post.createdBy.id === me.id
-$: isProvidedByMe = post => post.provider && post.provider.id === me.id
+$: isCreatedByMe = post => post.createdBy.id === $me.id
+$: isProvidedByMe = post => post.provider && post.provider.id === $me.id
 $: creator = post => post.createdBy && post.createdBy.nickname
-$: messageFrom = participants => participants.filter(p => p.id !== me.id).map(p => p.nickname).join(', ')
+$: messageFrom = participants => participants.filter(p => p.id !== $me.id).map(p => p.nickname).join(', ')
 $: unread = $unreads.find(({ id }) => id === conversation.id) || {}
 </script>
 

src/components/Messaging.svelte

@@ -3,7 +3,6 @@ import Conversation from '../components/Conversation.svelte'
 import ConversationListEntry from './ConversationListEntry.svelte'
 
 export let conversations
-export let me
 export let potentialConversation = null
 export let conversationId = null
 export let minimal = false
@@ -41,20 +40,20 @@ $: selectedConversation = conversations.find(conversation => conversation.id ===
     <div class="list-group list-group-flush">
       {#each conversations as conversation}
         <!-- on:conversation-selected is being passed up to consumer, i.e., views/Messages.svelte -->
-        <ConversationListEntry {conversation} {me} on:conversation-selected active={ selectedConversation.id === conversation.id } {minimal} />
+        <ConversationListEntry {conversation} on:conversation-selected active={ selectedConversation.id === conversation.id } {minimal} />
       {/each}
 
       {#if potentialConversation }
-        <ConversationListEntry conversation={potentialConversation} {me} active {minimal} />
+        <ConversationListEntry conversation={potentialConversation} active {minimal} />
       {:else if conversations.length < 1 }
         <i class="text-muted">No ongoing conversations at this time</i>
       {/if}
     </div>
   </div>
   <div class="col">
     <div class="tab-content card conversation-card" class:conversation-card-empty={!selectedConversation.post}>
-        <!-- on:new is being used to passed up to consumer, i.e., views/Request.svelte -->
-      <Conversation {me} conversation={selectedConversation} on:new {minimal} />
+      <!-- on:new is being used to passed up to consumer, i.e., views/Request.svelte -->
+      <Conversation conversation={selectedConversation} on:new {minimal} />
     </div>
   </div>
 </div>

src/components/Nav.svelte

@@ -1,24 +1,13 @@
 <script>
-import { getUser } from '../data/gqlQueries'
+import { me } from '../data/user'
 import { location } from 'svelte-spa-router' // https://github.com/ItalyPaleAle/svelte-spa-router
 import polyglot from '../i18n'
 import UserAvatar from './UserAvatar.svelte'
 import { logoutUrl } from '../data/api'
 import CountIndicator from './CountIndicator.svelte'
 import { unreads } from '../data/messaging'
 
-let me = {}; loadMe()
-
 $: totalNumUnreads = $unreads.reduce((sum, { count }) => sum + count, 0)
-
-async function loadMe() {
-    try {
-      const { user } = await getUser()
-      me = user
-    } catch (e) {
-      // TODO: need errorhandling?
-    }
-}
 </script>
 
 <style>
@@ -34,7 +23,7 @@ nav :global(img) {
 }
 </style>
 
-{#if me.nickname && $location === '/requests'}
+{#if $me.nickname && $location === '/requests'}
 <a href="/#/requests/new" title="{polyglot.t('nav-requests-create')}" class="btn btn-lg btn-success rounded-circle fab shadow-lg text-monospace d-block d-md-none"> <!-- only shown on phones -->
   +
 </a>
@@ -45,7 +34,7 @@ nav :global(img) {
     <img src="/logo.svg" alt="WeCarry logo" />
   </a>
 
-  {#if me.nickname}
+  {#if $me.nickname}
   <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon" />
   </button>
@@ -74,18 +63,18 @@ nav :global(img) {
 
       <li class="nav-item dropdown">
         <a href="/#/profile" data-toggle="dropdown" id="avatarDropdown" class="nav-link dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
-          <UserAvatar user={me} />
+          <UserAvatar user={$me} />
         </a>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="avatarDropdown">
           <a href="/#/profile" class="dropdown-item">
             {polyglot.t('nav-profile')}
           </a>
 
-          <a href="/#/requests?creator={me.id}" class="dropdown-item">
+          <a href="/#/requests?creator={$me.id}" class="dropdown-item">
             {polyglot.t('nav-requests-mine')}
           </a>
 
-          <a href="/#/requests?provider={me.id}" class="dropdown-item">
+          <a href="/#/requests?provider={$me.id}" class="dropdown-item">
             {polyglot.t('nav-requests-comittments')}
           </a>
 

src/components/RequestQuickFilter.svelte

@@ -1,8 +1,8 @@
 <script>
 import { createEventDispatcher } from 'svelte'
+import { me } from '../data/user'
 
 export let buttonCssClass = ''
-export let me = {}
 export let requestFilter = {}
 
 const dispatch = createEventDispatcher()
@@ -12,8 +12,8 @@ let isJustMyRequests
 let isJustMyCommitments
 
 $: isAllRequests = !isCreatorSelected(requestFilter) && !isProviderSelected(requestFilter)
-$: isJustMyRequests = isSelectedCreator(me.id, requestFilter)
-$: isJustMyCommitments = isSelectedProvider(me.id, requestFilter)
+$: isJustMyRequests = isSelectedCreator($me.id, requestFilter)
+$: isJustMyCommitments = isSelectedProvider($me.id, requestFilter)
 
 function isCreatorSelected(requestFilter) {
   return requestFilter.createdBy && requestFilter.createdBy.id

src/data/gqlQueries.js

@@ -1,8 +1,6 @@
 import { gql } from './api'
 
-function json(value) {
-  return JSON.stringify(value)
-}
+const json = JSON.stringify
 
 export function getUser() {
   return gql(`{
@@ -43,9 +41,6 @@ export function getRequests() {
         url
       }
     }
-    user {
-      id
-    }
   }`)
 }
 
@@ -111,9 +106,6 @@ export function getRequest(id) {
         }
       }
     }
-    user {
-      id
-    }
   }`)
 }
 

src/data/user.js

@@ -0,0 +1,21 @@
+import { writable } from 'svelte/store'
+import { getUser } from './gqlQueries'
+
+export const me = writable({})
+
+init()
+
+function init() {
+  loadAuthenticatedUser()
+}
+
+async function loadAuthenticatedUser() {
+  try {
+    const { user } = await getUser()
+
+    me.set(user)
+  } catch (e) {
+    console.error(`user.js:loadAuthenticatedUser: `, e)
+    // TODO: errorhandling?
+  }
+}

src/views/Messages.svelte

@@ -1,13 +1,11 @@
 <script>
 import Messaging from '../components/Messaging.svelte'
-import { getUser } from '../data/gqlQueries'
 import { replace } from 'svelte-spa-router'
 import { conversations } from '../data/messaging'
 
 export let params = {} // URL path parameters, provided by router.
 
 let conversationId
-let me = {}; loadUser()
 
 $: conversationId = params.id
 $: if (!conversationId && $conversations.length > 0) {
@@ -17,15 +15,8 @@ $: if (!conversationId && $conversations.length > 0) {
 function goToConversation(conversationId) {
   replace('/messages/' + conversationId)
 }
-
-async function loadUser() {
-  const { user } = await getUser() 
-  // TODO: errorhandling needed?
-  me = user
-}
 </script>
 
 <h2 class="pb-4">Messages</h2>
 
-<!-- TODO: review this api, e.g., could `me` simply be gathered later rather than simply passed down without ever needing it in this view? And would `selected={conversationId}` be more intuitive? -->
-<Messaging conversations={$conversations} {me} {conversationId} on:conversation-selected={event => goToConversation(event.detail)} />
+<Messaging conversations={$conversations} {conversationId} on:conversation-selected={event => goToConversation(event.detail)} />

src/views/NewRequest.svelte

@@ -2,7 +2,8 @@
 import RequestImage from '../components/RequestImage.svelte'
 import SizeSelector from '../components/SizeSelector.svelte'
 import Uploader from '../components/Uploader.svelte'
-import { getUser, createPost } from '../data/gqlQueries'
+import { me } from '../data/user'
+import { createPost } from '../data/gqlQueries'
 import { push, pop } from 'svelte-spa-router'
 import { format, addMonths } from 'date-fns'
 import { GooglePlacesAutocomplete } from '@beyonk/svelte-googlemaps' //https://github.com/beyonk-adventures/svelte-googlemaps
@@ -17,17 +18,10 @@ const options = {
 }
 
 let imgSrc = 'https://mdbootstrap.com/img/Photos/Others/placeholder.jpg'
-
 let errorMessage = ''
 let imageUrl = ''
-let me = {}; loadMe()
-let myOrgs = []
-
-async function loadMe() {
-    const response = await getUser()
-    me = response.user
-    myOrgs = me.organizations
-    request.viewableBy = myOrgs[0].id // needed a default
+$: if ($me.organizations && $me.organizations.length > 0) {
+  request.viewableBy = $me.organizations[0].id
 }
 
 function extractCountryCode(addressComponents) {

src/views/Profile.svelte

@@ -1,15 +1,9 @@
 <script>
 import UserAvatar from '../components/UserAvatar.svelte'
-import { getUser, createPost } from '../data/gqlQueries'
+import { me } from '../data/user'
 
-let me = {}; loadMe()
-$: email = me.email || ''
-$: nickname = me.nickname || ''
-
-async function loadMe() {
-    const response = await getUser()
-    me = response.user
-}
+$: email = $me.email || ''
+$: nickname = $me.nickname || ''
 </script>
 
 <style>
@@ -21,7 +15,7 @@ async function loadMe() {
 <div class="row">
   <div class="col-12 col-sm-5">
     <div class="text-center text-sm-right profile-avatar">
-      <UserAvatar user={me} />
+      <UserAvatar user={$me} />
     </div>
   </div>
 

src/views/Request.svelte

@@ -1,4 +1,5 @@
 <script>
+import { me } from '../data/user'
 import RequestImage from '../components/RequestImage.svelte'
 import SizeIndicator from '../components/SizeIndicator.svelte'
 import { getRequest, cancelPost } from '../data/gqlQueries'
@@ -12,20 +13,18 @@ export let params = {} // URL path parameters, provided by router.
 
 let conversationId = null
 let request = {}; loadRequest()
-let me = {}
 let potentialConversation = null
 
 async function loadRequest() {
-  const { post, user } = await getRequest(params.id)
+  const { post } = await getRequest(params.id)
   request = post
-  me = user
 }
 
 $: requestor = request.createdBy || {}
 $: provider = request.provider || {}
 $: conversationsOnThisRequest = $conversations.filter(({ post }) => post.id === request.id)
-$: isMine = me.id && (requestor.id === me.id)
-$: imProviding = me.id && (provider.id === me.id)
+$: isMine = $me.id && (requestor.id === $me.id)
+$: imProviding = $me.id && (provider.id === $me.id)
 $: hasConversation = conversationsOnThisRequest.length > 0 || potentialConversation
 $: destination = request.destination && request.destination.description || ''
 
@@ -111,7 +110,7 @@ div.card-img {
 
 {#if isMine || imProviding || hasConversation }
   <h4 class="text-center mt-4">Messages</h4>
-  <Messaging minimal listColumns="col-12 col-md-3" conversations={conversationsOnThisRequest} {me} {conversationId} {potentialConversation}
+  <Messaging minimal listColumns="col-12 col-md-3" conversations={conversationsOnThisRequest} {conversationId} {potentialConversation}
              on:conversation-selected={event => showConversation(event.detail)}
              on:new={() => potentialConversation = null} />
 {/if}