From 741e9cc4c121af3a950278d08bdd301f68f5160d Mon Sep 17 00:00:00 2001 From: jbell Date: Sun, 13 Oct 2024 17:33:25 -0400 Subject: [PATCH] Update UI, add filtering, comment threads, fill for thumbs up/down buttons if user has already voted on an issue. --- README.md | 13 ++++ package-lock.json | 53 +++++++++++++++ package.json | 1 + src/App.vue | 7 +- src/components/BrandBar.vue | 28 ++++++-- src/components/Dropdown.vue | 15 ++++ src/components/Thread.vue | 21 ++++++ src/components/icons/DownArrow.vue | 21 ++++++ src/components/icons/Filter.vue | 25 +++++++ src/components/icons/ThumbsDown.vue | 6 +- src/components/icons/ThumbsUp.vue | 6 +- src/components/modals/FilterModal.vue | 39 +++++++++++ src/components/modals/IssueModal.vue | 4 +- src/composables/useFetch.ts | 6 +- src/composables/useFilterNotifier.ts | 16 +++++ src/composables/useModal.ts | 4 +- src/composables/useSession.ts | 22 +++++- src/main.ts | 4 +- src/stores/filterStore.ts | 16 +++++ src/types/comment.ts | 17 +++++ src/types/dropdown.ts | 5 ++ src/types/issue.ts | 26 ++++++- src/types/user.ts | 17 +++++ src/utils/eventBus.ts | 31 +++++++++ src/views/HomeView.vue | 98 +++++++++++++++++++++------ vite.config.ts | 5 +- 26 files changed, 463 insertions(+), 43 deletions(-) create mode 100644 src/components/Dropdown.vue create mode 100644 src/components/Thread.vue create mode 100644 src/components/icons/DownArrow.vue create mode 100644 src/components/icons/Filter.vue create mode 100644 src/components/modals/FilterModal.vue create mode 100644 src/composables/useFilterNotifier.ts create mode 100644 src/stores/filterStore.ts create mode 100644 src/types/comment.ts create mode 100644 src/types/dropdown.ts create mode 100644 src/utils/eventBus.ts diff --git a/README.md b/README.md index 33895ab..9f144b3 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,16 @@ +# Environment + +Make sure you've set up the database before you do this. This project uses PostgreSQL with Diesel on the backend. + +I use [localtunnel](https://github.com/localtunnel/localtunnel) for my local development environment. You'll need to set up a Telegram bot using BotFather, and take the following steps: + +* Change the `bot-username` prop on the `LoginWidget` tag within `BrandBar.vue` to the username of the bot you set up with BotFather. +* Send the command `/setdomain` to BotFather, and select the bot you set up previously. +* Run localtunnel with `lt --port 5173`. +* Send the domain provided by localtunnel to BotFather. + +After these steps have been completed, you will be able to authenticate with Telegram via stored sessions. + # Vue 3 + TypeScript + Vite This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` diff --git a/src/components/BrandBar.vue b/src/components/BrandBar.vue index 0b2345b..a755df7 100644 --- a/src/components/BrandBar.vue +++ b/src/components/BrandBar.vue @@ -3,7 +3,21 @@ - +
+ +
+ +
+
@@ -13,21 +27,27 @@ import type { LoginWidgetUser } from "vue-tg"; import ColoredHeader from "./ColoredHeader.vue"; import { useFetch } from "../composables/useFetch.ts"; import { useSession } from "../composables/useSession.ts"; +import { AuthenticateRequest, AuthenticateResponse } from "../types/user.ts"; +import { computed } from "vue"; const { post } = useFetch(); -const { setSessionId } = useSession(); +const { setSessionId, setUsername, getUsername } = useSession(); const handleUserAuth = async (user: LoginWidgetUser) => { - const sessionId = await post("/user/authenticate", + const response = await post("/sessions/authenticate", { + user_id: user.id, auth_date: user.auth_date, username: user.username, first_name: user.first_name, last_name: user.last_name, photo_url: user.photo_url }); - setSessionId(sessionId.session_id); + setSessionId(response.session_id); + setUsername(user.username); } + +const username = computed(() => getUsername()); \ No newline at end of file diff --git a/src/components/Thread.vue b/src/components/Thread.vue new file mode 100644 index 0000000..61b77fb --- /dev/null +++ b/src/components/Thread.vue @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/DownArrow.vue b/src/components/icons/DownArrow.vue new file mode 100644 index 0000000..88564ab --- /dev/null +++ b/src/components/icons/DownArrow.vue @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/Filter.vue b/src/components/icons/Filter.vue new file mode 100644 index 0000000..9e76afe --- /dev/null +++ b/src/components/icons/Filter.vue @@ -0,0 +1,25 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/ThumbsDown.vue b/src/components/icons/ThumbsDown.vue index d501ca7..8560b94 100644 --- a/src/components/icons/ThumbsDown.vue +++ b/src/components/icons/ThumbsDown.vue @@ -1,7 +1,7 @@ + + + + \ No newline at end of file diff --git a/src/components/modals/IssueModal.vue b/src/components/modals/IssueModal.vue index 5ff61c0..75173e1 100644 --- a/src/components/modals/IssueModal.vue +++ b/src/components/modals/IssueModal.vue @@ -11,7 +11,7 @@ -