Merge pull request s1lvax#52 from s1lvax/dev

merge new changes

.github/workflows/deploy-dev.yml

@@ -0,0 +1,50 @@
+name: Deploy Dev App
+#deploy dev branch
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Copy repository to SFTP
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.SFTP_HOST }}
+          username: ${{ secrets.SFTP_USER }}
+          password: ${{ secrets.SFTP_PASSWORD }}
+          port: ${{ secrets.SFTP_PORT }}
+          source: '.'
+          target: '/opt/route-dev'
+
+      - name: Build and deploy Docker container
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SFTP_HOST }}
+          username: ${{ secrets.SFTP_USER }}
+          password: ${{ secrets.SFTP_PASSWORD }}
+          port: ${{ secrets.SFTP_PORT }}
+          script: |
+            cd '/opt/route-dev'
+
+            # Overwrite the .env file to recreate it during each deployment
+            rm -f .env
+            echo "AUTH_SECRET=${{ secrets.AUTH_SECRET_TESTING }}" >> .env
+            echo "CLIENT_ID=${{ secrets.CLIENT_ID_TESTING }}" >> .env
+            echo "CLIENT_SECRET=${{ secrets.CLIENT_SECRET_TESTING }}" >> .env
+            echo "DATABASE_URL=${{ secrets.DATABASE_URL_TESTING }}" >> .env
+            echo "AUTH_TRUST_HOST=${{ secrets.AUTH_TRUST_HOST }}" >> .env
+
+            #Prisma
+            npx prisma generate
+
+            docker build -t route-dev .
+            docker stop route-dev || true
+            docker rm route-dev || true
+            docker run -d --name route-dev --restart always --env-file .env -p 3003:3000 route-dev

src/lib/components/MyProfile/LinkForm.svelte

@@ -4,15 +4,19 @@
 	import { linksSchema, type LinksSchema } from '$lib/schemas/links';
 	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
+	import type { Link } from '@prisma/client';
 
 	export let data: SuperValidated<Infer<LinksSchema>>;
 	export let linksLength: number;
+	export let links: Link[] = []; 
+	let isLimitReached = false;
+	$: isLimitReached = links.length >= 15;
 
 	const form = superForm(data, {
 		validators: zodClient(linksSchema)
 	});
 
-	const { form: formData, enhance } = form;
+	const { form: formData, enhance, message } = form;
 
 	$: $formData.order = linksLength;
 </script>
@@ -49,5 +53,11 @@
 		</Form.Control>
 	</Form.Field>
 
-	<Form.Button class="mt-5 flex align-bottom">Add</Form.Button>
+	<Form.Button disabled = {isLimitReached} class="mt-5 flex align-bottom">Add</Form.Button>
 </form>
+
+{#if isLimitReached}
+  <p class="text-red-500 mt-2 text-center">You have reached the maximum limit of 15 links.</p>
+{:else if $message}
+  <p class="text-red-500 mt-2 text-center">{$message}</p>
+{/if}

src/lib/components/MyProfile/SkillsForm.svelte

@@ -2,12 +2,18 @@
 	import * as Form from '$lib/components/ui/form';
 	import { Input } from '$lib/components/ui/input';
 	import { skillsSchema, type SkillsSchema } from '$lib/schemas/skills';
-	import { Select } from 'bits-ui';
+	import { Select, type Selected } from 'bits-ui';
 	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
+	import type { Skill } from '@prisma/client';
+	import { masteryLevels } from '$lib/constants/masteryLevel';
+	import { getMasteryLevelFromLabel, getMasteryLevelFromLevel } from '$lib/utils/getMasteryLevel';
 
 	export let data: SuperValidated<Infer<SkillsSchema>>;
 	export let skillsLength: number;
+	export let skills: Skill[] = [];
+	let isLimitReached = false;
+	$: isLimitReached = skills.length >= 15;
 
 	const form = superForm(data, {
 		validators: zodClient(skillsSchema),
@@ -20,15 +26,28 @@
 		}
 	});
 
-	const { form: formData, enhance } = form;
+	const { form: formData, enhance, message } = form;
 
 	$: $formData.order = skillsLength;
