Fetch exercise from server

src/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -17,8 +17,6 @@
   let currentQuestion = {};
   let renderProps = {};
 
-  const { questions, title, description } = $questionnaire;
-
   function handleStart() {
     $questionnaireMetaData.currentQuestionIndex += 1;
   }
@@ -60,20 +58,22 @@
     }
 
     return (
-      Math.round(((currentQuestionIndex - 1) / questions.length) * 100) || 0
+      Math.round(
+        ((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100
+      ) || 0
     );
   }
 
   $: {
     currentQuestion =
-      questions[$questionnaireMetaData.currentQuestionIndex - 1];
+      $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1];
     if ($questionnaireMetaData.currentQuestionIndex > 0 && !currentQuestion) {
       $questionnaireMetaData.isFinished = true;
     }
 
     if (currentQuestion) {
       renderProps = getPropsForQuestion(
-        questions,
+        $questionnaire.questions,
         currentQuestion,
         $questionnaireMetaData,
         $questionnaireMetaData.currentQuestionIndex,
@@ -87,15 +87,20 @@
   $: $questionnaireMetaData.progressValue = getProgressValue(
     $questionnaireMetaData.currentQuestionIndex
   );
+
+  $: console.log('$questionnaire', $questionnaire);
 </script>
 
-{#if !preview && questions.length && !$questionnaireMetaData.isFinished}
+{#if !preview && $questionnaire.questions.length && !$questionnaireMetaData.isFinished}
   <Progress value={$questionnaireMetaData.progressValue} />
 {/if}
 
 {#if preview}
-  <Preview {questions} questionnaireMetaData={$questionnaireMetaData} />
-{:else if !questions.length}
+  <Preview
+    questions={$questionnaire.questions}
+    questionnaireMetaData={$questionnaireMetaData}
+  />
+{:else if !$questionnaire.questions.length}
   <div
     class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
   >
@@ -106,8 +111,8 @@
   </div>
 {:else if $questionnaireMetaData.currentQuestionIndex === 0}
   <div>
-    <h2 class="my-1">{title}</h2>
-    <p>{description}</p>
+    <h2 class="my-1">{$questionnaire.title}</h2>
+    <p>{$questionnaire.description}</p>
 
     <PrimaryButton
       onClick={handleStart}
@@ -119,7 +124,7 @@
 {:else if $questionnaireMetaData.isFinished}
   <div class="flex items-center justify-between">
     <div class="flex flex-col justify-between">
-      <h2 class="text-xl mb-2 mt-0">{title}</h2>
+      <h2 class="text-xl mb-2 mt-0">{$questionnaire.title}</h2>
       {#if STATUS.IN_PROGRESS === $questionnaireMetaData.status}
         <span
           class="bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
@@ -144,7 +149,10 @@
       {getTotalScores()}/100
     </span>
   </div>
-  <Preview {questions} questionnaireMetaData={$questionnaireMetaData} />
+  <Preview
+    questions={$questionnaire.questions}
+    questionnaireMetaData={$questionnaireMetaData}
+  />
 {:else if QUESTION_TYPE.RADIO === currentQuestion.type}
   <RadioQuestion {...renderProps} />
 {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type}

src/components/Course/components/Lesson/Materials/EditMode.svelte

@@ -1,6 +1,6 @@
 <script>
   import Tabs from '../../../../Tabs/index.svelte';
-  import TabContent from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../TabContent/index.svelte';
   import EditContent from '../../../../EditContent/index.svelte';
   import TextField from '../../../../Form/TextField.svelte';
   import { lesson } from '../store/lessons';
@@ -22,6 +22,7 @@
   let currentTab = tabs[0].value;
 
   function onChange(tabValue) {
+    console.log(`$lesson`, $lesson);
     return () => {
       currentTab = tabValue;
     };

src/components/Course/components/Lesson/Materials/ViewMode.svelte

@@ -1,6 +1,6 @@
 <script>
   import Tabs from '../../../../Tabs/index.svelte';
-  import TabContent from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../TabContent/index.svelte';
   import MarkdownRender from '../../../../MarkdownRender/index.svelte';
   import { lesson } from '../store/lessons';
 

src/components/CourseContainer/index.svelte

@@ -3,24 +3,28 @@
 
   import Navigation from '../Course/components/Navigation/index.svelte';
   import { lessons, lesson } from '../Course/components/Lesson/store/lessons';
+  import { questionnaire } from '../Course/components/Lesson/Exercise/store';
+  import { questionnaireMetaData } from '../Course/components/Lesson/Exercise/store/answers';
 
   export let courseData = {};
   export let path;
 
-  onMount(() => {
+  function setStoreWithData() {
     lessons.set(courseData.lessons);
+    console.log(`courseData`, courseData);
     if (courseData.lesson) {
       lesson.set(courseData.lesson);
     }
-  });
 
-  afterUpdate(() => {
-    lessons.set(courseData.lessons);
-
-    if (courseData.lesson) {
-      lesson.set(courseData.lesson);
+    if (courseData.exercise && courseData.exercise.data) {
+      questionnaire.set(courseData.exercise.data);
+      questionnaireMetaData.set(courseData.exercise.answers);
     }
-  });
+  }
+
+  onMount(setStoreWithData);
+
+  afterUpdate(setStoreWithData);
 </script>
 
 <svelte:head>

src/components/Question/RadioQuestion/index.svelte

@@ -65,7 +65,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md cursor-pointer hover:bg-gray-200 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
           option
         )}"
         type="button"

src/components/Tabs/index.svelte

@@ -4,7 +4,7 @@
   export let onChange;
 </script>
 
-<div class="w-full flex justify-center">
+<div class="w-full flex justify-center flex-col">
   <div class="flex items-center">
     {#each tabs as tab}
       <button
@@ -23,5 +23,7 @@
     {/each}
   </div>
 
-  <slot name="content" />
+  <div class="mt-4">
+    <slot name="content" />
+  </div>
 </div>

src/config.js

@@ -0,0 +1,17 @@
+let ENV = process.env;
+
+export const getConfig = (_env) => {
+  if (!!_env) {
+    ENV = { ...ENV, ..._env };
+  }
+
+  return {
+    port: ENV.PORT,
+    nodeEnv: ENV.NODE_ENV,
+    isProd: ENV.NODE_ENV === 'development',
+    supabaseConfig: {
+      url: ENV.SVELTE_APP_SUPABASE_URL,
+      anonKey: ENV.SVELTE_APP_SUPABASE_ANON_KEY,
+    },
+  };
+};

src/routes/api/_db.js

@@ -87,7 +87,7 @@ const lessons = [
   {
     id: 1,
     course_id: 1,
-    title: 'Вступительное слово. Софт скилы',
+    title: 'Introduction to soft skills',
     to: '/courses/1/lessons/1',
     tutor: {
       userId: 1,
@@ -114,7 +114,7 @@ const lessons = [
   {
     id: 2,
     course_id: 1,
-    title: 'Введение в ReactJS',
+    title: 'Introduction to ReactJS',
     to: '/courses/1/lessons/2',
     tutor: {
       userId: 1,
@@ -141,7 +141,7 @@ const lessons = [
   {
     id: 3,
     course_id: 1,
-    title: 'Компоненты',
+    title: 'Components - Functional and Class',
     to: '/courses/1/lessons/3',
     tutor: {
       userId: 1,
@@ -168,7 +168,7 @@ const lessons = [
   {
     id: 4,
     course_id: 1,
-    title: 'Состояние компонентов и пропсы',
+    title: 'State and Props in components',
     to: '/courses/1/lessons/4',
     tutor: {
       userId: 1,
@@ -195,7 +195,7 @@ const lessons = [
   {
     id: 5,
     course_id: 1,
-    title: 'Жизненный цикл',
+    title: 'Life cycle methods',
     to: '/courses/1/lessons/5',
     tutor: {
       userId: 1,
@@ -381,7 +381,7 @@ export function getLesson(id) {
         slide: '',
         video: '',
       },
-      exercises: [],
+      exercises: getExercises(id),
     }
   );
 }
@@ -392,7 +392,7 @@ export function getExercises(lessonId) {
 
 export function getExercise(exerciseId) {
   return {
-    exercise: lesson_exercise.find((exercise) => exercise.id === exerciseId),
+    data: lesson_exercise.find((exercise) => exercise.id === exerciseId),
     answers: exercise_answers.find(
       (answer) => answer.exercise_id === exerciseId
     ),

src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte

@@ -7,6 +7,7 @@
       `api/course?id=${courseId}&lessonId=${lessonId}&exerciseId=${exerciseId}`
     );
     const data = await res.json();
+    console.log(`data`, data);
 
     if (res.status === 200) {
       return {

src/server.js

@@ -1,17 +1,20 @@
+import dotenv from 'dotenv';
+
 import sirv from 'sirv';
 import polka from 'polka';
 import compression from 'compression';
 import * as sapper from '@sapper/server';
 
-const { PORT, NODE_ENV } = process.env;
-const dev = NODE_ENV === 'development';
+import { getConfig } from './config';
+
+const config = getConfig(dotenv.config().parsed);
 
 polka() // You can also use Express
-	.use(
-		compression({ threshold: 0 }),
-		sirv('static', { dev }),
-		sapper.middleware()
-	)
-	.listen(PORT, err => {
-		if (err) console.log('error', err);
-	});
+  .use(
+    compression({ threshold: 0 }),
+    sirv('static', { dev: true }),
+    sapper.middleware()
+  )
+  .listen(config.port, (err) => {
+    if (err) console.log('error', err);
+  });

src/utils/functions/supabase.js

@@ -0,0 +1,8 @@
+import { createClient } from '@supabase/supabase-js';
+
+import config from '../../config';
+
+export const supabase = createClient(
+  config.supabaseConfig.url,
+  config.supabaseConfig.anonKey
+);