feat: add user flist page

frontend/src/App.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
+import { provide, ref } from "vue";
+import { LoggedInUser } from "./types/User";
 
+const loggedInUser = ref<string>("");
+const updateLoggedInUser = (user: string) => {
+  loggedInUser.value = user;
+};
+provide<LoggedInUser>("loggedInUser", {
+  loggedInUser,
+  updateLoggedInUser,
+});
 </script>
 
 <template>

frontend/src/components/CreateFlist.vue

@@ -177,7 +177,7 @@ const visible = ref<boolean>(false);
 const create = async () => {
   try {
     await api.post("/v1/api/fl", flist.value);  
-    router.push("Follow");
+    router.push("/flists");
   } catch (error: any) {
     console.error("Failed to create flist", error);
     toast.error(error.response?.data || "error occured");

frontend/src/components/Home.vue

@@ -19,10 +19,10 @@
         style="top: 10%; left: 0; height: fit-content"
         v-model="drawer"
         :rail="rail"
-        @click="rail = !rail"
       >
         <v-list>
-          <v-list-item title="Users" nav>
+          <v-list-item nav >
+            <v-list-item-title class="text-h6"> Users</v-list-item-title>
             <template v-slot:append>
               <v-btn variant="text" @click.stop="rail = !rail">
                 <v-icon>{{
@@ -34,10 +34,12 @@
           <v-divider v-if="!rail"</v-divider>
           <v-list-item
             v-for="userName in userNameList"
-            title="userName"
             :key="userName"
             @click="username = userName"
-          ></v-list-item>
+          ><v-list-item-title>
+            {{ userName }}
+          </v-list-item-title>
+          </v-list-item>
         </v-list>
       </v-navigation-drawer>
       <v-container
@@ -47,6 +49,9 @@
       >
         <!-- table containe flists -->
         <v-data-table :items="filteredFlist" :headers="tableHeader" hover>
+          <template #item.last_modified="{value}">
+            {{ new Date(value*1000).toString() }}
+          </template>
         </v-data-table>
         <!-- <v-table class="elevation-1">
               <thead>

frontend/src/components/Login.vue

@@ -86,17 +86,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { inject, ref } from "vue";
 import image from "./../assets/side.png";
 import logo from "./../assets/logo.png";
 import whiteLogo from "../assets/logo_white.png";
 import { useRouter } from "vue-router";
-import { User } from "../types/User.ts";
+import { LoggedInUser, User } from "../types/User.ts";
 import axios from "axios";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 
 const user = ref<User>({ username: "", password: "" });
+const loggedInUser = inject<LoggedInUser>("loggedInUser");
+
 const router = useRouter();
 const api = axios.create({
   baseURL: "http://localhost:4000",
@@ -105,12 +107,15 @@ const api = axios.create({
   },
 });
 const visible = ref<boolean>(false);
-
 const login = async () => {
   try {
     const response = await api.post("/v1/api/signin", user.value);
     const token = response.data.access_token;
     sessionStorage.setItem("token", token);
+    if (loggedInUser) {
+      const { updateLoggedInUser } = loggedInUser;
+      updateLoggedInUser(user.value.username);
+    }
     router.push("/flists");
   } catch (error: any) {
     console.error("Failed to login", error);

frontend/src/components/UserFlist.vue

@@ -1,11 +1,66 @@
 <template>
   <v-app>
     <Navbar />
-    <v-main> </v-main>
+    <v-main>
+      <v-data-table
+        v-if="loggedInUser"
+        :items="currentUserFlists"
+        :headers="tableHeader"
+        hover
+      >
+        <template #item.last_modified="{ value }">
+          {{ new Date(value * 1000).toString() }}
+        </template>
+        <template #item.progress="{ value }">
+          <v-progress-linear
+            :model-value="value"
+            color="purple-darken-1"
+            class="w-75"
+          >
+          </v-progress-linear>
+          <span> {{ value }}% </span>
+        </template>
+      </v-data-table>
+    </v-main>
     <Footer />
   </v-app>
 </template>
 <script setup lang="ts">
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
+import { FlistsResponseInterface } from "../types/Flists.ts";
+import { computed, inject } from "vue";
+import { onMounted, ref } from "vue";
+import axios from "axios";
+import { LoggedInUser } from "../types/User.ts";
+
+const tableHeader = [
+  { title: "Name", key: "name" },
+  { title: "Is File", key: "is_file" },
+  { title: "Last Modified", key: "last_modified" },
+  { title: "Download Link", key: "path_uri", sortable: false },
+  { title: "Progress", key: "progress" },
+];
+const loggedInUser = inject<LoggedInUser>("loggedInUser");
+var flists = ref<FlistsResponseInterface>({});
+const api = axios.create({
+  baseURL: "http://localhost:4000",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+onMounted(async () => {
+  try {
+    flists.value = (await api.get<FlistsResponseInterface>("/v1/api/fl")).data;
+  } catch (error) {
+    console.error("Failed to fetch flists", error);
+  }
+});
+
+const currentUserFlists = computed(() => {
+  return loggedInUser && loggedInUser.loggedInUser
+    ? flists.value[loggedInUser.loggedInUser.value]
+    : [];
+});
 </script>

frontend/src/types/User.ts

@@ -1,5 +1,11 @@
+import { Ref } from "vue";
+
 export interface User {
-    username: string;
-    password: string;
-  }
-
+  username: string;
+  password: string;
+}
+
+export interface LoggedInUser {
+  loggedInUser: Ref<string>;
+  updateLoggedInUser: (user: string) => void;
+}