-	$: selectedLevel = $formData.level
-		? {
-				label: $formData.level,
-				value: $formData.level
+	$: selectedLevel = {
+		value: '',
+		label: ''
+	};
+
+	const onSelectedChange = (selected: Selected<string> | undefined) => {
+		if (selected) {
+			const level = getMasteryLevelFromLabel(selected.value);
+			if (level) {
+				$formData.level = level.value;
 			}
-		: undefined;
+		}
+	};
+
+	formData.subscribe((current) => {
+		if (!selectedLevel) selectedLevel = { label: '', value: '' };
+		selectedLevel.label = getMasteryLevelFromLevel(current.level)?.label ?? '';
+		selectedLevel.value = current.level;
+	});
 </script>
 
 <form
@@ -37,49 +56,46 @@
 	action="?/createSkill"
 	class="flex items-center justify-center space-x-4"
 >
-	<div class="flex flex-col">
+	<div class="flex items-center space-x-2">
 		<Form.Field {form} name="title">
 			<Form.Control let:attrs>
 				<Form.Label>Title</Form.Label>
 				<Input {...attrs} bind:value={$formData.title} />
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
-	</div>
 
-	<div class="flex flex-col">
 		<Form.Field {form} name="level">
 			<Form.Control let:attrs>
 				<Form.Label>Level of mastery</Form.Label>
-				<Select.Root
-					selected={selectedLevel}
-					onSelectedChange={(v) => {
-						v && ($formData.level = v.value);
-					}}
-				>
+				<Select.Root selected={selectedLevel} {onSelectedChange}>
 					<Select.Trigger {...attrs}>
 						<Select.Value placeholder="Select the level of your skill" />
 					</Select.Trigger>
 					<Select.Content>
-						<Select.Item value="1" label="Novice" />
-						<Select.Item value="2" label="Intermediate" />
-						<Select.Item value="3" label="Competent" />
-						<Select.Item value="4" label="Proficient" />
-						<Select.Item value="5" label="Expert" />
+						{#each masteryLevels as mastery}
+							<Select.Item value={mastery.label} label={mastery.label} />
+						{/each}
 					</Select.Content>
 				</Select.Root>
 				<input hidden bind:value={$formData.level} name={attrs.name} />
 			</Form.Control>
-
 			<Form.FieldErrors />
 		</Form.Field>
-	</div>
 
-	<Form.Field {form} name="order">
-		<Form.Control let:attrs>
-			<Input {...attrs} bind:value={$formData.order} type="hidden" />
-		</Form.Control>
-	</Form.Field>
+		<Form.Field {form} name="order">
+			<Form.Control let:attrs>
+				<Input {...attrs} bind:value={$formData.order} type="hidden" />
+			</Form.Control>
+		</Form.Field>
 
-	<Form.Button>Add</Form.Button>
+		<Form.Button disabled={isLimitReached}>Add</Form.Button>
+	</div>
 </form>
+
+{#if isLimitReached}
+	<p class="mt-2 text-center text-red-500">You have reached the maximum limit of 15 skills.</p>
+{:else if $message}
+	<p class="mt-2 text-center text-red-500">{$message}</p>
+{/if}
+

src/lib/components/MyProfile/UserSkills.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BriefcaseBusiness, Trash2, AlignJustify } from 'lucide-svelte';
-	import { masteryLevels } from '$lib/constants/masteryLevel';
+	import { getMasteryLevelFromLevel } from '$lib/utils/getMasteryLevel';
 	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/ui/button';
 	import { confirmDelete } from '$lib/utils/confirmDelete';
@@ -20,7 +20,7 @@
 			}
 		});
 		dragDisabled = false;
-	}
+	};
 </script>
 
 <DnD
@@ -30,14 +30,14 @@
 	class="grid gap-4"
 	onDrop={handleDrop}
 >
-	{#each skills as skill(skill.id)}
+	{#each skills as skill (skill.id)}
 		<div class="flex items-center gap-4">
 			<AlignJustify />
 			<BriefcaseBusiness />
 			<div class="grid gap-1">
 				<p class="text-sm font-medium leading-none">{skill.title}</p>
 				<p class="text-sm text-muted-foreground">
-					{masteryLevels.find((level) => level.value === String(skill.level))?.label}
+					{getMasteryLevelFromLevel(skill.level)?.label}
 				</p>
 			</div>
 			<div class="ml-auto font-medium">

src/lib/constants/masteryLevel.ts

@@ -1,4 +1,6 @@
-export const masteryLevels = [
+import type { MasteryLevel } from '$lib/types/MasteryLevel';
+
+export const masteryLevels: MasteryLevel[] = [
 	{ value: '1', label: 'Novice' },
 	{ value: '2', label: 'Intermediate' },
 	{ value: '3', label: 'Competent' },

src/lib/types/MasteryLevel.ts

@@ -0,0 +1,4 @@
+export interface MasteryLevel {
+  value: string;
+  label: string;
+}

src/lib/utils/getMasteryLevel.ts

@@ -0,0 +1,10 @@
+import { masteryLevels } from '$lib/constants/masteryLevel';
+import type { MasteryLevel } from '$lib/types/MasteryLevel';
+
+export const getMasteryLevelFromLabel = (label: string): MasteryLevel | undefined => {
+  return masteryLevels.find((masteryLevel) => masteryLevel.label == label);
+};
+
+export const getMasteryLevelFromLevel = (level: string): MasteryLevel | undefined => {
+  return masteryLevels.find((masteryLevel) => masteryLevel.value == level);
+};

src/routes/profile/+page.server.ts

@@ -89,6 +89,10 @@ export const actions: Actions = {
 
 		if (user) {
 			try {
+				const linkCount = await prisma.link.count({where: { userId: user.githubId }});	
+				if (linkCount >= 15) {
+				return fail(400, {form, message: 'You have reached the maximum limit of 15 links.'});
+				}
 				await prisma.link.create({
 					data: {
 						title,
@@ -144,6 +148,10 @@ export const actions: Actions = {
 
 		if (user) {
 			try {
+				const skillCount = await prisma.skill.count({where :{userId:user.githubId}});
+				if (skillCount >= 15) {
+					return fail(400, {form,message:'You have reached the maximum limit of 15 skills'})
+				}
 				await prisma.skill.create({
 					data: {
 						title,

src/routes/profile/+page.svelte

@@ -70,7 +70,7 @@
 						<Card.Description>
 							The links visible on your profile. You can drag links around to modify the order
 						</Card.Description>
-						<LinkForm data={data.form} linksLength={data.links.length} />
+						<LinkForm data={data.form} linksLength={data.links.length} links = {data.links} />
 					</div>
 				</Card.Header>
 				<Card.Content>
@@ -82,7 +82,7 @@
 				<Card.Header>
 					<Card.Title>Tech Stack</Card.Title>
 					<Card.Description>You can drag skills around to modify the order</Card.Description>
-					<SkillsForm data={data.skillsForm} skillsLength={data.skills.length} />
+					<SkillsForm data={data.skillsForm} skillsLength={data.skills.length} skills = {data.skills} />
 				</Card.Header>
 				<Card.Content class="grid gap-8">
 					<UserSkills skills={data.skills} />