Merge pull request #18 from foundersandcoders:refactor

Refactor Question card component

Author: JasonWarrenUK

src/lib/components/cards/QuestionCard.svelte

@@ -1,87 +1,67 @@
 <script lang="ts">
 	import { getQuestionById } from '$lib/services/database';
 	import SubmitButton from '../ui/SubmitButton.svelte';
-	import type { DbResult } from '$lib/services/database/types';
-	import type { Database } from '$lib/types/supabase';
-	import { getLatestResponses } from '$lib/services/database/responses';
-	import { getLatestActions } from '$lib/services/database';
 	import ToggleStatus from '../ui/ToggleStatus.svelte';
-
-	type Question = Database['public']['Tables']['questions']['Row'];
+	import { getQuestionDetails } from '$lib/utils/questionDetails.svelte';
 
 	//Delete later --> for development only
 	const user_id = '550e8400-e29b-41d4-a716-446655440005';
 
+	let actionType = $state('');
+	let questionDetails = $state<QuestionDetails>({
+		responseInput: null,
+		actionsInput: null,
+		actionType: '',
+		responseId: null
+	});
+
 	interface Props {
 		questionId: string;
 	}
 
+	export interface QuestionDetails {
+		responseInput: string | null;
+		actionsInput: string | null;
+		actionType: string;
+		responseId: string | null;
+	}
+
 	let { questionId }: Props = $props();
 
