refactor: typos, renaming and code structure

apps/container/package.json

@@ -26,7 +26,6 @@
     "react-dom": "^18.2.0",
     "services": "*",
     "stores": "*",
-    "consts": "*",
     "utils": "*",
     "vue": "3.3.4",
     "dayjs": "^1.11.9",

apps/container/src/components/CommentsList.vue

@@ -113,11 +113,8 @@ const {
     Comments.get(teacherId.value, selectedSubjectId.value, pageParam),
   refetchOnWindowFocus: false,
   enabled: !!teacherId.value,
-  getNextPageParam: (lastPage, allPages) => {
-    if (
-      (lastPage as { data: { total: number } }).data.total >=
-      allPages.length * 10
-    ) {
+  getNextPageParam: (lastPage: { data: { total: number } }, allPages) => {
+    if (lastPage.data.total >= allPages.length * 10) {
       return allPages.length;
     }
   },

apps/container/src/components/ConceptsHorizontalChart.vue

@@ -12,40 +12,37 @@
     >
       <span
         class="grading-segment"
-        :class="grade.count < unthrustableThreshold ? 'unthrustable' : ''"
+        :class="grade.count < untrustableThreshold ? 'unthrustable' : ''"
         :style="{
           background:
-            conceptsColor[grade.conceito as keyof typeof conceptsColor],
+            conceptsColor[grade.conceito],
           width: `${grades[grade.conceito]}%`,
         }"
       >
       </span>
     </el-tooltip>
 
     <span
-      v-if="gradeData.count < unthrustableThreshold"
+      v-if="gradeData.count < untrustableThreshold"
       class="low-samples text-body-2"
       >Dados sem muitas amostras</span
     >
   </div>
 </template>
 
 <script setup lang="ts">
-import { conceptsColor } from 'consts';
 import { ConceptData, SubjectSpecific } from 'types';
-import { transformConceptDataToObject } from 'utils';
+import { transformConceptDataToObject, conceptsColor } from 'utils';
 import { computed, PropType } from 'vue';
 
 const props = defineProps({
   gradeData: { type: Object as PropType<SubjectSpecific>, required: true },
 });
 
-const unthrustableThreshold = 10;
+const untrustableThreshold = 10;
 
 const orderedDistribution = computed(() => {
-  const distribution: ConceptData[] = JSON.parse(
-    JSON.stringify(props.gradeData.distribution),
-  );
+  const distribution: ConceptData[] = props.gradeData.distribution;
   return distribution.sort((a, b) => a.conceito.localeCompare(b.conceito));
 });
 

apps/container/src/components/ConceptsPieChart.vue

@@ -5,26 +5,23 @@
 </template>
 
 <script setup lang="ts">
-import { conceptsColor } from 'consts';
+import { conceptsColor } from 'utils';
 import { Chart } from 'highcharts-vue';
 import { computed, PropType } from 'vue';
+import { Concept } from 'types';
 
-type Grades = {
-  [x: string]: number;
-};
-
+type Grades = Record<string, number>
 const props = defineProps({
   grades: { type: Object as PropType<Grades>, required: true },
 });
 
 const grades = computed(() => {
   const data = Object.keys(props.grades).map((key) => ({
-    name: key,
+    name: key as Concept,
     y: props.grades[key],
   }));
   return data;
 });
-
 const chartOptions = {
   chart: {
     plotBackgroundColor: null,
@@ -49,9 +46,7 @@ const chartOptions = {
         enabled: true,
         format: '<b>{point.name}</b>: {point.percentage:.1f} %',
       },
-      colors: grades.value.map(
-        (grade) => conceptsColor[grade.name as keyof typeof conceptsColor],
-      ),
+      colors: grades.value.map((grade) => conceptsColor[grade.name]),
       showInLegend: true,
     },
   },

apps/container/src/components/ToReviewEnrollment.vue → apps/container/src/components/PendingReviewEnrollment.vue

@@ -59,9 +59,8 @@
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue';
 import { Enrollment } from 'services';
-import { conceptsColor } from 'consts';
 import ReviewDialog from './ReviewDialog.vue';
-import { checkEAD } from 'utils';
+import { checkEAD, conceptsColor, formatSeason } from 'utils';
 const showDialog = ref(false);
 
 const conceptStyle = computed(() => ({
@@ -91,7 +90,7 @@ const subjectType = computed(() =>
 const tags = computed(() => {
   const tags = [
     subjectType.value,
-    `Q${props.enrollment.quad} ${props.enrollment.year}`,
+    formatSeason(props.enrollment.year, props.enrollment.quad),
   ];
   isEAD.value && tags.push('EAD');
   return tags;

apps/container/src/components/ToReviewEnrollmentList.vue → apps/container/src/components/PendingReviewEnrollmentsList.vue

@@ -14,7 +14,7 @@
           :class="`pa-0 py-2 ${index % 2 === 0 ? '' : 'pl-md-4'}`"
           :key="enrollment._id"
         >
-          <ToReviewEnrollment class="mt-4" :enrollment="enrollment" />
+          <PendingReviewEnrollment class="mt-4" :enrollment="enrollment" />
         </v-col>
       </v-row>
     </v-container>
@@ -25,7 +25,7 @@
 import { PaperCard } from '@/components/PaperCard';
 import { Enrollment, Enrollments } from 'services';
 import { useQuery } from '@tanstack/vue-query';
-import ToReviewEnrollment from './ToReviewEnrollment.vue';
+import PendingReviewEnrollment from './PendingReviewEnrollment.vue';
 import { FeedbackAlert } from '@/components/FeedbackAlert';
 import { computed } from 'vue';
 
@@ -70,7 +70,8 @@ const filteredAndSeparatedEnrollments = computed(() => {
           acc.push({ ...enrollment, pratica: null });
       }
       if (enrollment.pratica?.name) {
-        !enrollment.comments?.includes('pratica') && acc.push({ ...enrollment, teoria: null });
+        !enrollment.comments?.includes('pratica') &&
+          acc.push({ ...enrollment, teoria: null });
       }
       return acc;
     }, [] as Enrollment[])

apps/container/src/components/ReviewDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <FeedbackAlert
-    v-if="isFetchingTearcherEnrollmentError"
+    v-if="isFetchingTeacherEnrollmentError"
     text="Erro ao carregar suas informações desta disciplina"
   />
   <v-dialog v-model="showDialog" maxWidth="1200">
@@ -55,7 +55,7 @@
               max-rows="5"
               no-resize
               auto-grow
-              :loading="isFetchingTearcherEnrollment"
+              :loading="isFetchingTeacherEnrollment"
             />
             <div class="w-100 d-flex justify-end">
               <v-btn
@@ -86,7 +86,7 @@ import { PropType, computed, ref } from 'vue';
 import { Comments, Enrollment, Enrollments } from 'services';
 
 import { PaperCard } from '@/components/PaperCard';
-import { conceptsColor } from 'consts';
+import { conceptsColor } from 'utils';
 import CommentsList from '@/components/CommentsList.vue';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 import { ElMessage } from 'element-plus';
@@ -142,9 +142,9 @@ const showDialog = computed({
 });
 
 const {
-  data: tearcherEnrollment,
-  isFetching: isFetchingTearcherEnrollment,
-  isError: isFetchingTearcherEnrollmentError,
+  data: teacherEnrollment,
+  isFetching: isFetchingTeacherEnrollment,
+  isError: isFetchingTeacherEnrollmentError,
 } = useQuery({
   refetchOnWindowFocus: false,
   queryKey: ['enrollments', 'get', enrollmentId],
@@ -153,12 +153,18 @@ const {
 });
 
 const comment = ref<string>('');
+const teacherEnrollmentCommentTeoria = computed(
+  () => teacherEnrollment.value?.data.teoria?.comment?.comment,
+);
+const teacherEnrollmentCommentPratica = computed(
+  () => teacherEnrollment.value?.data.pratica?.comment?.comment,
+);
 const userCommentMessage = computed({
   get: () => {
     const currentComment =
       subjectType.value === 'prática'
-        ? tearcherEnrollment.value?.data.pratica?.comment?.comment
-        : tearcherEnrollment.value?.data.teoria?.comment?.comment;
+        ? teacherEnrollmentCommentPratica.value
+        : teacherEnrollmentCommentTeoria.value;
 
     return comment.value ? comment.value : currentComment ?? '';
   },
@@ -171,16 +177,16 @@ const disableMutateComment = computed(() => {
   return (
     !userCommentMessage.value ||
     [
-      tearcherEnrollment.value?.data.teoria?.comment?.comment,
-      tearcherEnrollment.value?.data.pratica?.comment?.comment,
+      teacherEnrollmentCommentTeoria.value,
+      teacherEnrollmentCommentPratica.value,
     ].includes(userCommentMessage.value)
   );
 });
 
 const hasUserComment = computed(() =>
   subjectType.value === 'prática'
-    ? !!tearcherEnrollment.value?.data.pratica?.comment?.comment
-    : !!tearcherEnrollment.value?.data.teoria?.comment?.comment,
+    ? !!teacherEnrollmentCommentPratica.value
+    : !!teacherEnrollmentCommentTeoria.value,
 );
 
 const queryClient = useQueryClient();
@@ -208,9 +214,10 @@ const { mutate: mutateCreate, isPending: isCreatingComment } = useMutation({
 const { mutate: mutateUpdate, isPending: isUpdatingComment } = useMutation({
   mutationFn: () =>
     Comments.update({
-      id: tearcherEnrollment.value?.data.teoria?.comment
-        ? tearcherEnrollment.value?.data.teoria?.comment?._id
-        : tearcherEnrollment.value?.data.pratica?.comment?._id ?? '',
+      id:
+        teacherEnrollment.value?.data.teoria?.comment?._id ??
+        teacherEnrollment.value?.data.pratica?.comment?._id ??
+        '',
       comment: comment.value,
     }),
   onSuccess: () => {

apps/container/src/components/SearchBar.vue

@@ -19,9 +19,7 @@
     >
     </v-text-field>
     <v-list
-      v-if="
-        processedResults.length && (router.currentRoute.value.query.q as string)
-      "
+      v-if="processedResults.length && router.currentRoute.value.query.q"
       class="results"
       elevation="1"
     >
@@ -71,6 +69,7 @@ import { Reviews } from 'services';
 import { computed, onMounted, ref, watch } from 'vue';
 import { FeedbackAlert } from '@/components/FeedbackAlert';
 import router from '@/router';
+import { SearchTeacherItem, SearchSubjectItem } from 'types';
 
 const searchTerm = ref('');
 
@@ -81,12 +80,14 @@ const clear = () => {
   });
 };
 
+const query = computed(() => router.currentRoute.value.query.q as string);
+
 onMounted(() => {
-  searchTerm.value = router.currentRoute.value.query.q as string;
+  searchTerm.value = query.value;
 });
 
 watch(
-  () => router.currentRoute.value.query.q as string,
+  () => query.value,
   (q) => {
     searchTerm.value = q;
   },
@@ -113,15 +114,9 @@ const {
   refetch: refetchTeachers,
 } = useQuery({
   refetchOnWindowFocus: false,
-  queryKey: [
-    'reviews',
-    'search',
-    router.currentRoute.value.query.q as string,
-    'teachers',
-  ],
-  queryFn: () =>
-    Reviews.searchTeachers(router.currentRoute.value.query.q as string),
-  enabled: !!(router.currentRoute.value.query.q as string),
+  queryKey: ['reviews', 'search', query.value, 'teachers'],
+  queryFn: () => Reviews.searchTeachers(query.value),
+  enabled: !!query.value,
 });
 
 const {
@@ -131,15 +126,9 @@ const {
   refetch: refetchSubjects,
 } = useQuery({
   refetchOnWindowFocus: false,
-  queryKey: [
-    'reviews',
-    'search',
-    router.currentRoute.value.query.q as string,
-    'subjects',
-  ],
-  queryFn: () =>
-    Reviews.searchSubjects(router.currentRoute.value.query.q as string),
-  enabled: !!(router.currentRoute.value.query.q as string),
+  queryKey: ['reviews', 'search', query.value, 'subjects'],
+  queryFn: () => Reviews.searchSubjects(query.value),
+  enabled: !!query.value,
 });
 
 const useSearch = debounce(() => {
@@ -157,16 +146,19 @@ const search = (e: InputEvent) => {
   useSearch();
 };
 
-const processedResults = computed(() => [
-  ...(searchResultsTeachers.value?.data.data.map((result) => ({
-    name: result?.name,
-    id: result._id,
-    type: result._id && 'teacher',
-  })) || []),
-  ...(searchResultsSubjects.value?.data.data.map((result) => ({
-    name: result?.name,
+const mapSearchResults = (
+  type: string,
+  results?: SearchTeacherItem[] | SearchSubjectItem[],
+) => {
+  return results?.map((result: SearchTeacherItem | SearchSubjectItem) => ({
+    name: result.name,
     id: result._id,
-    type: 'subject',
-  })) || []),
+    type: type,
+  })) || [];
+};
+
+const processedResults = computed(() => [
+  ...mapSearchResults('teacher', searchResultsTeachers.value?.data.data),
+  ...mapSearchResults('subject', searchResultsSubjects.value?.data.data),
 ]);
 </script>