fix: site state cleared from refactors

src/components/page/EditPageForm.vue

@@ -81,7 +81,7 @@ export default defineComponent({
     const content = ref('')
     const working = ref(false)
 
-    const opts = computed(() => (new Map(site.value.categories.map((c) => ([c.slug, c.name])))))
+    const opts = computed(() => (new Map(site.value.pageCategories.map((c) => ([c.slug, c.name])))))
     const category = ref('')
 
     const rules = computed(() => ({

src/components/profile/characters/CharacterListCard.vue

@@ -25,7 +25,7 @@
 import Card from '@/components/layout/Card.vue'
 import { useCharacters } from '@/state/characters'
 import { Character } from '@/state/characters/Character'
-import { toSite } from '@/state/site'
+import { Site } from '@/state/site/Site'
 import { useSites } from '@/state/sites'
 import { computed, defineComponent } from 'vue'
 
@@ -41,7 +41,7 @@ export default defineComponent({
     const { characters } = useCharacters()
     const { userSites } = useSites()
     const character = computed(() => characters.value.get(props.id) || new Character('...'))
-    const site = computed(() => userSites.value.find((site) => site.id === character.value.site) || toSite())
+    const site = computed(() => userSites.value.find((site) => site.id === character.value.site) || new Site())
     return { character, site }
   }
 })

src/components/site/SideBar.vue

@@ -42,7 +42,7 @@
           </li>
         </ul>
         <div
-          v-for="cat in site.categories"
+          v-for="cat in site.pageCategories"
           :key="cat.slug"
           class="category"
         >
@@ -85,7 +85,7 @@ export default defineComponent({
       return pages.value.filter((a) => (a.category === topic.slug))
     }
 
-    const noCategory = computed(() => (pages.value.filter((a) => (!site.value.categories.find((c) => (c.slug === a.category))))))
+    const noCategory = computed(() => (pages.value.filter((a) => (!site.value.pageCategories.find((c) => (c.slug === a.category))))))
 
     return { site, pages, inTopic, noCategory }
   }

src/components/site/SiteCategoriesCard.vue

@@ -4,7 +4,7 @@
       {{ $t('site.meta.categories.title') }}
     </h1>
     <div
-      v-for="cat in site.categories"
+      v-for="cat in site.pageCategories"
       :key="cat.slug"
     >
       {{ cat.name }} <MaterialButton
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { useSite, updateSite } from '@/state/site'
+import { useSite, updateSite, Page } from '@/state/site'
 import { PageCategory } from '@/state/site/PageCategory'
 import { toMekanismiURI } from '@/utils/contentFormat'
 import { computed, defineComponent, ref } from 'vue'
@@ -52,14 +52,17 @@ export default defineComponent({
     const dropCategory = async (slug: string) => {
       updateSite({
         id: site.value.id,
-        categories: site.value.categories.filter((c) => (c.slug !== slug))
+        pageCategories: site.value.pageCategories.filter((c) => (c.slug !== slug))
       })
     }
 
     const addCategory = async () => {
       updateSite({
         id: site.value.id,
-        categories: [...site.value.categories, new PageCategory(newCatName.value)]
+        pageCategories: [
+          ...site.value.pageCategories,
+          new PageCategory(newCatName.value)
+        ]
       })
     }
 

src/components/site/SiteMeta.vue

@@ -48,14 +48,15 @@
 
 <script lang="ts">
 import { useAuth } from '@/state/authz'
-import { Site, SiteData, updateSite } from '@/state/site'
+import { Site, SiteDoc } from '@/state/site/Site'
 import { computed, ComputedRef, defineComponent, inject, Ref, ref } from 'vue'
 import Select from '../form/Select.vue'
 import Column from '../layout/Column.vue'
 import Icon from '../material/Icon.vue'
 import MaterialButton from '../material/MaterialButton.vue'
 import Textfield from '../form/Textfield.vue'
 import Toggle from '../material/Toggle.vue'
+import { useSite } from '@/state/site'
 
 export default defineComponent({
   name: 'SiteMeta',
@@ -68,7 +69,8 @@ export default defineComponent({
     Select
   },
   setup () {
-    const site = inject('site') as ComputedRef<Site>
+    const { site, updateSite } = useSite()
+
     const localName = ref('')
     const localBadge = ref('')
     const badge = computed({
@@ -93,7 +95,7 @@ export default defineComponent({
     })
     const siteFeatures = ref({ players: site.value.usePlayers })
     async function update () {
-      const data: SiteData = { id: site.value.id }
+      const data: SiteDoc = { id: site.value.id }
       if (localName.value) data.name = localName.value
       if (localBadge.value) data.systemBadge = localBadge.value
       if (localDescription.value) data.description = localDescription.value

src/components/site/header/SiteHeaderMenu.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { SiteClass, useSite } from '@/state/site'
+import { useSite } from '@/state/site'
 import MaterialMenu from '@/components/material/MaterialMenu.vue'
 import { useAuth } from '@/state/authz'
 import { MenuItem } from '@/utils/uiInterfaces'
@@ -20,21 +20,18 @@ export default defineComponent({
     const { user } = useAuth()
     const { site } = useSite()
 
-    const siteClass = computed(() => {
-      return new SiteClass(site.value)
-    })
-    const disabled = computed(() => (!siteClass.value.canEdit(user.value.uid)))
+    const disabled = computed(() => (!site.value.hasEditor(user.value.uid)))
 
     const menuItems = computed(() => {
       const items: MenuItem[] = []
-      if (siteClass.value.usePlayers) {
+      if (site.value.usePlayers) {
         items.push({
           text: i18n.t('site.keeper.title'),
           icon: 'keeper',
           to: '/site/' + site.value.id + '/keeper'
         })
       }
-      if (siteClass.value.isOwner(user.value.uid)) {
+      if (site.value.hasOwner(user.value.uid)) {
         items.push({
           text: i18n.t('site.meta.title'),
           icon: 'equalizer',

src/components/sites/RecentChangesCard.vue

@@ -37,12 +37,13 @@
 </template>
 
 <script lang="ts">
-import { PageLogEntry } from '@/state/pagelog'
-import { Site } from '@/state/site'
-import { computed, defineComponent, PropType } from 'vue'
+import { usePagelog } from '@/state/pagelog'
+import { Site } from '@/state/site/Site'
+import { computed, defineComponent } from 'vue'
 import Card from '../layout/Card.vue'
 import Icon from '../material/Icon.vue'
 import { toDisplayString } from '@/utils/firebaseTools'
+import { useSites } from '@/state/sites'
 
 export default defineComponent({
   name: 'WikiIndex',
@@ -51,22 +52,25 @@ export default defineComponent({
     Icon
   },
   props: {
-    site: {
-      type: Object as PropType<Site>,
-      required: true
-    },
-    pagelog: {
-      type: Array as PropType<Array<PageLogEntry>>,
+    siteid: {
+      type: String,
       required: true
     }
   },
   setup (props) {
+    const { publicSites, userSites } = useSites()
+    const { recent } = usePagelog()
+
+    const site = computed(() => {
+      return [...publicSites.value, ...userSites.value].find(s => s.id === props.siteid) || new Site()
+    })
+
     const changes = computed(() => {
-      const arr = props.pagelog.filter((v) => (v.siteid === props.site.id))
+      const arr = recent.value.filter((v) => (v.siteid === props.siteid))
       if (arr.length > 3) arr.length = 3
       return arr
     })
-    return { changes, toDisplayString }
+    return { changes, toDisplayString, site }
   }
 })
 </script>

src/components/sites/RecentChangesList.vue

@@ -5,8 +5,7 @@
       :key="site.id"
     >
       <RecentChangesCard
-        :site="site"
-        :pagelog="changes"
+        :siteid="site.id"
       />
     </div>
   </div>
@@ -32,7 +31,7 @@ export default defineComponent({
     const sitelist = computed(() => {
       const sites = [...publicSites.value, ...userSites.value]
       return sites.sort((a, b) => {
-        b.compareChangeTime(a)
+        a.compareChangeTime(b)
         return 0
       })
     })

src/components/sites/players/SitePlayersList.vue

@@ -29,9 +29,9 @@
 
 <script lang="ts">
 import { useAuthors } from '@/state/authors'
-import { Site, useSite } from '@/state/site'
+import { useSite } from '@/state/site'
 import { Player } from '@/utils/uiInterfaces'
-import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue'
+import { computed, ComputedRef, defineComponent, ref } from 'vue'
 import Card from '../../layout/Card.vue'
 import MaterialButton from '../../material/MaterialButton.vue'
 import MaterialSelect from '../../material/MaterialSelect.vue'
@@ -40,17 +40,12 @@ import PlayerRowItem from './PlayerRowItem.vue'
 export default defineComponent({
   name: 'SitePlayersList',
   components: { Card, MaterialSelect, MaterialButton, PlayerRowItem },
-  props: {
-    site: {
-      type: Object as PropType<Site>,
-      required: true
-    }
-  },
-  setup (props) {
+  setup () {
     const { authors } = useAuthors()
     const { addPlayer } = useSite()
+    const { site } = useSite()
     const playerList:ComputedRef<Array<Player>> = computed(() => (
-      props.site.players?.map((uid) => (
+      site.value.players?.map((uid) => (
         {
           uid: uid,
           nick: authors.value.find((a) => (a.uid === uid))?.nick || 'anonymous'

src/state/Storable.ts

@@ -1,12 +1,12 @@
-import { DocumentData, Timestamp, serverTimestamp, FieldValue } from '@firebase/firestore'
+import { DocumentData, Timestamp, serverTimestamp } from '@firebase/firestore'
 
 /**
  * A class that can be stored in Firestore. We expect each document to have a createdAt and updatedAt field.
  */
 export interface StorableDoc {
   id: string
   createdAt?: Timestamp
-  updatedAt?: Timestamp|FieldValue
+  updatedAt?: Timestamp
 }
 
 /**

src/state/site/Site.ts

@@ -26,12 +26,31 @@ export interface SiteDoc extends StorableDoc {
   pageCategories?: PageCategory[]
 }
 
+export interface SiteModel extends SiteDoc {
+  name: string
+  description: string
+  owners: string[]
+  players: string[]
+  usePlayers: boolean
+  hidden: boolean
+  system: string
+  systemBadge: string
+  theme: string
+  latestPages: PageLogEntry[]
+  pageCategories: PageCategory[]
+  readonly updatedAt: Timestamp | undefined
+  hasOwner: (uid: string) => boolean
+  hasPlayer: (uid: string) => boolean
+  hasEditor: (uid: string) => boolean
+  hasCategories: () => boolean
+}
+
 /**
  * A Mekanismi Site object, as a Firestore document.
  *
  * Helper methods are provided for reactive attributes and for converting to/from Firestore DocumentData.
  */
-export class Site extends Storable {
+export class Site extends Storable implements SiteModel {
     name = ''
     description = ''
     owners: string[] = []
@@ -123,4 +142,8 @@ export class Site extends Storable {
     hasEditor (uid:string): boolean {
       return this.hasOwner(uid) || this.hasPlayer(uid)
     }
+
+    hasCategories (): boolean {
+      return Array.isArray(this.pageCategories) && this.pageCategories.length > 0
+    }
 }