From a25dd048b61a22713f5022150d3f7816cd1be7e3 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 15 Mar 2018 20:04:24 -0700
Subject: [PATCH] make statuses robust against duplicates, remove duplicate
 from test

---
 bin/mastodon-data.js                          |  4 --
 routes/_components/status/Notification.html   | 16 ++++-
 routes/_components/status/Status.html         | 60 ++++++++++++-------
 .../status/StatusAuthorHandle.html            |  2 +-
 .../_components/status/StatusAuthorName.html  |  7 +--
 routes/_components/status/StatusContent.html  | 27 ++++-----
 routes/_components/status/StatusDetails.html  | 17 +++---
 routes/_components/status/StatusHeader.html   | 14 +----
 .../status/StatusMediaAttachments.html        | 18 +++---
 .../status/StatusRelativeDate.html            | 12 ++--
 routes/_components/status/StatusSidebar.html  |  2 +-
 routes/_components/status/StatusSpoiler.html  | 11 ++--
 routes/_components/status/StatusToolbar.html  | 48 +++++++--------
 routes/_components/timeline/Timeline.html     |  2 +-
 14 files changed, 128 insertions(+), 112 deletions(-)

diff --git a/bin/mastodon-data.js b/bin/mastodon-data.js
index 46584d2..d1bd2a8 100644
--- a/bin/mastodon-data.js
+++ b/bin/mastodon-data.js
@@ -186,10 +186,6 @@ export const actions = times(30, i => ({
       privacy: 'unlisted'
     }
   },
-  {
-    user: 'admin',
-    boost: 'notification-of-unlisted-message'
-  },
   {
     user: 'admin',
     boost: 'foobar-this-is-unlisted'
diff --git a/routes/_components/status/Notification.html b/routes/_components/status/Notification.html
index 78777b2..64e57b9 100644
--- a/routes/_components/status/Notification.html
+++ b/routes/_components/status/Notification.html
@@ -10,7 +10,8 @@
            aria-posinset="{{index}}" aria-setsize="{{length}}"
   >
     <div class="follow-notification-offset">
-      <StatusHeader :status :notification isStatusInNotification="true" />
+      <StatusHeader :notification :notificationId :status :statusId :timelineType
+                    :account :accountId :uuid isStatusInNotification="true" />
     </div>
   </article>
 {{/if}}
@@ -35,10 +36,23 @@
 <script>
   import Status from './Status.html'
   import StatusHeader from './StatusHeader.html'
+  import { store } from '../../_store/store'
+
   export default {
     components: {
       Status,
       StatusHeader
+    },
+    store: () => store,
+    computed: {
+      account: (notification) => notification.account,
+      accountId: (account) => account.id,
+      notificationId: (notification) => notification.id,
+      status: (notification) => notification.status,
+      statusId: (status) => status && status.id,
+      uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
+        return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
+      },
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 0a2978b..6d61b3c 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -7,29 +7,34 @@
          aria-label="{{ariaLabel}}"
          on:recalculateHeight>
   {{#if showHeader}}
-    <StatusHeader :notification :status :isStatusInNotification :timelineType />
+    <StatusHeader :notification :notificationId :status :statusId :timelineType
+                  :account :accountId :uuid :isStatusInNotification />
   {{/if}}
-  <StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
-  <StatusAuthorHandle status="{{originalStatus}}" :isStatusInNotification />
+  <StatusAuthorName :isStatusInNotification :isStatusInOwnThread :originalAccountId
+                    :originalAccount :uuid />
+  <StatusAuthorHandle :isStatusInNotification :originalAccount />
   {{#if !isStatusInOwnThread}}
-    <StatusRelativeDate status="{{originalStatus}}" :isStatusInNotification />
+    <StatusRelativeDate :isStatusInNotification :originalStatus :originalStatusId :uuid />
   {{/if}}
-  <StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
+  <StatusSidebar :isStatusInOwnThread :originalAccount />
   {{#if originalStatus.spoiler_text}}
-    <StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification
+    <StatusSpoiler :isStatusInOwnThread :isStatusInNotification
+                   :originalStatus :uuid
                    on:recalculateHeight />
   {{/if}}
   {{#if !originalStatus.spoiler_text || spoilerShown}}
-    <StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
+    <StatusContent :isStatusInOwnThread :isStatusInNotification
+                   :originalStatus :uuid />
   {{/if}}
   {{#if originalStatus.media_attachments && originalStatus.media_attachments.length}}
-    <StatusMediaAttachments status="{{originalStatus}}" :timelineType :timelineValue
-                            on:recalculateHeight :contextualStatusId />
+    <StatusMediaAttachments :originalStatus :uuid
+                            on:recalculateHeight />
   {{/if}}
   {{#if isStatusInOwnThread}}
-  <StatusDetails status="{{originalStatus}}" />
+  <StatusDetails :originalStatus :originalStatusId />
   {{/if}}
-  <StatusToolbar status="{{originalStatus}}" :isStatusInOwnThread />
+  <StatusToolbar :originalStatus :originalStatusId :originalAccountId
+                 :isStatusInOwnThread :uuid />
 </article>
 
 <style>
@@ -147,26 +152,35 @@
             parentElement.parentElement.localName !== 'button') {
           e.preventDefault()
           e.stopPropagation()
-          goto(`/statuses/${this.get('statusId')}`)
+          goto(`/statuses/${this.get('originalStatusId')}`)
         }
       }
     },
     computed: {
       originalStatus: (status) => status.reblog ? status.reblog : status,
-      statusId: (originalStatus) => originalStatus.id,
-      delegateKey: (statusId) => `status-${statusId}`,
-      contextualStatusId: ($currentInstance, timelineType, timelineValue, status, notification) => {
-        return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
+      originalStatusId: (originalStatus) => originalStatus.id,
+      statusId: (status) => status.id,
+      notificationId: (notification) => notification && notification.id,
+      account: (notification, status) => {
+        return (notification && notification.account) || status.account
       },
+      accountId: (account) => account.id,
       originalAccount: (originalStatus) => originalStatus.account,
-      isStatusInOwnThread: (timelineType, timelineValue, statusId) => {
-        return (timelineType === 'status' || timelineType === 'reply') && timelineValue === statusId
+      originalAccountId: (originalAccount) => originalAccount.id,
+      uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
+        return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId || ''}/${statusId}`
       },
-      isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id,
-      spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
-      visibility: (originalStatus) => originalStatus.visibility,
-      ariaLabel: (originalAccount, visibility) => {
-        return (visibility === 'direct' ? 'Direct message' : 'Status') +
+      delegateKey: (uuid) => `status-${uuid}`,
+      isStatusInOwnThread: (timelineType, timelineValue, originalStatusId) => {
+        return (timelineType === 'status' || timelineType === 'reply') && timelineValue === originalStatusId
+      },
+      isStatusInNotification: (originalStatusId, notification) => {
+        return notification && notification.status &&
+          notification.type !== 'mention' && notification.status.id === originalStatusId
+      },
+      spoilerShown: ($spoilersShown, uuid) => !!$spoilersShown[uuid],
+      ariaLabel: (originalAccount, originalStatus) => {
+        return (originalStatus.visibility === 'direct' ? 'Direct message' : 'Status') +
           ` by ${originalAccount.display_name || originalAccount.username}`
       },
       showHeader: (notification, status, timelineType) => {
diff --git a/routes/_components/status/StatusAuthorHandle.html b/routes/_components/status/StatusAuthorHandle.html
index 1398226..5504d9e 100644
--- a/routes/_components/status/StatusAuthorHandle.html
+++ b/routes/_components/status/StatusAuthorHandle.html
@@ -1,5 +1,5 @@
 <span class="status-author-handle {{isStatusInNotification ? 'status-in-notification' : '' }}">
-  {{'@' + status.account.acct}}
+  {{'@' + originalAccount.acct}}
 </span>
 <style>
   .status-author-handle {
diff --git a/routes/_components/status/StatusAuthorName.html b/routes/_components/status/StatusAuthorName.html
index 35033eb..aa40828 100644
--- a/routes/_components/status/StatusAuthorName.html
+++ b/routes/_components/status/StatusAuthorName.html
@@ -1,8 +1,8 @@
 <a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
-   href="/accounts/{{status.account.id}}"
+   href="/accounts/{{originalAccountId}}"
    focus-key="{{focusKey}}"
 >
-  {{status.account.display_name || status.account.username}}
+  {{originalAccount.display_name || originalAccount.username}}
 </a>
 <style>
   .status-author-name {
@@ -35,8 +35,7 @@
 <script>
   export default {
     computed: {
-      statusId: (status) => status.id,
-      focusKey: (statusId) => `status-author-name-${statusId}`
+      focusKey: (uuid) => `status-author-name-${uuid}`
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusContent.html b/routes/_components/status/StatusContent.html
index e4062b3..6af4919 100644
--- a/routes/_components/status/StatusContent.html
+++ b/routes/_components/status/StatusContent.html
@@ -66,11 +66,11 @@
     },
     store: () => store,
     computed: {
-      massagedContent: (status, $autoplayGifs) => {
-        let content = status.content
+      massagedContent: (originalStatus, $autoplayGifs) => {
+        let content = originalStatus.content
         // emojify
-        if (status.emojis && status.emojis.length) {
-          for (let emoji of status.emojis) {
+        if (originalStatus.emojis && originalStatus.emojis.length) {
+          for (let emoji of originalStatus.emojis) {
             let { shortcode, url, static_url } = emoji
             let urlToUse = $autoplayGifs ? url : static_url
             let shortcodeWithColons = `:${shortcode}:`
@@ -87,8 +87,7 @@
           content = `<p>${content}</p>`
         }
         return content
-      },
-      statusId: (status) => status.id
+      }
     },
     methods: {
       hydrateContent() {
@@ -96,30 +95,30 @@
           return
         }
         let node = this.refs.node
-        let status = this.get('status')
-        let statusId = this.get('statusId')
+        let originalStatus = this.get('originalStatus')
+        let uuid = this.get('uuid')
         let count = 0
         mark('hydrateContent')
-        if (status.tags && status.tags.length) {
+        if (originalStatus.tags && originalStatus.tags.length) {
           let anchorTags = node.querySelectorAll('a[class~=hashtag][href^=http]')
-          for (let tag of status.tags) {
+          for (let tag of originalStatus.tags) {
             for (let anchorTag of anchorTags) {
               if (anchorTag.getAttribute('href').endsWith(`/tags/${tag.name}`)) {
                 anchorTag.setAttribute('href', `/tags/${tag.name}`)
-                anchorTag.setAttribute('focus-key', `status-content-link-${statusId}-${++count}`)
+                anchorTag.setAttribute('focus-key', `status-content-link-${uuid}-${++count}`)
                 anchorTag.removeAttribute('target')
                 anchorTag.removeAttribute('rel')
               }
             }
           }
         }
-        if (status.mentions && status.mentions.length) {
+        if (originalStatus.mentions && originalStatus.mentions.length) {
           let anchorTags = node.querySelectorAll('a[class~=mention][href^=http]')
-          for (let mention of status.mentions) {
+          for (let mention of originalStatus.mentions) {
             for (let anchorTag of anchorTags) {
               if (anchorTag.getAttribute('href') === mention.url) {
                 anchorTag.setAttribute('href', `/accounts/${mention.id}`)
-                anchorTag.setAttribute('focus-key', `status-content-link-${statusId}-${++count}`)
+                anchorTag.setAttribute('focus-key', `status-content-link-${uuid}-${++count}`)
                 anchorTag.removeAttribute('target')
                 anchorTag.removeAttribute('rel')
               }
diff --git a/routes/_components/status/StatusDetails.html b/routes/_components/status/StatusDetails.html
index c50ab77..61ec29d 100644
--- a/routes/_components/status/StatusDetails.html
+++ b/routes/_components/status/StatusDetails.html
@@ -1,14 +1,18 @@
 <div class="status-details">
-  <ExternalLink class="status-absolute-date" href="{{status.url}}" showIcon="true">
+  <ExternalLink class="status-absolute-date" href="{{originalStatus.url}}" showIcon="true">
     <time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
   </ExternalLink>
-  <a class="status-favs-reblogs" href="/statuses/{{statusId}}/reblogs" aria-label="{{favoritesLabel}}">
+  <a class="status-favs-reblogs"
+     href="/statuses/{{originalStatusId}}/reblogs"
+     aria-label="{{favoritesLabel}}">
     <svg>
       <use xlink:href="#fa-retweet"/>
     </svg>
     <span>{{numReblogs}}</span>
   </a>
-  <a class="status-favs-reblogs" href="/statuses/{{statusId}}/favorites" aria-label="{{reblogsLabel}}">
+  <a class="status-favs-reblogs"
+     href="/statuses/{{originalStatusId}}/favorites"
+     aria-label="{{reblogsLabel}}">
     <svg>
       <use xlink:href="#fa-star" />
     </svg>
@@ -91,10 +95,9 @@
 
   export default {
     computed: {
-      statusId: (status) => status.id,
-      createdAtDate: (status) => status.created_at,
-      numReblogs: (status) => status.reblogs_count || 0,
-      numFavs: (status) => status.favourites_count || 0,
+      createdAtDate: (originalStatus) => originalStatus.created_at,
+      numReblogs: (originalStatus) => originalStatus.reblogs_count || 0,
+      numFavs: (originalStatus) => originalStatus.favourites_count || 0,
       formattedDate: (createdAtDate) => formatter.format(new Date(createdAtDate)),
       reblogsLabel: (numReblogs) => {
         // TODO: intl
diff --git a/routes/_components/status/StatusHeader.html b/routes/_components/status/StatusHeader.html
index 9aef76e..907ae26 100644
--- a/routes/_components/status/StatusHeader.html
+++ b/routes/_components/status/StatusHeader.html
@@ -6,9 +6,9 @@
     {{#if timelineType === 'pinned'}}
       Pinned toot
     {{else}}
-      <a href="/accounts/{{account.id}}"
+      <a href="/accounts/{{accountId}}"
          focus-key="{{focusKey}}" >
-        {{account.display_name || ('@' + account.username)}}
+        {{account.display_name || account.username}}
       </a>
       {{#if notification && notification.type === 'reblog'}}
         boosted your status
@@ -68,9 +68,7 @@
 <script>
   export default {
     computed: {
-      statusId: (status) => status && status.id,
-      notificationId: (notification) => notification && notification.id,
-      focusKey: (statusId, notificationId) => `status-header-${statusId}-${notificationId}`,
+      focusKey: (uuid) => `status-header-${uuid}`,
       icon: (notification, status, timelineType) => {
         if (timelineType === 'pinned') {
           return '#fa-thumb-tack'
@@ -80,12 +78,6 @@
           return '#fa-user-plus'
         }
         return '#fa-star'
-      },
-      account: (notification, status) => {
-        if (notification && notification.account) {
-          return notification.account
-        }
-        return status.account
       }
     }
   }
diff --git a/routes/_components/status/StatusMediaAttachments.html b/routes/_components/status/StatusMediaAttachments.html
index 50ddd3d..1ccec6f 100644
--- a/routes/_components/status/StatusMediaAttachments.html
+++ b/routes/_components/status/StatusMediaAttachments.html
@@ -1,4 +1,4 @@
-{{#if status.sensitive || $markMediaAsSensitive}}
+{{#if sensitive }}
 <div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}"
 >
   {{#if sensitiveShown}}
@@ -12,7 +12,7 @@
       </svg>
     </div>
   </button>
-  <MediaAttachments mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
+  <MediaAttachments :mediaAttachments :sensitive />
   {{else}}
     <button type="button"
             class="status-sensitive-media-button"
@@ -31,7 +31,7 @@
   {{/if}}
 </div>
 {{else}}
-  <MediaAttachments mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
+  <MediaAttachments :mediaAttachments :sensitive />
 {{/if}}
 <style>
   .status-sensitive-media-container {
@@ -140,16 +140,16 @@
     },
     store: () => store,
     computed: {
-      mediaAttachments: (status) => status.media_attachments,
-      sensitiveShown: ($sensitivesShown, contextualStatusId) => !!$sensitivesShown[contextualStatusId],
-      statusId: (status) => status.id,
-      delegateKey: (statusId) => `sensitive-${statusId}`,
+      mediaAttachments: (originalStatus) => originalStatus.media_attachments,
+      sensitiveShown: ($sensitivesShown, uuid) => !!$sensitivesShown[uuid],
+      sensitive: (originalStatus, $markMediaAsSensitive) => originalStatus.sensitive || $markMediaAsSensitive,
+      delegateKey: (uuid) => `sensitive-${uuid}`,
     },
     methods: {
       onClickSensitiveMediaButton() {
-        let contextualStatusId = this.get('contextualStatusId')
+        let uuid = this.get('uuid')
         let $sensitivesShown = this.store.get('sensitivesShown') || {}
-        $sensitivesShown[contextualStatusId] = !$sensitivesShown[contextualStatusId]
+        $sensitivesShown[uuid] = !$sensitivesShown[uuid]
         this.store.set({'sensitivesShown': $sensitivesShown})
         this.fire('recalculateHeight')
       }
diff --git a/routes/_components/status/StatusRelativeDate.html b/routes/_components/status/StatusRelativeDate.html
index f122f8c..ecfe4f7 100644
--- a/routes/_components/status/StatusRelativeDate.html
+++ b/routes/_components/status/StatusRelativeDate.html
@@ -1,8 +1,11 @@
 <a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
-   href="/statuses/{{status.id}}"
+   href="/statuses/{{originalStatusId}}"
    focus-key="{{focusKey}}"
 >
-  <time datetime={{createdAtDate}} title="{{relativeDate}}" aria-label="{{relativeDate}} – click to show thread">{{relativeDate}}</time>
+  <time datetime={{createdAtDate}} title="{{relativeDate}}"
+        aria-label="{{relativeDate}} – click to show thread">
+    {{relativeDate}}
+  </time>
 </a>
 <style>
   .status-relative-date {
@@ -32,15 +35,14 @@
 
   export default {
     computed: {
-      createdAtDate: (status) => status.created_at,
-      statusId: (status) => status.id,
+      createdAtDate: (originalStatus) => originalStatus.created_at,
       relativeDate: (createdAtDate) => {
         mark('compute relativeDate')
         let res = timeagoInstance.format(createdAtDate)
         stop('compute relativeDate')
         return res
       },
-      focusKey: (statusId) => `status-relative-date-${statusId}`
+      focusKey: (uuid) => `status-relative-date-${uuid}`
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/status/StatusSidebar.html b/routes/_components/status/StatusSidebar.html
index 41051fa..3b56690 100644
--- a/routes/_components/status/StatusSidebar.html
+++ b/routes/_components/status/StatusSidebar.html
@@ -1,4 +1,4 @@
-<Avatar account={{status.account}}
+<Avatar account={{originalAccount}}
         className="status-sidebar"
         size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
 <style>
diff --git a/routes/_components/status/StatusSpoiler.html b/routes/_components/status/StatusSpoiler.html
index 901065e..aeacd54 100644
--- a/routes/_components/status/StatusSpoiler.html
+++ b/routes/_components/status/StatusSpoiler.html
@@ -1,5 +1,5 @@
 <div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
-  <p>{{status.spoiler_text}}</p>
+  <p>{{originalStatus.spoiler_text}}</p>
 </div>
 <div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
   <button type="button" delegate-key="{{delegateKey}}">
@@ -51,15 +51,14 @@
     },
     store: () => store,
     computed: {
-      spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
-      statusId: (status) => status.id,
-      delegateKey: (statusId) => `spoiler-${statusId}`
+      spoilerShown: ($spoilersShown, uuid) => !!$spoilersShown[uuid],
+      delegateKey: (uuid) => `spoiler-${uuid}`
     },
     methods: {
       onClickSpoilerButton() {
-        let contextualStatusId = this.get('contextualStatusId')
+        let uuid = this.get('uuid')
         let $spoilersShown = this.store.get('spoilersShown')
-        $spoilersShown[contextualStatusId] = !$spoilersShown[contextualStatusId]
+        $spoilersShown[uuid] = !$spoilersShown[uuid]
         this.store.set({'spoilersShown': $spoilersShown})
         this.fire('recalculateHeight')
       }
diff --git a/routes/_components/status/StatusToolbar.html b/routes/_components/status/StatusToolbar.html
index 3e48b9f..2944269 100644
--- a/routes/_components/status/StatusToolbar.html
+++ b/routes/_components/status/StatusToolbar.html
@@ -65,30 +65,30 @@
     store: () => store,
     methods: {
       onFavoriteClick() {
-        let statusId = this.get('statusId')
+        let originalStatusId = this.get('originalStatusId')
         let favorited = this.get('favorited')
-        /* no await */ setFavorited(statusId, !favorited)
+        /* no await */ setFavorited(originalStatusId, !favorited)
       },
       onReblogClick() {
-        let statusId = this.get('statusId')
+        let originalStatusId = this.get('originalStatusId')
         let reblogged = this.get('reblogged')
-        /* no await */ setReblogged(statusId, !reblogged)
+        /* no await */ setReblogged(originalStatusId, !reblogged)
       },
       onReplyClick() {
-        let statusId = this.get('statusId')
-        goto(`/statuses/${statusId}/reply`)
+        let originalStatusId = this.get('originalStatusId')
+        goto(`/statuses/${originalStatusId}/reply`)
       },
       async onOptionsClick() {
-        let statusId = this.get('statusId')
-        let accountId = this.get('accountId')
-        let updateRelationshipPromise = updateProfileAndRelationship(accountId)
+        let originalStatusId = this.get('originalStatusId')
+        let originalAccountId = this.get('originalAccountId')
+        let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
         let dialogs = await importDialogs()
         await updateRelationshipPromise
-        dialogs.showStatusOptionsDialog(statusId)
+        dialogs.showStatusOptionsDialog(originalStatusId)
       }
     },
     computed: {
-      visibility: (status) => status.visibility,
+      visibility: (originalStatus) => originalStatus.visibility,
       reblogLabel: (visibility) => {
         switch (visibility) {
           case 'private':
@@ -112,24 +112,22 @@
       reblogDisabled: (visibility) => {
         return visibility === 'private' || visibility === 'direct'
       },
-      reblogged: (status, $currentStatusModifications) => {
-        if ($currentStatusModifications && status.id in $currentStatusModifications.reblogs) {
-          return $currentStatusModifications.reblogs[status.id]
+      reblogged: (originalStatusId, $currentStatusModifications, originalStatus) => {
+        if ($currentStatusModifications && originalStatusId in $currentStatusModifications.reblogs) {
+          return $currentStatusModifications.reblogs[originalStatusId]
         }
-        return status.reblogged
+        return originalStatus.reblogged
       },
-      favorited: (status, $currentStatusModifications) => {
-        if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
-          return $currentStatusModifications.favorites[status.id]
+      favorited: (originalStatusId, $currentStatusModifications, originalStatus) => {
+        if ($currentStatusModifications && originalStatusId in $currentStatusModifications.favorites) {
+          return $currentStatusModifications.favorites[originalStatusId]
         }
-        return status.favourited
+        return originalStatus.favourited
       },
-      statusId: (status) => status.id,
-      accountId: (status) => status.account.id,
-      favoriteKey: (statusId) => `fav-${statusId}`,
-      reblogKey: (statusId) => `reblog-${statusId}`,
-      replyKey: (statusId) => `reply-${statusId}`,
-      optionsKey: (statusId) => `options-${statusId}`,
+      favoriteKey: (uuid) => `fav-${uuid}`,
+      reblogKey: (uuid) => `reblog-${uuid}`,
+      replyKey: (uuid) => `reply-${uuid}`,
+      optionsKey: (uuid) => `options-${uuid}`,
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 63f6384..1253555 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -244,7 +244,7 @@
         if (activeElement) {
           let focusKey = activeElement.getAttribute('focus-key')
           if (focusKey) {
-            lastFocusedElementSelector = `[focus-key=${focusKey}]`
+            lastFocusedElementSelector = `[focus-key=${JSON.stringify(focusKey)}]`
           }
         }
         console.log('saving focus to ', lastFocusedElementSelector)