btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: composables for i18n and toast

Browse Source
This commit is contained in:
liyasthomas
2021-11-19 22:49:11 +05:30
parent 26429466e9
commit 47661de974
45 changed files with 579 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/hoppscotch-app/components/teams/Add.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.new')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<input
@@ -13,15 +13,15 @@
@keyup.enter="addNewTeam"
/>
<label for="selectLabelTeamAdd">
{{ $t("action.label") }}
{{ t("action.label") }}
</label>
</div>
</template>
<template #footer>
<span>
<ButtonPrimary :label="$t('action.save')" @click.native="addNewTeam" />
<ButtonPrimary :label="t('action.save')" @click.native="addNewTeam" />
<ButtonSecondary
:label="$t('action.cancel')"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -30,18 +30,16 @@
</template>
<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
import { ref } from "@nuxtjs/composition-api"
import { pipe } from "fp-ts/function"
import * as TE from "fp-ts/TaskEither"
import { createTeam } from "~/helpers/backend/mutations/Team"
import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
app: { i18n },
$toast,
} = useContext()
const t = useI18n()
const t = i18n.t.bind(i18n)
const toast = useToast()
defineProps<{
show: boolean
@@ -63,7 +61,7 @@ const addNewTeam = () =>
(err) => {
// err is of type "invalid_name" | GQLError<Err>
if (err === "invalid_name") {
$toast.error(`${t("team.name_length_insufficient")}`)
toast.error(`${t("team.name_length_insufficient")}`)
} else {
// Handle GQL errors (use err obj)
}

59
packages/hoppscotch-app/components/teams/Edit.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.edit')" @close="hideModal">
<template #body>
<div class="flex flex-col px-2">
<div class="flex relative">
@@ -14,17 +14,17 @@
@keyup.enter="saveTeam"
/>
<label for="selectLabelTeamEdit">
{{ $t("action.label") }}
{{ t("action.label") }}
</label>
</div>
<div class="flex pt-4 flex-1 justify-between items-center">
<label for="memberList" class="p-4">
{{ $t("team.members") }}
{{ t("team.members") }}
</label>
<div class="flex">
<ButtonSecondary
svg="user-plus"
:label="$t('team.invite')"
:label="t('team.invite')"
filled
@click.native="
() => {
@@ -39,7 +39,7 @@
class="flex flex-col items-center justify-center"
>
<SmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-if="
@@ -70,14 +70,14 @@
w-16
inline-flex
"
:alt="$t('empty.members')"
:alt="`${t('empty.members')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.members") }}
{{ t("empty.members") }}
</span>
<ButtonSecondary
svg="user-plus"
:label="$t('team.invite')"
:label="t('team.invite')"
@click.native="
() => {
emit('invite-team')
@@ -93,7 +93,7 @@
>
<input
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('team.email')"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="member.email"
readonly
@@ -116,7 +116,7 @@
py-2
px-4
"
:placeholder="$t('team.permissions')"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="
typeof member.role === 'string'
@@ -160,7 +160,7 @@
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeExistingTeamMember(member.userID)"
@@ -174,15 +174,15 @@
class="flex flex-col items-center"
>
<i class="mb-4 material-icons">help_outline</i>
{{ $t("error.something_went_wrong") }}
{{ t("error.something_went_wrong") }}
</div>
</div>
</template>
<template #footer>
<span>
<ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
<ButtonPrimary :label="t('action.save')" @click.native="saveTeam" />
<ButtonSecondary
:label="$t('action.cancel')"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -191,13 +191,7 @@
</template>
<script setup lang="ts">
import {
computed,
ref,
toRef,
useContext,
watch,
} from "@nuxtjs/composition-api"
import { computed, ref, toRef, watch } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either"
import {
GetTeamDocument,
@@ -215,6 +209,9 @@ import {
} from "~/helpers/backend/mutations/Team"
import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
import { useGQLQuery } from "~/helpers/backend/GQLClient"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const emit = defineEmits<{
(e: "hide-modal"): void
@@ -230,11 +227,7 @@ const props = defineProps<{
editingTeamID: string
}>()
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const name = toRef(props.editingTeam, "name")
@@ -361,9 +354,9 @@ const removeExistingTeamMember = async (userID: string) => {
props.editingTeamID
)()
if (E.isLeft(removeTeamMemberResult)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
} else {
$toast.success(`${t("team.member_removed")}`)
toast.success(`${t("team.member_removed")}`)
}
}
@@ -375,7 +368,7 @@ const saveTeam = async () => {
name.value
)()
if (E.isLeft(updateTeamNameResult)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
} else {
roleUpdates.value.forEach(async (update) => {
const updateMemberRoleResult = await updateTeamMemberRole(
@@ -384,18 +377,18 @@ const saveTeam = async () => {
update.role
)()
if (E.isLeft(updateMemberRoleResult)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(updateMemberRoleResult.left.error)
}
})
}
hideModal()
$toast.success(`${t("team.saved")}`)
toast.success(`${t("team.saved")}`)
} else {
return $toast.error(`${t("team.name_length_insufficient")}`)
return toast.error(`${t("team.name_length_insufficient")}`)
}
} else {
return $toast.error(`${t("empty.team_name")}`)
return toast.error(`${t("empty.team_name")}`)
}
}

