From 6e8c7460a2dca37eb2264c3b3788d1baf6517108 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Wed, 15 Jun 2022 19:13:33 +0300
Subject: [PATCH] Add lists listing page

---
 src/boot/routes.js                     |  2 ++
 src/components/list_card/list_card.js  | 12 ++++++++++++
 src/components/list_card/list_card.vue |  9 +++++++++
 src/components/lists/lists.js          | 17 +++++++++++++++++
 src/components/lists/lists.vue         | 18 ++++++++++++++++++
 src/i18n/en.json                       |  3 +++
 6 files changed, 61 insertions(+)
 create mode 100644 src/components/list_card/list_card.js
 create mode 100644 src/components/list_card/list_card.vue
 create mode 100644 src/components/lists/lists.js
 create mode 100644 src/components/lists/lists.vue

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 6eab04a4..715b394e 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -20,6 +20,7 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import Lists from 'components/lists/lists.vue'
 import ListTimeline from 'components/list_timeline/list_timeline.vue'
 
 export default (store) => {
@@ -71,6 +72,7 @@ export default (store) => {
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
     { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
+    { name: 'lists', path: '/lists', component: Lists },
     { name: 'list-timeline', path: '/lists/:id', component: ListTimeline }
   ]
 
diff --git a/src/components/list_card/list_card.js b/src/components/list_card/list_card.js
new file mode 100644
index 00000000..42e56aff
--- /dev/null
+++ b/src/components/list_card/list_card.js
@@ -0,0 +1,12 @@
+const ListCard = {
+  props: [
+    'list'
+  ],
+  methods: {
+    listLink (id) {
+      return '/lists/' + id
+    }
+  }
+}
+
+export default ListCard
diff --git a/src/components/list_card/list_card.vue b/src/components/list_card/list_card.vue
new file mode 100644
index 00000000..7d6363ba
--- /dev/null
+++ b/src/components/list_card/list_card.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <router-link :to="listLink(list.id)">
+      {{ list.title }}
+    </router-link>
+  </div>
+</template>
+
+<script src="./list_card.js"></script>
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
new file mode 100644
index 00000000..bb67fafb
--- /dev/null
+++ b/src/components/lists/lists.js
@@ -0,0 +1,17 @@
+import ListCard from '../list_card/list_card.vue'
+
+const Lists = {
+  components: {
+    ListCard
+  },
+  created () {
+    this.$store.dispatch('startFetchingLists')
+  },
+  computed: {
+    lists () {
+      return this.$store.state.api.lists
+    }
+  }
+}
+
+export default Lists
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
new file mode 100644
index 00000000..da0f126f
--- /dev/null
+++ b/src/components/lists/lists.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="settings panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('lists.lists') }}
+      </div>
+    </div>
+    <div class="panel-body">
+      <ListCard
+        v-for="list in lists.slice().reverse()"
+        :key="list"
+        :list="list"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./lists.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ec2882c5..65198863 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -946,6 +946,9 @@
     "error_sending_message": "Something went wrong when sending the message.",
     "empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
   },
+  "lists": {
+    "lists": "Lists"
+  },
   "file_type": {
     "audio": "Audio",
     "video": "Video",