fix: works for logged in users

src/components/home/WikiChangesItem.vue

@@ -1,62 +1,48 @@
 <template>
   <div class="wikiChangesItem">
-    <router-link :to="`/site/${siteid}/page/${pageid}`">
+    <router-link :to="`/site/${siteid}/page/${page.id}`">
       <Icon
         class="badge"
         medium
         dark
-        :name="badge + '-logo'"
+        :name="site.system + '-logo'"
       />
       <div class="site">
         <div class="time">
-          {{ change }}
+          {{ toDisplayString(site.updatedAt) }}
         </div>
-        {{ siteName }}
+        {{ site.name }}
       </div>
       <div class="page">
-        {{ name }}
+        {{ page.name || site.name }}
       </div>
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
+import { Site } from '@/state/site/Site'
 import { useSites } from '@/state/sites'
 import { computed, defineComponent } from 'vue'
 import Icon from '../material/Icon.vue'
+import { toDisplayString } from '@/utils/firebaseTools'
 /**
  * A simple welcome card for anonymous visitors
  */
 export default defineComponent({
   name: 'WikiChangesItem',
   components: { Icon },
   props: {
-    name: {
-      type: String,
-      required: true
-    },
-    pageid: {
-      type: String,
-      required: true
-    },
     siteid: {
       type: String,
       required: true
-    },
-    change: {
-      type: String,
-      required: true
-    },
-    badge: {
-      type: String,
-      required: false,
-      default: 'mekanismi'
     }
   },
   setup (props) {
-    const { publicSites } = useSites()
-    const siteName = computed(() => (publicSites.value.find((a) => (a.id === props.siteid))?.name || props.siteid))
-    return { siteName }
+    const { visibleSites } = useSites()
+    const site = computed(() => (visibleSites.value.find((a) => (a.id === props.siteid))) || new Site())
+    const page = computed(() => site.value.latestPages[0] || { id: props.siteid, name: '', author: '' })
+    return { site, page, toDisplayString }
   }
 })
 </script>

src/components/home/mekanismi/MekanismiCard.vue

@@ -6,13 +6,10 @@
     <h1>{{ $t('home.changesCard.title') }}</h1>
     <WikiChangesItem
       v-for="site in topThreeSites"
-      :key="site.name"
-      :name="site.latestPages ? site.latestPages[0].name : site.name"
-      :pageid="site.latestPages ? site.latestPages[0].id : '-'"
-      :badge="site.systemBadge"
-      :change="toDisplayString(site.lastUpdate)"
+      :key="site.id"
       :siteid="site.id"
     />
+    {{ topThreeSites }}
     <Toolbar style="margin-bottom: -8px; margin-top: -8px; margin-right: -8px">
       <SpacerDiv />
       <Button
@@ -32,8 +29,7 @@ import Card from '@/components/layout/Card.vue'
 import SpacerDiv from '@/components/layout/SpacerDiv.vue'
 import Toolbar from '@/components/layout/Toolbar.vue'
 import { useUxActions } from '@/composables/useUxActions'
-import { useSites, sortByLastUpdate } from '@/state/sites'
-import { toDisplayString } from '@/utils/firebaseTools'
+import { useSites } from '@/state/sites'
 import { defineComponent, computed } from 'vue'
 import WikiChangesItem from '../WikiChangesItem.vue'
 
@@ -44,15 +40,17 @@ export default defineComponent({
   name: 'MekanismiCard',
   components: { Card, WikiChangesItem, Toolbar, SpacerDiv, Button },
   setup () {
-    const { visibleSites } = useSites()
+    const { publicSites, userSites } = useSites()
     const { reroute } = useUxActions()
 
     const topThreeSites = computed(() => {
-      const arr = visibleSites.value.slice().sort((a, b) => (sortByLastUpdate(a, b)))
-      if (arr.length > 3) arr.length = 3
-      return arr
+      const allSites = [...publicSites.value, ...userSites.value].sort(
+        (a, b) => b.compareChangeTime(a)
+      )
+      return allSites.slice(0, 3)
     })
-    return { topThreeSites, toDisplayString, reroute }
+
+    return { topThreeSites, reroute }
   }
 })
 </script>

src/components/site/AddSiteForm.vue

@@ -53,7 +53,7 @@ import Textfield from '../form/Textfield.vue'
 import Column from '../layout/Column.vue'
 import Toggle from '../material/Toggle.vue'
 import { siteTypes } from '@/state/site'
-import { SiteData } from '@/state/site/Site'
+import { SiteDoc } from '@/state/site/Site'
 import { createSite } from '@/state/sites'
 import useVuelidate from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
