feat: microfrontend reviews page rebase

apps/container/package.json

@@ -12,6 +12,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@amcharts/amcharts5": "^5.4.1",
     "@mdi/font": "^7.2.96",
     "@tanstack/query-core": "^5.0.0-rc.4",
     "@tanstack/vue-query": "5.0.0-rc.4",
@@ -25,17 +26,23 @@
     "react-dom": "^18.2.0",
     "services": "*",
     "stores": "*",
+    "utils": "*",
     "vue": "3.3.4",
+    "dayjs": "^1.11.9",
+    "lodash.debounce": "^4.0.8",
     "vue-router": "4.2.5",
     "vue-zustand": "^0.6.0",
-    "vuetify": "3.3.20"
+    "vuetify": "3.3.20",
+    "highcharts": "^11.1.0",
+    "highcharts-vue": "^1.4.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-methods": "^7.22.5",
     "@babel/preset-env": "^7.22.20",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/user-event": "^14.5.1",
     "@testing-library/vue": "^7.0.0",
+    "@types/lodash.debounce": "^4.0.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "@vitejs/plugin-vue": "^4.4.0",
@@ -58,7 +65,8 @@
     "sass": "1.68.0",
     "sass-loader": "13.3.2",
     "typescript": "5.2.2",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "types": "*"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

apps/container/src/App.vue

@@ -2,20 +2,22 @@
   <v-app>
     <AppBar />
     <v-main style="background-color: #f5f5f5">
-      <v-container fluid style="max-width: 1200px">
+      <v-container id="app-container">
         <router-view />
       </v-container>
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import AppBar from '@/layouts/AppBar.vue';
 import { authStore } from 'stores';
 import { onMounted } from 'vue';
 import create from 'vue-zustand';
+
 import router from './router';
 
+import AppBar from '@/layouts/AppBar.vue';
+
 const useAuth = create(authStore);
 const { authenticate } = useAuth();
 
@@ -36,13 +38,30 @@ onMounted(async () => {
 @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700,900&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Ubuntu:100,300,400,500,700,900&display=swap');
+
+* {
+  font-family: Lato, sans-serif;
+}
 html {
   font-family: Lato, sans-serif;
 }
 #app {
   font-family: Lato, sans-serif;
 }
+#app-container {
+  max-width: 1200px;
+}
+
 a {
-  color: #1976d2;
+  text-decoration: none;
+  color: #56cdb7;
+}
+
+p, span {
+  font-size: 14px;
+}
+
+.el-message {
+  z-index: 9999999!important
 }
 </style>

apps/container/src/bootstrap.ts

@@ -2,14 +2,25 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-import '@mdi/font/css/materialdesignicons.css';
-
-import 'vuetify/styles';
+import {
+  VueQueryPlugin,
+  QueryClient as QueryClientVue,
+} from '@tanstack/vue-query';
+import client from './queryClient';
+import { QueryClient } from '@tanstack/query-core';
 
+import { ThemeDefinition } from 'vuetify/lib/framework.mjs';
 import { createVuetify } from 'vuetify';
-
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
+import 'vuetify/styles';
+
+import elementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+
+import '@mdi/font/css/materialdesignicons.css';
+
+import HighchartsVue from 'highcharts-vue'
 
 const theme: ThemeDefinition = {
   dark: false,
@@ -51,16 +62,6 @@ declare global {
   }
 }
 
