Skip to content

Commit

Permalink
cici: js formatter (#37)
Browse files Browse the repository at this point in the history
  • Loading branch information
crlssn authored Nov 19, 2024
1 parent c1add7d commit 7943568
Show file tree
Hide file tree
Showing 27 changed files with 771 additions and 455 deletions.
15 changes: 15 additions & 0 deletions .github/workflows/test.web.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,21 @@ jobs:
run: npm install
shell: bash

- name: Run formatter
working-directory: ./apps/web
run: npm run format
shell: bash

- name: Check for uncommitted changes
run: |
if [[ $(git status --porcelain) ]]; then
echo "Code is not properly formatted. Please run 'npm run format'."
git diff
exit 1
else
echo "Code is properly formatted."
fi
- name: Build the app
working-directory: ./apps/web
run: npm run build
Expand Down
1 change: 1 addition & 0 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ migrate:

protos:
buf generate
goimports -w .

generate-cert:
@bash -c 'openssl req -x509 -out .secrets/localhost.crt -keyout .secrets/localhost.key \
Expand Down
1 change: 1 addition & 0 deletions apps/web/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
src/pb
10 changes: 5 additions & 5 deletions apps/web/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script setup lang="ts">
import {RouterView} from 'vue-router'
import {useAuthStore} from "@/stores/auth";
import { RouterView } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import Dashboard from '@/components/Dashboard.vue'
const authStore = useAuthStore();
const authStore = useAuthStore()
</script>

<template>
<Dashboard v-if="authStore.accessToken"/>
<RouterView v-else/>
<Dashboard v-if="authStore.accessToken" />
<RouterView v-else />
</template>
22 changes: 11 additions & 11 deletions apps/web/src/clients/clients.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import {createConnectTransport} from "@connectrpc/connect-web";
import {createClient} from "@connectrpc/connect";
import {AuthService} from "@/pb/api/v1/auth_connect";
import {ExerciseService} from "@/pb/api/v1/exercise_connect";
import {auth, logger} from "@/clients/interceptors";
import {RoutineService} from "@/pb/api/v1/routines_connect";
import { createConnectTransport } from '@connectrpc/connect-web'
import { createClient } from '@connectrpc/connect'
import { AuthService } from '@/pb/api/v1/auth_connect'
import { ExerciseService } from '@/pb/api/v1/exercise_connect'
import { auth, logger } from '@/clients/interceptors'
import { RoutineService } from '@/pb/api/v1/routines_connect'

const transport = createConnectTransport({
baseUrl: import.meta.env.VITE_API_URL,
fetch: (url, options) => {
// TODO: Include credentials only on refresh token and logout requests.
return fetch(url, {...options, credentials: 'include'}); // Add credentials
return fetch(url, { ...options, credentials: 'include' }) // Add credentials
},
interceptors: [logger, auth],
});
})

export const AuthClient = createClient(AuthService, transport);
export const ExerciseClient = createClient(ExerciseService, transport);
export const RoutineClient = createClient(RoutineService, transport);
export const AuthClient = createClient(AuthService, transport)
export const ExerciseClient = createClient(ExerciseService, transport)
export const RoutineClient = createClient(RoutineService, transport)
34 changes: 17 additions & 17 deletions apps/web/src/clients/interceptors.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
import type {Interceptor} from "@connectrpc/connect";
import {useAuthStore} from "@/stores/auth";
import {Code, ConnectError} from "@connectrpc/connect";
import {RefreshAccessTokenOrLogout} from "@/jwt/jwt";
import type { Interceptor } from '@connectrpc/connect'
import { useAuthStore } from '@/stores/auth'
import { Code, ConnectError } from '@connectrpc/connect'
import { RefreshAccessTokenOrLogout } from '@/jwt/jwt'

export const logger: Interceptor = (next) => async (req) => {
console.log(`sending message to ${req.url}`);
return next(req);
};
console.log(`sending message to ${req.url}`)
return next(req)
}