81
packages/hoppscotch-app/components/teams/Invite.vue
View File

@@ -1,14 +1,14 @@
<template>
<SmartModal v-if="show" :title="$t('team.invite')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
<template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
<div class="flex flex-col max-w-md justify-center items-center">
<SmartIcon class="h-6 text-accent w-6" name="users" />
<h3 class="my-2 text-center text-lg">
{{ $t("team.we_sent_invite_link") }}
{{ t("team.we_sent_invite_link") }}
</h3>
<p class="text-center">
{{ $t("team.we_sent_invite_link_description") }}
{{ t("team.we_sent_invite_link_description") }}
</p>
</div>
<div
@@ -56,7 +56,7 @@
<div v-else class="flex flex-col px-2">
<div class="flex flex-1 justify-between items-center">
<label for="memberList" class="pb-4 px-4">
{{ $t("team.pending_invites") }}
{{ t("team.pending_invites") }}
</label>
</div>
<div class="divide-y divide-dividerLight border-divider border rounded">
@@ -85,7 +85,7 @@
py-2
px-4
"
:placeholder="`${$t('team.email')}`"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="invitee.inviteeEmail"
readonly
@@ -98,7 +98,7 @@
py-2
px-4
"
:placeholder="`${$t('team.permissions')}`"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="
typeof invitee.inviteeRole === 'string'
@@ -110,7 +110,7 @@
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeInvitee(invitee.id)"
@@ -132,7 +132,7 @@
"
>
<span class="text-center">
{{ $t("empty.pending_invites") }}
{{ t("empty.pending_invites") }}
</span>
</div>
<div
@@ -140,18 +140,18 @@
class="flex flex-col p-4 items-center"
>
<i class="mb-4 material-icons">help_outline</i>
{{ $t("error.something_went_wrong") }}
{{ t("error.something_went_wrong") }}
</div>
</div>
</div>
<div class="flex pt-4 flex-1 justify-between items-center">
<label for="memberList" class="p-4">
{{ $t("team.invite_tooltip") }}
{{ t("team.invite_tooltip") }}
</label>
<div class="flex">
<ButtonSecondary
svg="plus"
:label="$t('add.new')"
:label="t('add.new')"
filled
@click.native="addNewInvitee"
/>
@@ -166,7 +166,7 @@
<input
v-model="invitee.key"
class="bg-transparent flex flex-1 py-2 px-4"
:placeholder="$t('team.email')"
:placeholder="`${t('team.email')}`"
:name="'invitee' + index"
autofocus
/>
@@ -188,7 +188,7 @@
py-2
px-4
"
:placeholder="$t('team.permissions')"
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="
typeof invitee.value === 'string'
@@ -232,7 +232,7 @@
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="removeNewInvitee(index)"
@@ -260,13 +260,13 @@
w-16
inline-flex
"
:alt="$t('empty.invites')"
:alt="`${t('empty.invites')}`"
/>
<span class="text-center pb-4">
{{ $t("empty.invites") }}
{{ t("empty.invites") }}
</span>
<ButtonSecondary
:label="$t('add.new')"
:label="t('add.new')"
filled
@click.native="addNewInvitee"
/>
@@ -299,11 +299,11 @@
"
>
<i class="text-secondaryLight mr-2 material-icons">help_outline</i>
{{ $t("profile.roles") }}
{{ t("profile.roles") }}
</span>
<p>
<span class="text-secondaryLight">
{{ $t("profile.roles_description") }}
{{ t("profile.roles_description") }}
</span>
</p>
<ul class="mt-4 space-y-4">
@@ -318,10 +318,10 @@
w-1/4
"
>
{{ $t("profile.owner") }}
{{ t("profile.owner") }}
</span>
<span class="flex flex-1">
{{ $t("profile.owner_description") }}
{{ t("profile.owner_description") }}
</span>
</li>
<li class="flex">
@@ -335,10 +335,10 @@
w-1/4
"
>
{{ $t("profile.editor") }}
{{ t("profile.editor") }}
</span>
<span class="flex flex-1">
{{ $t("profile.editor_description") }}
{{ t("profile.editor_description") }}
</span>
</li>
<li class="flex">
@@ -352,10 +352,10 @@
w-1/4
"
>
{{ $t("profile.viewer") }}
{{ t("profile.viewer") }}
</span>
<span class="flex flex-1">
{{ $t("profile.viewer_description") }}
{{ t("profile.viewer_description") }}
</span>
</li>
</ul>
@@ -369,7 +369,7 @@
>
<SmartAnchor
class="link"
:label="`← \xA0 ${$t('team.invite_more')}`"
:label="`← \xA0 ${t('team.invite_more')}`"
@click.native="
() => {
sendInvitesResult = []
@@ -384,14 +384,14 @@
/>
<SmartAnchor
class="link"
:label="`${$t('action.dismiss')}`"
:label="`${t('action.dismiss')}`"
@click.native="hideModal"
/>
</p>
<span v-else>
<ButtonPrimary :label="$t('team.invite')" @click.native="sendInvites" />
<ButtonPrimary :label="t('team.invite')" @click.native="sendInvites" />
<ButtonSecondary
:label="$t('action.cancel')"
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span>
@@ -400,13 +400,7 @@
</template>
<script setup lang="ts">
import {
watch,
ref,
reactive,
useContext,
computed,
} from "@nuxtjs/composition-api"
import { watch, ref, reactive, computed } from "@nuxtjs/composition-api"
import * as T from "fp-ts/Task"
import * as E from "fp-ts/Either"
import * as A from "fp-ts/Array"
@@ -427,12 +421,11 @@ import {
revokeTeamInvitation,
} from "../../helpers/backend/mutations/TeamInvitation"
import { GQLError, useGQLQuery } from "~/helpers/backend/GQLClient"
import { useI18n, useToast } from "~/helpers/utils/composables"
const {
$toast,
app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)
const t = useI18n()
const toast = useToast()
const newInviteeOptions = ref<any | null>(null)
@@ -491,9 +484,9 @@ watch(
const removeInvitee = async (id: string) => {
const result = await revokeTeamInvitation(id)()
if (E.isLeft(result)) {
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
} else {
$toast.success(`${t("team.member_removed")}`)
toast.success(`${t("team.member_removed")}`)
}
}
@@ -553,7 +546,7 @@ const sendInvites = async () => {
if (O.isNone(validationResult)) {
// Error handling for no validation
$toast.error(`${t("error.incorrect_email")}`)
toast.error(`${t("error.incorrect_email")}`)
return
}

6
packages/hoppscotch-app/components/teams/Modal.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartModal v-if="show" :title="$t('team.select_a_team')" @close="hideModal">
<SmartModal v-if="show" :title="t('team.select_a_team')" @close="hideModal">
<template #body>
<Teams :modal="true" />
</template>
@@ -7,6 +7,10 @@
</template>
<script setup lang="ts">
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
show: Boolean
}>()

35
packages/hoppscotch-app/components/teams/Team.vue
View File

@@ -22,7 +22,7 @@
class="font-semibold text-secondaryDark"
:class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
>
{{ team.name || $t("state.nothing_found") }}
{{ team.name || t("state.nothing_found") }}
</label>
<div class="flex -space-x-1 mt-2 overflow-hidden">
<img
@@ -44,7 +44,7 @@
v-if="team.myRole === 'OWNER'"
svg="edit"
class="rounded-none"
:label="$t('action.edit')"
:label="t('action.edit')"
@click.native="
() => {
$emit('edit-team')
@@ -55,7 +55,7 @@
v-if="team.myRole === 'OWNER'"
svg="user-plus"
class="rounded-none"
:label="$t('team.invite')"
:label="t('team.invite')"
@click.native="
() => {
emit('invite-team')
@@ -68,14 +68,14 @@
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
:title="t('action.more')"
svg="more-vertical"
/>
</template>
<SmartItem
v-if="team.myRole === 'OWNER'"
svg="edit"
:label="$t('action.edit')"
:label="t('action.edit')"
@click.native="
() => {
$emit('edit-team')
@@ -87,7 +87,7 @@
v-if="team.myRole === 'OWNER'"
svg="trash-2"
color="red"
:label="$t('action.delete')"
:label="t('action.delete')"
@click.native="
() => {
deleteTeam()
@@ -98,7 +98,7 @@
<SmartItem
v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
svg="trash"
:label="$t('team.exit')"
:label="t('team.exit')"
@click.native="
() => {
exitTeam()
@@ -113,7 +113,6 @@
</template>
<script setup lang="ts">
import { useContext } from "@nuxtjs/composition-api"
import { pipe } from "fp-ts/function"
import * as TE from "fp-ts/TaskEither"
import { TeamMemberRole } from "~/helpers/backend/graphql"
@@ -121,6 +120,9 @@ import {
deleteTeam as backendDeleteTeam,
leaveTeam,
} from "~/helpers/backend/mutations/Team"
import { useI18n, useToast } from "~/helpers/utils/composables"
const t = useI18n()
const props = defineProps<{
team: {
@@ -142,12 +144,7 @@ const emit = defineEmits<{
(e: "edit-team"): void
}>()
const {
app: { i18n },
$toast,
} = useContext()
const t = i18n.t.bind(i18n)
const toast = useToast()
const deleteTeam = () => {
if (!confirm(`${t("confirm.remove_team")}`)) return
@@ -157,11 +154,11 @@ const deleteTeam = () => {
TE.match(
(err) => {
// TODO: Better errors ? We know the possible errors now
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
},
() => {
$toast.success(`${t("team.deleted")}`)
toast.success(`${t("team.deleted")}`)
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
@@ -175,17 +172,17 @@ const exitTeam = () => {
TE.match(
(err) => {
// TODO: Better errors ?
$toast.error(`${t("error.something_went_wrong")}`)
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
},
() => {
$toast.success(`${t("team.left")}`)
toast.success(`${t("team.left")}`)
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
}
const noPermission = () => {
$toast.error(`${t("profile.no_permission")}`)
toast.error(`${t("profile.no_permission")}`)
}
</script>

15
packages/hoppscotch-app/components/teams/index.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="teams">
<div class="space-y-4 p-4">
<ButtonSecondary
:label="`${$t('team.create_new')}`"
:label="`${t('team.create_new')}`"
outline
@click.native="displayModalAdd(true)"
/>
@@ -11,7 +11,7 @@
class="flex flex-col items-center justify-center"
>
<SmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ $t("state.loading") }}</span>
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div
v-if="
@@ -38,13 +38,13 @@
w-16
inline-flex
"
:alt="$t('empty.teams')"
:alt="`${t('empty.teams')}`"
/>
<span class="text-center mb-4">
{{ $t("empty.teams") }}
{{ t("empty.teams") }}
</span>
<ButtonSecondary
:label="`${$t('team.create_new')}`"
:label="`${t('team.create_new')}`"
filled
@click.native="displayModalAdd(true)"
/>
@@ -71,7 +71,7 @@
class="flex flex-col items-center"
>
<i class="mb-4 material-icons">help_outline</i>
{{ $t("error.something_went_wrong") }}
{{ t("error.something_went_wrong") }}
</div>
</div>
<TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
@@ -114,6 +114,9 @@ import {
MyTeamsQueryVariables,
} from "~/helpers/backend/graphql"
import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
import { useI18n } from "~/helpers/utils/composables"
const t = useI18n()
defineProps<{
modal: boolean