-import elementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
-import {
-  VueQueryPlugin,
-  QueryClient as QueryClientVue,
-} from '@tanstack/vue-query';
-import client from './queryClient';
-import { QueryClient } from '@tanstack/query-core';
-import { ThemeDefinition } from 'vuetify/lib/framework.mjs';
-
 const queryClient = new QueryClientVue({
   queryCache: client.getQueryCache(),
   defaultOptions: client.getDefaultOptions(),
@@ -73,4 +74,5 @@ createApp(App)
   .use(VueQueryPlugin, {
     queryClient,
   })
+  .use(HighchartsVue as never)
   .mount('#app');

apps/container/src/components/CommentsList.vue

@@ -0,0 +1,153 @@
+<template>
+  <FeedbackAlert
+    v-if="isTeacherDataError"
+    text="Erro ao carregar o(a) professor(a)"
+  />
+  <FeedbackAlert
+    v-if="isFetchingCommentsError"
+    text="Erro ao carregar comentários"
+  />
+  <v-select
+    variant="solo"
+    density="comfortable"
+    v-model="selectedSubject"
+    :items="subjects"
+    hide-details
+    menu-icon="mdi-menu-down"
+  >
+  </v-select>
+  <CenteredLoading class="pt-4" v-if="isLoading" />
+  <div
+    v-else-if="!isLoading && commentsData?.total !== 0"
+    :style="`${!smAndDown && 'max-height:500px ; overflow-y:auto'}`"
+    class="pr-md-4 py-4"
+  >
+    <SingleComment
+      v-for="comment in commentsData?.data"
+      :key="comment._id"
+      :comment="comment"
+      date=""
+      class="mb-5"
+    />
+    <div
+      v-if="commentsData?.total !== commentsData?.data.length"
+      class="text-center px-4"
+    >
+      <v-btn
+        class="w-100 text-body-2"
+        @click="fetchMoreComments"
+        :disabled="!hasMoreComments"
+        :loading="isFetchingMoreComments"
+      >
+        Carregar mais
+      </v-btn>
+    </div>
+  </div>
+  <div v-else class="d-flex align-center flex-column mt-5">
+    <img
+      src="@/assets/comment_not_found.gif"
+      style="width: 100%; max-width: 128px"
+      class="mb-5"
+    />
+    Infelizmente, nenhum comentário foi encontrado 😕
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useDisplay } from 'vuetify';
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
+import { Reviews, Comments } from 'services';
+import SingleComment from './SingleComment.vue';
+import { CenteredLoading } from '@/components/CenteredLoading';
+import { FeedbackAlert } from '@/components/FeedbackAlert';
+const { smAndDown } = useDisplay();
+
+const props = defineProps({
+  teacherId: { type: String, required: true },
+  selectedSubject: { type: String, required: true },
+});
+
+const teacherId = computed(() => props.teacherId);
+
+const emit = defineEmits(['update:selectedSubject']);
+const selectedSubject = computed({
+  get: () => props.selectedSubject,
+  set: (value: string) => {
+    emit('update:selectedSubject', value);
+  },
+});
+
+const page = ref<number>(0);
+
+const {
+  data: teacherData,
+  isFetching: isFetchingTeacher,
+  refetch: refetchTeacher,
+  isError: isTeacherDataError,
+} = useQuery({
+  refetchOnWindowFocus: false,
+  queryKey: ['teacher', teacherId.value],
+  queryFn: () => Reviews.getTeacher(teacherId.value),
+  enabled: !!teacherId.value,
+});
+
+const selectedSubjectId = computed(
+  () =>
+    teacherData.value?.data.specific
+      .filter((subject) => subject._id)
+      .find((subject) => subject._id.name === selectedSubject.value)?._id._id ||
+    '',
+);
+
+const {
+  data: commentsDataPageable,
+  isFetching: isFetchingComments,
+  fetchNextPage: fetchMoreComments,
+  hasNextPage: hasMoreComments,
+  isFetchingNextPage: isFetchingMoreComments,
+  isError: isFetchingCommentsError,
+} = useInfiniteQuery({
+  queryKey: ['comments', teacherId, selectedSubjectId, page],
+  queryFn: ({ pageParam }) =>
+    Comments.get(teacherId.value, selectedSubjectId.value, pageParam),
+  refetchOnWindowFocus: false,
+  enabled: !!teacherId.value,
+  getNextPageParam: (lastPage: { data: { total: number } }, allPages) => {
+    if (lastPage.data.total >= allPages.length * 10) {
+      return allPages.length;
+    }
+  },
+  initialPageParam: 0,
+});
+
+const commentsData = computed(() => {
+  if (!commentsDataPageable.value) return;
+  return {
+    data: commentsDataPageable.value.pages.map((page) => page.data.data).flat(),
+    total: commentsDataPageable.value.pages[0].data.total,
+  };
+});
+
+watch(
+  () => teacherId.value,
+  () => refetchTeacher(),
+);
+
+const subjects = computed(() => {
+  if (!teacherData.value?.data) return [];
+  return [
+    'Todas as matérias',
+    ...teacherData.value.data.specific
+      .filter((subject) => subject._id)
+      .map((subject) => subject._id.name)
+      .sort(),
+  ];
+});
+
+const isLoading = computed(
+  () =>
+    isFetchingTeacher.value ||
+    (isFetchingComments.value && !isFetchingMoreComments.value),
+);
+</script>