Merge pull request #992 from activist-org/update-frontend-deps

Update all frontend dependencies and fix warnings

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,6 +7,7 @@ Thank you for your pull request! 🚀
 <!-- Please replace the empty checkboxes [] below with checked ones [x] accordingly. -->
 
 - [] This pull request is on a [separate branch](https://docs.github.com/en/get-started/quickstart/github-flow) and not the main branch
+- [] I have run the tests for the backend and frontend depending on what's needed for my changes as described in the [testing section of the contributing guide](https://github.com/activist-org/activist/blob/main/CONTRIBUTING.md#testing)
 
 ---
 

.github/workflows/pr_ci_frontend.yaml

@@ -41,5 +41,5 @@ jobs:
         if: always()
         uses: borales/actions-yarn@v4
         with:
-          cmd: eslint . --ext .js,.vue
+          cmd: eslint .
           dir: "frontend"

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "eslint.validate": ["javascript", "typescript", "vue"],
+  "eslint.useFlatConfig": true,
   "typescript.tsdk": "./frontend/node_modules/typescript/lib"
 }

CONTRIBUTING.md

@@ -326,10 +326,24 @@ exit
 
 ### Frontend
 
-Running frontend tests locally is currently WIP.
+Please check the formatting of your code using Prettier and run the static type check with eslint before pull requests with the following command:
+
+```bash
+# Within ./frontend:
+yarn format
+yarn lint
+```
+
+You can further run the following commands for TypeScript type checks on the frontend:
+
+```bash
+# Within ./frontend:
+yarn run postinstall
+yarn typecheck
+```
 
 > [!NOTE]
-> When working on the frontend, activist recommends manual typechecking. From within the `frontend` directory run `yarn run postinstall` followed by `yarn nuxi typecheck` to confirm your changes are type-safe. Existing TS errors may be ignored. PRs to fix these are always welcome!
+> Pre-existing TS errors may be ignored. If you need assistance then feel free to open a PR and we'll support!
 
 <a id="linting"></a>
 

frontend/assets/css/tailwind.css

@@ -136,19 +136,19 @@
   }
 
   .style-cta {
-    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text  text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
+    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
   }
 
   .style-cta-disabled {
-    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-cta-orange/50  fill-light-text/50 text-light-text/50 shadow-none   dark:border-dark-cta-orange/50 dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange/50 dark:text-dark-cta-orange/50;
+    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-cta-orange/50 fill-light-text/50 text-light-text/50 shadow-none dark:border-dark-cta-orange/50 dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange/50 dark:text-dark-cta-orange/50;
   }
 
   .style-cta-secondary {
     @apply focus-brand border border-light-text bg-light-layer-2 fill-light-text text-light-text hover:bg-light-highlight-darker active:bg-light-layer-2 dark:border-dark-text dark:bg-dark-layer-2 dark:fill-dark-text dark:text-dark-text dark:hover:bg-dark-highlight-lighter dark:active:bg-dark-layer-2;
   }
 
   .style-cta-secondary-disabled {
-    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-layer-2/75 fill-light-text/50 text-light-text/50 shadow-none  dark:border-dark-text/50 dark:bg-dark-layer-2 dark:fill-dark-text/50 dark:text-dark-text/50;
+    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-layer-2/75 fill-light-text/50 text-light-text/50 shadow-none dark:border-dark-text/50 dark:bg-dark-layer-2 dark:fill-dark-text/50 dark:text-dark-text/50;
   }
 
   .style-learn {

frontend/components/btn/action/BtnActionDropdown.vue

@@ -40,7 +40,7 @@
             @keypress.enter="dropdownOptionsCallback(o)"
             tabindex="0"
             :class="{
-              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40  dark:text-dark-cta-orange':
+              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40 dark:text-dark-cta-orange':
                 active,
               'text-light-text dark:text-dark-text': !active,
             }"

frontend/components/card/CardConnect.vue

@@ -112,6 +112,7 @@
 
 <script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
@@ -128,16 +129,19 @@ const id = typeof paramsID === "string" ? paramsID : undefined;
 const idGroup = typeof paramsIDGroup === "string" ? paramsIDGroup : undefined;
 
 const organizationStore = useOrganizationStore();
-let organization: Organization;
-const group = useGroupStore();
+const groupStore = useGroupStore();
 const eventStore = useEventStore();
