Merge branch 'main' into fix/Language-translation-issue

.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"

.pre-commit-config.yaml

@@ -15,6 +15,14 @@ repos:
         args: [--fix, --exit-non-zero-on-fix]
       - id: ruff-format
 
+  - repo: local
+    hooks:
+      - id: run-i18n-checks
+        name: Run i18n Checks
+        entry: python frontend/i18n/check/run_i18n_checks.py
+        language: python
+        stages: [pre-commit]
+
   # - repo: https://github.com/pre-commit/mirrors-prettier
   #   rev: "v4.0.0-alpha.8"
   #   hooks:

.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>
 

README.md

@@ -43,7 +43,7 @@
 - [Our goals](#our-goals)
 - [Contributing](#contributing)
 - [Environment setup](#environment-setup)
-- [Design and accessability](#design-a11y)
+- [Design and accessibility](#design-a11y)
 - [Platform features](#platform-features)
 - [Securely hosted](#securely-hosted)
 - [Community governance](#community-governance)
@@ -261,7 +261,7 @@ The following are the current and planned technologies for [activist.org](https:
 
 <a id="design-a11y"></a>
 
-# Design and accessability [`⇧`](#contents)
+# Design and accessibility [`⇧`](#contents)
 
 <a href="https://www.figma.com/file/I9McFfaLu1RiiWp5IP3YjE/activist_designs?node-id=805%3A231"><img src="https://raw.githubusercontent.com/activist-org/Organization/main/resources/images/logos/FigmaLogo.png" height="50" alt="Public Figma Designs" align="right"></a>
 

frontend/app.vue

@@ -12,6 +12,11 @@
 import { useMagicKeys, whenever } from "@vueuse/core";
 import { commandPaletteData } from "~/types/command-palette";
 
+import { useModalHandlers } from "~/composables/useModalHandlers";
+const { openModal: openModalCommandPalette } = useModalHandlers(
+  "ModalCommandPalette"
+);
+
 useHead({
   titleTemplate: (titleChunk: string | undefined) => {
     return titleChunk ? `${titleChunk} • activist` : "activist";
@@ -29,23 +34,14 @@ const { meta_k, ctrl_k } = useMagicKeys({
   },
 });
 
-const modals = useModals();
-const modalName = "ModalCommandPalette";
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
 whenever(meta_k, () => {
   if (isMacOS) {
-    openModal();
+    openModalCommandPalette();
   }
 });
 whenever(ctrl_k, () => {
   if (!isMacOS) {
-    openModal();
+    openModalCommandPalette();
   }
 });
 </script>

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/card/about/CardAboutEvent.vue

@@ -5,14 +5,9 @@
         <h3 class="responsive-h3 text-left font-display">
           {{ $t("_global.about") }}
         </h3>
-        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-        <ModalEditAboutEvent
-          @closeModal="handleCloseModal"
-          :event="event"
-          :description="event.description"
-          :getInvolved="event.getInvolved"
-          :getInvolvedURL="event.getInvolvedURL"
-          :isOpen="modalIsOpen"
+        <IconEdit
+          @click="openModalEditAboutEvent()"
+          @keydown.enter="openModalEditAboutEvent()"
         />
       </div>
       <div class="flex-col space-y-3">
@@ -63,7 +58,10 @@
 </template>
 
 <script setup lang="ts">
-import CardAbout from "./CardAbout.vue";
+import { useModalHandlers } from "~/composables/useModalHandlers";
+const { openModal: openModalEditAboutEvent } = useModalHandlers(
+  "ModalEditAboutEvent"
+);
 
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
@@ -98,18 +96,4 @@ const expandText = ref(false);
 function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
-
-const modals = useModals();
-const modalName = "ModalEditAboutEvent";
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = () => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
 </script>

frontend/components/card/about/CardAboutGroup.vue

@@ -16,14 +16,9 @@
         <h3 class="responsive-h3 text-left font-display">
           {{ $t("_global.about") }}
         </h3>
-        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-        <ModalEditAboutGroup
-          @closeModal="handleCloseModal"
-          :group="group"
-          :description="texts.description"
-          :getInvolved="texts.getInvolved"
-          :getInvolvedURL="group.getInvolvedURL"
-          :isOpen="modalIsOpen"
+        <IconEdit
+          @click="openModalEditAboutGroup()"
+          @keydown.enter="openModalEditAboutGroup()"
         />
       </div>
       <div class="flex-col space-y-3">
@@ -44,7 +39,7 @@
               'line-clamp-5': !expandText,
             }"
           >
-            {{ texts.description }}
+            {{ group.description }}
           </p>
           <div class="flex justify-center">
             <button
@@ -81,24 +76,20 @@
 </template>
 
 <script setup lang="ts">
-import type { Group, GroupText } from "~/types/entities/group";
 import { IconMap } from "~/types/icon-map";
-import CardAbout from "./CardAbout.vue";
 
-const props = defineProps<{
-  group: Group;
-}>();
-
-const res = await useAsyncData(
-  async () =>
-    await fetchWithOptionalToken(
-      `/entities/group_texts?group_id=${props.group.id}`,
-      {}
-    )
+import { useModalHandlers } from "~/composables/useModalHandlers";
+const { openModal: openModalEditAboutGroup } = useModalHandlers(
+  "ModalEditAboutGroup"
 );
 
-const groupTexts = res.data as unknown as GroupText[];
-const texts = groupTexts[0];
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const groupStore = useGroupStore();
+await groupStore.fetchByID(id);
+
+const { group } = groupStore;
 
 const description = ref();
 const descriptionExpandable = ref(false);
@@ -125,18 +116,4 @@ const expandText = ref(false);
 function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
-
-const modals = useModals();
-const modalName = "ModalEditAboutGroup";
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = () => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
 </script>

frontend/components/card/about/CardAboutOrganization.vue

@@ -20,14 +20,9 @@
         <h3 class="responsive-h3 text-left font-display">
           {{ $t("_global.about") }}
         </h3>
-        <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-        <ModalEditAboutOrganization
-          @closeModal="handleCloseModal"
-          :organization="organization"
-          :description="organization.description"
-          :getInvolved="organization.getInvolved"
-          :getInvolvedURL="organization.getInvolvedURL"
-          :isOpen="modalIsOpen"
+        <IconEdit
+          @click="openModalEditAboutOrganization"
+          @keydown.enter="openModalEditAboutOrganization"
         />
       </div>
       <div class="flex-col space-y-3">
@@ -88,6 +83,11 @@
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
 
+import { useModalHandlers } from "~/composables/useModalHandlers";
+const { openModal: openModalEditAboutOrganization } = useModalHandlers(
+  "ModalEditAboutOrganization"
+);
+
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
 
@@ -121,18 +121,4 @@ const expandText = ref(false);
 function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
-
-const modals = useModals();
-const modalName = "ModalEditAboutOrganization";
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = () => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
 </script>