-	const getData = async () => {
+	const getQuestionData = async () => {
 		const question = await getQuestionById(questionId);
-		const previousResponse = await getLatestResponse();
-
-		if (previousResponse) responseInput = previousResponse;
+		const details = await getQuestionDetails(user_id, questionId);
+		questionDetails = details;
+		if (details.actionType !== '') actionType = details.actionType;
 
 		return {
 			question: question || null,
-			previousResponse: previousResponse || null
+			details: details || null
 		};
 	};
 
-	const getLatestResponse = async () => {
-		const response = await getLatestResponses(user_id);
-		if (response?.data) {
-			const questionResponse = response.data.find((r) => r.question_id === questionId);
-			const previousAction = await getLatestAction(questionResponse?.id);
-			if (previousAction?.description) {
-				actionsInput = previousAction.description;
-				actionType = previousAction.type;
-			}
-			if (questionResponse?.visibility) isPublic = questionResponse?.visibility;
-			if (questionResponse?.id) responseId = questionResponse?.id;
-			return questionResponse?.response_text;
-		}
-		return null;
-	};
-	let responseInput = $state('');
-	let responseId = $state('');
-
-	const getLatestAction = async (response_Id: string | undefined) => {
-		const response = await getLatestActions(user_id);
-		if (response?.data) {
-			const actionResponse = response.data.find((r) => r.response_id === response_Id);
-			return actionResponse;
-		}
-		return null;
-	};
-	let actionType = $state('');
-	let actionsInput = $state('');
-	let isPublic = $state('private');
-	$inspect(isPublic);
-
+	let visibility = $state('private');
 	const toggleVisibility = () => {
-		isPublic = isPublic === 'public' ? 'private' : 'public';
+		visibility = visibility === 'public' ? 'private' : 'public';
 	};
 </script>
 
-{#await getData() then response}
+{#await getQuestionData() then response}
 	{#if response.question && response.question.data}
 		<div class=" m-auto flex min-h-[90dvh] w-sm flex-col justify-around rounded-3xl p-5 shadow-2xl">
 			<header>
 				<h1 class="text-center text-2xl">{response.question.data.category}</h1>
 			</header>
 
-			<ToggleStatus {isPublic} {toggleVisibility} />
+			<ToggleStatus {visibility} {toggleVisibility} />
 
 			<div class="flex flex-col">
 				<label for="response-{questionId}" class="text-xl"
 					>{response.question.data.question_text || 'Question'}</label
 				>
 				<textarea
 					id="response-{questionId}"
-					bind:value={responseInput}
+					bind:value={questionDetails.responseInput}
 					placeholder="Enter your response here..."
 					rows="4"
 					class="text-area"
@@ -103,7 +83,7 @@
 					<label for="actions-{questionId}">Actions needed:</label>
 					<textarea
 						id="actions-{questionId}"
-						bind:value={actionsInput}
+						bind:value={questionDetails.actionsInput}
 						placeholder="Enter your response here..."
 						rows="3"
 						class="text-area"
@@ -115,20 +95,16 @@
 				<SubmitButton
 					text="Skip"
 					status="skipped"
-					{responseInput}
-					{actionsInput}
 					{actionType}
-					{isPublic}
-					{responseId}
+					details={questionDetails}
+					{visibility}
 				/>
 				<SubmitButton
 					text="Submit"
 					status="answered"
-					{responseInput}
-					{actionsInput}
 					{actionType}
-					{isPublic}
-					{responseId}
+					details={questionDetails}
+					{visibility}
 				/>
 			</div>
 		</div>

src/lib/components/ui/SubmitButton.svelte

@@ -1,32 +1,34 @@
 <script lang="ts">
 	import { createAction } from '$lib/services/database/actions';
 	import { createResponse } from '$lib/services/database/responses';
+	import type { QuestionDetails } from '../cards/QuestionCard.svelte';
 
 	//Delete later --> for development only
 	const user_id = '550e8400-e29b-41d4-a716-446655440005';
 	const questionId = 'bacc6ffa-b589-4bdc-8eb8-d29eeef7f153';
 
 	interface Props {
 		text: string;
-		responseInput: string;
-		actionsInput: string;
-		actionType: string;
 		status: string;
-		isPublic: string;
-		responseId: string;
+		visibility: string;
+		actionType: string;
+		details: QuestionDetails;
 	}
 
-	let { text, responseInput, actionsInput, actionType, status, isPublic, responseId }: Props =
-		$props();
+	let { text, status, details, actionType, visibility }: Props = $props();
 
 	function handleSubmit() {
 		createResponse(user_id, {
-			response_text: responseInput,
+			response_text: details.responseInput,
 			question_id: questionId,
 			status: status,
-			visibility: isPublic
+			visibility: visibility
+		});
+		createAction(user_id, {
+			type: actionType,
+			description: details.actionsInput,
+			response_id: details.responseId
 		});
-		createAction(user_id, { type: actionType, description: actionsInput, response_id: responseId });
 	}
 </script>
 

src/lib/components/ui/ToggleStatus.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { isPublic, toggleVisibility } = $props();
+	let { visibility, toggleVisibility } = $props();
 </script>
 
 <div class="flex items-center gap-3">
@@ -17,5 +17,5 @@
 		>
 		</label>
 	</div>
-	<span class=" text-sm font-medium">{isPublic}</span>
+	<span class=" text-sm font-medium">{visibility}</span>
 </div>

src/lib/components/views/Detail.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
-	import type { View } from "$lib/types/ui";
+	import type { View } from '$lib/types/ui';
 	import { getContext } from 'svelte';
+	import QuestionCard from '$lib/components/cards/QuestionCard.svelte';
 
-	const setView = getContext<(view:View) => void>('setView');
+	const setView = getContext<(view: View) => void>('setView');
 
-	const onBackClick = () => { setView("list") };
+	const onBackClick = () => {
+		setView('list');
+	};
+
+	const questionId = 'bacc6ffa-b589-4bdc-8eb8-d29eeef7f153';
 </script>
 
 <div class="dev dev-div">
 	<div id="detail-header" class="dev dev-div flex flex-row justify-between">
 		<h2 class="dev dev-div">Detail View</h2>
 
-		<button onclick={onBackClick} class="dev dev-div dev-button">
-			Back
-		</button>
+		<button onclick={onBackClick} class="dev dev-div dev-button"> Back </button>
 	</div>
 
 	<div id="detail-content" class="dev dev-div">
+		<QuestionCard {questionId} />
 	</div>
-</div>
+</div>

src/lib/utils/questionDetails.svelte.ts

@@ -0,0 +1,28 @@
+import { getLatestResponses } from '$lib/services/database/responses';
+import { getLatestActions } from '$lib/services/database';
+import type { QuestionDetails } from '$lib/components/cards/QuestionCard.svelte';
+
+export const getQuestionDetails = async (
+	user_id: string,
+	questionId: string
+): Promise<QuestionDetails> => {
+	const response = await getLatestResponses(user_id);
+	const questionResponse = response.data?.find((r) => r.question_id === questionId);
+	const previousAction = await getActionDetails(questionResponse?.id, user_id);
+
+	return {
+		responseInput: questionResponse?.response_text || null,
+		actionsInput: previousAction?.description || null,
+		actionType: previousAction?.type || '',
+		responseId: questionResponse?.id || null
+	};
+};
+
+const getActionDetails = async (response_Id: string | undefined, user_id: string) => {
+	const response = await getLatestActions(user_id);
+	if (response?.data) {
+		const actionResponse = response.data.find((r) => r.response_id === response_Id);
+		return actionResponse;
+	}
+	return null;
+};