+
+let organization: Organization;
+let group: Group;
 let event: Event;
 
 if (props.pageType == "organization") {
   await organizationStore.fetchByID(id);
   organization = organizationStore.organization;
 } else if (props.pageType == "group") {
-  await group.fetchByID(idGroup);
+  await groupStore.fetchByID(idGroup);
+  group = groupStore.group;
 } else if (props.pageType == "event") {
   await eventStore.fetchByID(id);
   event = eventStore.event;

frontend/components/card/CardOrgApplicationVote.vue

@@ -93,14 +93,9 @@ export interface Props {
  */
 export interface Emits {
   /**
-   * The up vote casted event.
+   * The up and down vote casted events.
    */
-  (event: "up-vote"): void;
-
-  /**
-   * The down vote casted event.
-   */
-  (event: "down-vote"): void;
+  (event: "up-vote" | "down-vote"): void;
 }
 
 defineEmits<Emits>();

frontend/components/card/CardTopicSelection.vue

@@ -255,6 +255,7 @@ const selectedTopicTags = computed(() => {
 
 const topics = computed((): TopicsTag[] => {
   return [
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     ...selectedTopicTags.value.sort((a, b) => a.value.localeCompare(b.value)),
     ...GLOBAL_TOPICS.filter((topic) => !isActiveTopic(topic.value)).sort(
       (a, b) => a.value.localeCompare(b.value)

frontend/components/dropdown/DropdownCreate.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 import type { MenuSelector } from "~/types/menu/menu-selector";
 
 defineProps<{

frontend/components/dropdown/DropdownInfo.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 import type { MenuSelector } from "~/types/menu/menu-selector";
 
 defineProps<{

frontend/components/dropdown/DropdownLanguage.vue

@@ -30,7 +30,7 @@
 import { MenuItem } from "@headlessui/vue";
 import type { LocaleObject } from "@nuxtjs/i18n";
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 
 defineProps<{
   location?: DropdownLocation;

frontend/components/dropdown/DropdownTheme.vue

@@ -30,7 +30,7 @@
 import { MenuItem } from "@headlessui/vue";
 import { computed } from "vue";
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 
 defineProps<{
   location?: DropdownLocation;

frontend/components/dropdown/DropdownUserOptions.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
-import { DropdownLocation } from "~/types/location";
+import type { DropdownLocation } from "~/types/location";
 import type { MenuSelector } from "~/types/menu/menu-selector";
 
 defineProps<{

frontend/components/feed/Feed.vue

@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { BreakpointMap } from "~/types/breakpoint-map";
+import type { Group } from "~/types/entities/group";
 
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
@@ -25,7 +26,7 @@ const { organization } = organizationStore;
 
 const feedItemNames = computed<string[]>(() => {
   if (organization && organization.groups) {
-    return organization.groups.map((group) => group.name);
+    return organization.groups.map((group: Group) => group.name);
   } else {
     return [""];
   }
@@ -34,7 +35,8 @@ const feedItemNames = computed<string[]>(() => {
 const feedItemURLs = computed<string[]>(() => {
   if (organization && organization.groups) {
     return organization.groups.map(
-      (group) => `/organizations/${group.organization.id}/groups/${group.id}`
+      (group: Group) =>
+        `/organizations/${group.organization.id}/groups/${group.id}`
     );
   } else {
     return [""];

frontend/components/grid/GridGitHubContributors.vue

@@ -56,14 +56,20 @@
 <script setup lang="ts">
 const localePath = useLocalePath();
 
-interface GithubContributor {
+interface GitHubContributor {
   avatarUrl: string;
   htmlUrl: string;
   loginID: string;
 }
 
+interface GitHubContributorResponse {
+  avatar_url: string;
+  html_url: string;
+  login: string;
+}
+
 const isLoading = ref<boolean>(false);
-const githubData = ref<GithubContributor[]>([]);
+const githubData = ref<GitHubContributor[]>([]);
 const currentPage = ref<number>(1);
 const hasMoreContributors = ref<boolean>(true);
 
@@ -84,7 +90,7 @@ async function fetchDataFromGitHubAPI(page: number, numPerPage: number = 30) {
     }
 
     githubData.value = githubData.value.concat(
-      data.map((item: any) => {
+      data.map((item: GitHubContributorResponse) => {
         return {
           avatarUrl: item.avatar_url,
           htmlUrl: item.html_url,

frontend/components/header/HeaderAppPage.vue

@@ -74,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
@@ -89,16 +90,19 @@ const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
 
 const organizationStore = useOrganizationStore();
-let organization: Organization;
-const group = useGroupStore();
+const groupStore = useGroupStore();
 const eventStore = useEventStore();
+
+let organization: Organization;
+let group: Group;
 let event: Event;
 
 if (props.pageType === "organization") {
   await organizationStore.fetchByID(id);
   organization = organizationStore.organization;
 } else if (props.pageType === "group") {
-  await group.fetchByID(id);
+  await groupStore.fetchByID(id);
+  group = groupStore.group;
 } else if (props.pageType === "event") {
   await eventStore.fetchByID(id);
   event = eventStore.event;

frontend/components/media/MediaMap.vue

@@ -9,7 +9,7 @@
 import MapLibreGlDirections, {
   layersFactory,
 } from "@maplibre/maplibre-gl-directions";
-import maplibregl, { Map } from "maplibre-gl";
+import maplibregl, { type Map } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 const props = defineProps<{
@@ -39,6 +39,7 @@ function isWebglSupported() {
       }
     } catch (e) {
       // WebGL is supported, but disabled.
+      console.log(e);
     }
     return false;
   }

frontend/components/media/image-carousel/MediaImageCarousel.vue

@@ -69,7 +69,7 @@ const handleCloseModal = () => {
 
 <style>
 swiper-container::part(bullet) {
-  @apply focus-brand  bg-light-cta-orange/80 dark:bg-dark-cta-orange/80;
+  @apply focus-brand bg-light-cta-orange/80 dark:bg-dark-cta-orange/80;
 }
 
 swiper-container::part(bullet-active) {

frontend/components/menu/MenuItemLabel.vue

@@ -37,11 +37,11 @@
 const props = defineProps<{
   isSideLeftMenu?: boolean | undefined;
   isButton: boolean;
-  handlerClick?: () => void | undefined;
+  handlerClick?: () => void;
   iconName?: string | undefined;
   ariaLabel?: string | undefined;
   label: string;
-  active: any;
+  active: boolean;
 }>();
 
 const sidebar = useSidebar();

frontend/components/menu/MenuSearchResult.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
   <div
     @mouseleave="showTooltip = false"
     ref="quickActionBtnAndMenu"

frontend/components/modal/ModalSharePage.vue

@@ -314,6 +314,7 @@ const shareOptions = {
   bcc: [""],
   subject: getEntityType()?.subject || "Share this!",
   body:
+    // eslint-disable-next-line no-constant-binary-expression
     `${getEntityType()?.body}   ${getEntityType()?.url}` || "Check this out!",
   redirectUri: "https://www.domain.com/",
   domain: "https://mas.to",

frontend/components/modal/edit/about/ModalEditAboutGroup.vue

@@ -57,8 +57,10 @@ const props = defineProps<{
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
 
-const group = useGroupStore();
-await group.fetchByID(id);
+const groupStore = useGroupStore();
+await groupStore.fetchByID(id);
+
+const { group } = groupStore;
 
 const formData = ref({
   description: group.description,

frontend/components/modal/qr-code/ModalQRCode.vue

@@ -177,11 +177,12 @@ const availableFormats: Ref<string[]> = computed(() => {
 });
 
 function drawInlineSVG(
-  svgElement: any,
+  svgElement: Element,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ctx: any,
   width: number,
   height: number,
-  callback: any
+  callback: () => void
 ) {
   const svgURL = new XMLSerializer().serializeToString(svgElement);
   const img = new Image();

frontend/components/page/PageBreadcrumbs.vue

@@ -75,6 +75,7 @@
 
 <script setup lang="ts">
 import { validate as isValidUUID } from "uuid";
+import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 
@@ -91,9 +92,11 @@ const id = typeof paramsID === "string" ? paramsID : undefined;
 const idGroup = typeof paramsIDGroup === "string" ? paramsIDGroup : undefined;
 
 const organizationStore = useOrganizationStore();
-let organization: Organization;
-const group = useGroupStore();
+const groupStore = useGroupStore();
 const eventStore = useEventStore();
+
+let organization: Organization;
+let group: Group;
 let event: Event;
 
 if (
@@ -107,7 +110,8 @@ if (
   organization = organizationStore.organization;
 } else if (url.includes("/organizations/") && url.includes("/groups/")) {
   pageType = "group";
-  await group.fetchByID(idGroup);
+  await groupStore.fetchByID(idGroup);
+  group = groupStore.group;
 } else if (
   url.includes("/events/") &&
   !url.includes("/organizations/") &&