export const auth: Interceptor = (next) => async (req) => {
const authStore = useAuthStore();
const authStore = useAuthStore()
try {
req.header.set("Authorization", `Bearer ${authStore.accessToken}`);
return next(req);
req.header.set('Authorization', `Bearer ${authStore.accessToken}`)
return next(req)
} catch (error) {
if (!(error instanceof ConnectError)) {
throw error;
throw error
}

if (error.code !== Code.Unauthenticated) {
throw error;
throw error
}

console.log("refreshing access token to attempt request again");
await RefreshAccessTokenOrLogout();
req.header.set("Authorization", `Bearer ${authStore.accessToken}`);
return next(req);
console.log('refreshing access token to attempt request again')
await RefreshAccessTokenOrLogout()
req.header.set('Authorization', `Bearer ${authStore.accessToken}`)
return next(req)
}
};
}
28 changes: 14 additions & 14 deletions apps/web/src/components/Button.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,34 @@
<script setup lang="ts">
import {computed} from 'vue';
import { computed } from 'vue'
const props = defineProps<{
type: 'button' | 'submit' | 'link'
colour: 'primary' | 'green' | 'red' | 'amber',
colour: 'primary' | 'green' | 'red' | 'amber'
to?: string
}>()
const computedClasses = computed(() => {
let linkClass;
let linkClass
if (props.type === 'link') {
linkClass = `link`;
linkClass = `link`
}
return `${linkClass} ${props.colour}`;
});
return `${linkClass} ${props.colour}`
})
</script>

<template>
<RouterLink v-if="props.type === 'link'" :to="props.to as string" :class="computedClasses">
<slot/>
<slot />
</RouterLink>
<button v-else :type="props.type" :class="computedClasses">
<slot/>
<slot />
</button>
</template>