@@ -89,7 +89,8 @@ export default defineComponent({
       working.value = true
       if (v.value.name.$error) return
 
-      const siteData:SiteData = {
+      const siteData:SiteDoc = {
+        id: '',
         name: name.value,
         description: description.value,
         hidden: !visible.value,

src/components/sites/RecentChangesList.vue

@@ -30,11 +30,11 @@ export default defineComponent({
     })
 
     const sitelist = computed(() => {
-      const sites = new Map(publicSites.value.map((s) => ([s.id, s])))
-      userSites.value.forEach((s) => {
-        if (!sites.has(s.id)) sites.set(s.id, s)
+      const sites = [...publicSites.value, ...userSites.value]
+      return sites.sort((a, b) => {
+        b.compareChangeTime(a)
+        return 0
       })
-      return Array.from(sites.values()).sort((a, b) => ((b.lastUpdate?.seconds || 0) - (a.lastUpdate?.seconds || 0)))
     })
 
     return { sitelist, changes }

src/state/site/Site.ts

@@ -1,7 +1,13 @@
 import { logDebug } from '@/utils/eventLogger'
-import { DocumentData } from '@firebase/firestore'
+import { DocumentData, Timestamp } from '@firebase/firestore'
 import { Storable, StorableDoc } from '../Storable'
 
+interface PageLogEntry {
+  name: string
+  id: string
+  author: string
+}
+
 /**
  * Site specific extra fields we want to store in Firestore, with types.
  */
@@ -15,6 +21,7 @@ export interface SiteDoc extends StorableDoc {
   system?: string
   systemBadge?: string
   theme?: string
+  latestPages?: PageLogEntry[]
 }
 
 /**
@@ -32,6 +39,8 @@ export class Site extends Storable {
     system = ''
     private _systemBadge = '' // Deprecated, use system, and theme instead
     theme = ''
+    private _latestPages:PageLogEntry[] = []
+    private _lastUpdate: Timestamp | undefined
 
     constructor (site: string|SiteDoc = '', data?: SiteDoc) {
       super(site as StorableDoc, data)
@@ -61,13 +70,26 @@ export class Site extends Storable {
       this.usePlayers = doc.usePlayers || false
       this.hidden = doc.hidden || true
 
+      if (Array.isArray(doc.latestPages)) this._latestPages = doc.latestPages
+      if (doc.lastUpdate) this._lastUpdate = doc.lastUpdate
+
       // Backwards compatibility, remove in future when all sites have the system field set
       const s = doc?.system || doc?.systemBadge || ''
       this.system = s
       this._systemBadge = s
       this.theme = s
     }
 
+    get latestPages (): PageLogEntry[] {
+      return this._latestPages
+    }
+
+    get updatedAt (): Timestamp | undefined {
+      const d = super.updatedAt
+      if (typeof d === 'undefined') return this._lastUpdate
+      return d
+    }
+
     get systemBadge (): string {
       logDebug('Site.systemBadge is deprecated, use Site.system and Site.theme instead')
       return this._systemBadge
@@ -81,7 +103,7 @@ export class Site extends Storable {
     }
 
     hasOwner (uid:string): boolean {
-      return this.owners && this.owners.includes(uid)
+      return Array.isArray(this.owners) && this.owners.includes(uid)
     }
 
     hasPlayer (uid:string): boolean {

src/state/sites/index.ts

@@ -1,7 +1,7 @@
 import { computed, ComputedRef, ref } from 'vue'
 import { collection, getFirestore, onSnapshot, orderBy, query, addDoc } from '@firebase/firestore'
 import { useAuth } from '../authz'
-import { SiteData, Site } from '@/state/site/Site'
+import { SiteDoc, Site } from '@/state/site/Site'
 
 const fullSiteList = ref(new Map<string, Site>())
 
@@ -20,15 +20,15 @@ const userSites = computed(() => {
   const sites = Array.from(fullSiteList.value.values())
   const { user } = useAuth()
   const uid = user.value.uid
-  const filteredSites = sites.filter((a) => (a.canEdit(uid)))
+  const filteredSites = sites.filter((a) => (a.hasEditor(uid)))
   return filteredSites
 })
 
 const visibleSites = computed(() => {
   const { user } = useAuth()
   return allSites.value.filter((val) => (
     !val.hidden ||
-    val.canEdit(user.value.uid)
+    val.hasEditor(user.value.uid)
   ))
 })
 
@@ -41,33 +41,24 @@ async function subscribeToSites () {
   const q = query(collection(db, 'sites'), orderBy('lastUpdate', 'desc'))
   unsubscribe = onSnapshot(q, (snap) => {
     snap.docChanges().forEach((change) => {
-      fullSiteList.value.set(change.doc.id, new Site(change.doc.id, change.doc.data()))
+      fullSiteList.value.set(change.doc.id, new Site(change.doc.id, change.doc.data() as SiteDoc))
     })
   })
 }
 
-export function sortByLastUpdate (a:Site, b:Site): number {
-  if (a.lastUpdate && b.lastUpdate) {
-    return a.lastUpdate.seconds < b.lastUpdate.seconds ? 1 : -1
-  }
-  return 0
-}
-
-export async function createSite (data: SiteData): Promise<string> {
+export async function createSite (data: SiteDoc): Promise<string> {
   const { user } = useAuth()
 
   data.owners = [user.value.uid]
 
-  const site = new Site(data.id, data)
-  // Flush the id field for now. It will be generated by addDoc, and filled by fetch/subscribe for the entity used by the UI
-  site.id = ''
+  const site = new Site(data)
 
   const sitedoc = await addDoc(
     collection(
       getFirestore(),
       'sites'
     ),
-    site.toJSON()
+    site.docData
   )
 
   return sitedoc.id