<style scoped>
a, button {
a,
button {
@apply uppercase w-full border-b-8 rounded-md shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
@apply px-3.5 py-2.5 text-sm font-semibold;
}
Expand All @@ -37,19 +38,18 @@ a.link {
}
.primary {
@apply bg-indigo-600 hover:bg-indigo-500 border-b-indigo-800 hover:border-b-indigo-700 focus-visible:outline-indigo-600 text-white
@apply bg-indigo-600 hover:bg-indigo-500 border-b-indigo-800 hover:border-b-indigo-700 focus-visible:outline-indigo-600 text-white;
}
.green {
@apply bg-green-600 hover:bg-green-500 border-b-green-800 hover:border-b-green-700 focus-visible:outline-green-600 text-white
@apply bg-green-600 hover:bg-green-500 border-b-green-800 hover:border-b-green-700 focus-visible:outline-green-600 text-white;
}
.red {
@apply bg-red-600 hover:bg-red-500 border-b-red-800 hover:border-b-red-700 focus-visible:outline-red-600 text-white
@apply bg-red-600 hover:bg-red-500 border-b-red-800 hover:border-b-red-700 focus-visible:outline-red-600 text-white;
}
.amber {
@apply bg-amber-600 hover:bg-amber-500 border-b-amber-800 hover:border-b-amber-700 focus-visible:outline-amber-600 text-white
@apply bg-amber-600 hover:bg-amber-500 border-b-amber-800 hover:border-b-amber-700 focus-visible:outline-amber-600 text-white;
}
</style>
59 changes: 40 additions & 19 deletions apps/web/src/components/CardWorkout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ interface Props {
const props = defineProps<Props>()
import Dropdown from "@/components/Dropdown.vue";
import {type DropdownItem} from "@/types/dropdown";
import Button from "@/components/Button.vue";
import Textarea from "@/components/Textarea.vue";
import CardWorkoutExercise from "@/components/CardWorkoutExercise.vue";
import CardWorkoutComment from "@/components/CardWorkoutComment.vue";
import Dropdown from '@/components/Dropdown.vue'
import { type DropdownItem } from '@/types/dropdown'
import Button from '@/components/Button.vue'
import Textarea from '@/components/Textarea.vue'
import CardWorkoutExercise from '@/components/CardWorkoutExercise.vue'
import CardWorkoutComment from '@/components/CardWorkoutComment.vue'
const dropdownItems: Array<DropdownItem> = [
{title: 'Edit', href: `/workout/${props.id}/edit`},
{title: 'Delete', href: `/workout/${props.id}/delete`},
{ title: 'Edit', href: `/workout/${props.id}/edit` },
{ title: 'Delete', href: `/workout/${props.id}/delete` },
]
</script>

Expand All @@ -23,27 +23,48 @@ const dropdownItems: Array<DropdownItem> = [
<div class="px-4 py-5 sm:px-6">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-4"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""/>
<img
class="h-8 w-8 rounded-full mr-4"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<span class="font-semibold mr-2">Christian Carlsson</span>
<span class="text-gray-500 text-sm">4 hours ago</span>
</div>
<Dropdown :items="dropdownItems"/>
<Dropdown :items="dropdownItems" />
</div>
</div>
<div class="px-4 py-5 sm:p-6">
<CardWorkoutExercise name="Latsdrag" label="Matrix"
:sets="[{weight: 47.5, reps: 10},{weight: 47.5, reps: 10},{weight: 47.5, reps: 10}]"/>
<CardWorkoutExercise name="Sittande rodd" label="Matrix"
:sets="[{weight: 47.5, reps: 10},{weight: 47.5, reps: 10},{weight: 47.5, reps: 10}]"/>
<CardWorkoutExercise
name="Latsdrag"
label="Matrix"
:sets="[
{ weight: 47.5, reps: 10 },
{ weight: 47.5, reps: 10 },
{ weight: 47.5, reps: 10 },
]"
/>
<CardWorkoutExercise
name="Sittande rodd"
label="Matrix"
:sets="[
{ weight: 47.5, reps: 10 },
{ weight: 47.5, reps: 10 },
{ weight: 47.5, reps: 10 },
]"
/>
</div>
<div class="px-4 py-4 sm:px-6">
<div class="flex mb-4">
<CardWorkoutComment imageURL="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" name="Barbro Lundquist" comment="Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis
voluptatem." :timestamp="new Date()"/>
<CardWorkoutComment
imageURL="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
name="Barbro Lundquist"
comment="Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis
voluptatem."
:timestamp="new Date()"
/>
</div>
<Textarea placeholder="Write a comment..." :rows="2"/>
<Textarea placeholder="Write a comment..." :rows="2" />
<div class="flex justify-end">
<Button type="button" colour="primary">Comment</Button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/web/src/components/CardWorkoutComment.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<script setup lang="ts">
const props = defineProps<{
imageURL: string,
name: string,
timestamp: Date,
imageURL: string
name: string
timestamp: Date
comment: string
}>()
</script>

<template>
<img class="h-8 w-8 rounded-full mr-4" :src="props.imageURL" alt=""/>
<img class="h-8 w-8 rounded-full mr-4" :src="props.imageURL" alt="" />
<div>
<div class="flex items-center">
<p class="font-semibold mr-2">{{ props.name }}</p>
Expand Down
20 changes: 11 additions & 9 deletions apps/web/src/components/CardWorkoutExercise.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
<script setup lang="ts">
const props = defineProps<{
name: string,
label?: string,
name: string
label?: string
sets: Array<{
reps: number,
weight: number,
reps: number
weight: number
}>
}>()
</script>

<template>
<p>
<span class="font-semibold mr-1">{{ props.name }}</span>
<span class="bg-indigo-600 text-white text-xs rounded py-0.5 px-1" v-if="props.label">{{ props.label }}</span>
<span class="bg-indigo-600 text-white text-xs rounded py-0.5 px-1" v-if="props.label">{{
props.label
}}</span>
</p>
<p class="mb-2">
<span class="mr-2" v-for="(set, index) in props.sets" :key="index">{{ set.weight }} kg x {{ set.reps }}</span>
<span class="mr-2" v-for="(set, index) in props.sets" :key="index"
>{{ set.weight }} kg x {{ set.reps }}</span
>
</p>
</template>

<style scoped>
</style>
<style scoped></style>
Loading

0 comments on commit 7943568

Please sign in to comment.