Fetch exercise from server

.gitignore

@@ -3,3 +3,4 @@
 /src/node_modules/@sapper/
 yarn-error.log
 /__sapper__/
+.env

package-lock.json

@@ -1332,6 +1332,50 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@supabase/gotrue-js": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-1.17.0.tgz",
+      "integrity": "sha512-c+GSSoW+PIT3/r7TnBdc4gPjtWDutO/2ROafSKUFl39Pb8aHIUbUvzK9sjuedaaLKH7bV8VefuRy2L8c0BUAzg==",
+      "requires": {
+        "cross-fetch": "^3.0.6"
+      }
+    },
+    "@supabase/postgrest-js": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-0.33.0.tgz",
+      "integrity": "sha512-og6Evdkan7Qp6+tOch7Pyq+ZWMnrCQtPHWwPpsN5A3iYQSro2yn21Yvazs9qAFoWAeTGNkuTOVpShT5Mbc9WcQ==",
+      "requires": {
+        "cross-fetch": "^3.0.6"
+      }
+    },
+    "@supabase/realtime-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-1.1.1.tgz",
+      "integrity": "sha512-kUew5KPjgWYtenxrQJWZ/tHMGlg5Qz++bbsiY8Y89AjZQioSO557MlGHaEoT6k4s7CJ6e/ctNsT7tRhCKJimcQ==",
+      "requires": {
+        "@types/websocket": "^1.0.3",
+        "websocket": "^1.0.34"
+      }
+    },
+    "@supabase/storage-js": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-1.4.0.tgz",
+      "integrity": "sha512-7+SGyXOgdhtz8qHzXo64HiS66PT/y4F8YFNMtXqYOu1LjHh0YwtOgpPLDA8obiSsNVwZiKwpgBJkz4LHG1YvRQ==",
+      "requires": {
+        "cross-fetch": "^3.1.0"
+      }
+    },
+    "@supabase/supabase-js": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-1.20.0.tgz",
+      "integrity": "sha512-G+BKKlr6a+q5Rf6OcNP3LInTih+hP92gmWp6zQZL2rYVvCa51LLhAtu+NrgMR6+AYs1D7ipLKYYiiq85Oerazg==",
+      "requires": {
+        "@supabase/gotrue-js": "^1.16.6",
+        "@supabase/postgrest-js": "^0.33.0",
+        "@supabase/realtime-js": "^1.1.1",
+        "@supabase/storage-js": "^1.4.0"
+      }
+    },
     "@tailwindcss/forms": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.2.tgz",
@@ -1355,8 +1399,7 @@
     "@types/node": {
       "version": "15.6.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-15.6.0.tgz",
-      "integrity": "sha512-gCYSfQpy+LYhOFTKAeE8BkyGqaxmlFxe+n4DKM6DR0wzw/HISUE/hAmkC/KT8Sw5PCJblqg062b3z9gucv3k0A==",
+      "integrity": "sha512-gCYSfQpy+LYhOFTKAeE8BkyGqaxmlFxe+n4DKM6DR0wzw/HISUE/hAmkC/KT8Sw5PCJblqg062b3z9gucv3k0A=="
-      "dev": true
     },
     "@types/pug": {
       "version": "2.0.4",
@@ -1382,6 +1425,14 @@
         "@types/node": "*"
       }
     },
+    "@types/websocket": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.3.tgz",
+      "integrity": "sha512-ZdoTSwmDsKR7l1I8fpfQtmTI/hUwlOvE3q0iyJsp4tXU0MkdrYowimDzwxjhQvxU4qjhHLd3a6ig0OXRbLgIdw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1621,6 +1672,14 @@
       "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
       "dev": true
     },
+    "bufferutil": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.3.tgz",
+      "integrity": "sha512-yEYTwGndELGvfXsImMBLop58eaGW+YdONi1fNjTINSY98tmMmFijBG6WXgdkfuLNt4imzQNtIE+eBp1PVpMCSw==",
+      "requires": {
+        "node-gyp-build": "^4.2.0"
+      }
+    },
     "builtin-modules": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
@@ -1974,6 +2033,14 @@
         }
       }
     },
+    "cross-fetch": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz",
+      "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==",
+      "requires": {
+        "node-fetch": "2.6.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2004,6 +2071,15 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "^0.10.50",
+        "type": "^1.0.1"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -2091,6 +2167,11 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -2124,6 +2205,35 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
+      "requires": {
+        "es6-iterator": "~2.0.3",
+        "es6-symbol": "~3.1.3",
+        "next-tick": "~1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -2153,6 +2263,21 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "ext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
+      "requires": {
+        "type": "^2.0.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.5.0.tgz",
+          "integrity": "sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw=="
+        }
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2996,6 +3121,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -3014,6 +3144,11 @@
         "lodash.toarray": "^4.4.0"
       }
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-gyp": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz",
@@ -3041,6 +3176,11 @@
         }
       }
     },
+    "node-gyp-build": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.2.3.tgz",
+      "integrity": "sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg=="
+    },
     "node-releases": {
       "version": "1.1.72",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
@@ -4289,6 +4429,19 @@
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "typescript": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
@@ -4349,6 +4502,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "utf-8-validate": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.5.tgz",
+      "integrity": "sha512-+pnxRYsS/axEpkrrEpzYfNZGXp0IjC/9RIxwM5gntY4Koi8SHmUGSfxfWqxZdRxrtaoVstuOzUp/rbs3JSPELQ==",
+      "requires": {
+        "node-gyp-build": "^4.2.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4383,6 +4544,19 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "websocket": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
+      "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
+      "requires": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.50",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4468,6 +4642,11 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
       "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
     },
+    "yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha1-8m9ITXJoTPQr7ft2lwqhYI+/lXc="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

package.json

@@ -9,8 +9,10 @@
     "start": "node __sapper__/build"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^1.20.0",
     "@tailwindcss/forms": "^0.3.2",
     "compression": "^1.7.1",
+    "dotenv": "^10.0.0",
     "hotkeys-js": "^3.8.5",
     "js-yaml": "^4.1.0",
     "marked": "^1.2.7",

rollup.config.js

@@ -1,21 +1,21 @@
-import resolve from "@rollup/plugin-node-resolve";
+import resolve from '@rollup/plugin-node-resolve';
-import replace from "@rollup/plugin-replace";
+import replace from '@rollup/plugin-replace';
-import commonjs from "@rollup/plugin-commonjs";
+import commonjs from '@rollup/plugin-commonjs';
-import svelte from "rollup-plugin-svelte";
+import svelte from 'rollup-plugin-svelte';
-import babel from "@rollup/plugin-babel";
+import babel from '@rollup/plugin-babel';
-import { terser } from "rollup-plugin-terser";
+import { terser } from 'rollup-plugin-terser';
-import config from "sapper/config/rollup.js";
+import config from 'sapper/config/rollup.js';
-import sveltePreprocess from "svelte-preprocess";
+import sveltePreprocess from 'svelte-preprocess';
 
-import pkg from "./package.json";
+import pkg from './package.json';
 
 const mode = process.env.NODE_ENV;
-const dev = mode === "development";
+const dev = mode === 'development';
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
 const onwarn = (warning, onwarn) =>
-  (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
+  (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
-  (warning.code === "CIRCULAR_DEPENDENCY" &&
+  (warning.code === 'CIRCULAR_DEPENDENCY' &&
     /[/\\]@sapper[/\\]/.test(warning.message)) ||
   onwarn(warning);
 
@@ -27,54 +27,54 @@ export default {
     output: config.client.output(),
     plugins: [
       replace({
-        "process.browser": true,
+        'process.browser': true,
-        "process.env.NODE_ENV": JSON.stringify(mode),
+        'process.env.NODE_ENV': JSON.stringify(mode),
-        preventAssignment: true
+        preventAssignment: true,
       }),
       svelte({
         preprocess,
         dev,
         hydratable: true,
-        emitCss: true
+        emitCss: true,
       }),
       resolve({
         browser: true,
-        dedupe: ["svelte"]
+        dedupe: ['svelte'],
       }),
       commonjs(),
 
       legacy &&
         babel({
-          extensions: [".js", ".mjs", ".html", ".svelte"],
+          extensions: ['.js', '.mjs', '.html', '.svelte'],
-          babelHelpers: "runtime",
+          babelHelpers: 'runtime',
-          exclude: ["node_modules/@babel/**"],
+          exclude: ['node_modules/@babel/**'],
           presets: [
             [
-              "@babel/preset-env",
+              '@babel/preset-env',
               {
-                targets: "> 0.25%, not dead"
+                targets: '> 0.25%, not dead',
-              }
+              },
-            ]
+            ],
           ],
           plugins: [
-            "@babel/plugin-syntax-dynamic-import",
+            '@babel/plugin-syntax-dynamic-import',
             [
-              "@babel/plugin-transform-runtime",
+              '@babel/plugin-transform-runtime',
               {
-                useESModules: true
+                useESModules: true,
-              }
+              },
-            ]
+            ],
-          ]
+          ],
         }),
 
       !dev &&
         terser({
-          module: true
+          module: true,
-        })
+        }),
     ],
 
     preserveEntrySignatures: false,
-    onwarn
+    onwarn,
   },
 
   server: {
@@ -82,27 +82,27 @@ export default {
     output: config.server.output(),
     plugins: [
       replace({
-        "process.browser": false,
+        'process.browser': false,
-        "process.env.NODE_ENV": JSON.stringify(mode),
+        'process.env.NODE_ENV': JSON.stringify(mode),
-        preventAssignment: true
+        preventAssignment: true,
       }),
       svelte({
         preprocess,
-        generate: "ssr",
+        generate: 'ssr',
         hydratable: true,
-        dev
+        dev,
       }),
       resolve({
-        dedupe: ["svelte"]
+        dedupe: ['svelte'],
       }),
-      commonjs()
+      commonjs(),
     ],
     external: Object.keys(pkg.dependencies).concat(
-      require("module").builtinModules
+      require('module').builtinModules
     ),
 
-    preserveEntrySignatures: "strict",
+    preserveEntrySignatures: 'strict',
-    onwarn
+    onwarn,
   },
 
   // serviceworker: {

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} />
+  <Preview
-{:else if !questions.length}
+    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>
+    <h2 class="my-1">{$questionnaire.title}</h2>
-    <p>{description}</p>
+    <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(() => {
+    if (courseData.exercise && courseData.exercise.data) {
-    lessons.set(courseData.lessons);
+      questionnaire.set(courseData.exercise.data);
-
+      questionnaireMetaData.set(courseData.exercise.answers);
-    if (courseData.lesson) {
-      lesson.set(courseData.lesson);
     }
-  });
+  }
+
+  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;
+import { getConfig } from './config';
-const dev = NODE_ENV === 'development';
+
+const config = getConfig(dotenv.config().parsed);
 
 polka() // You can also use Express
-	.use(
+  .use(
-		compression({ threshold: 0 }),
+    compression({ threshold: 0 }),
-		sirv('static', { dev }),
+    sirv('static', { dev: true }),
-		sapper.middleware()
+    sapper.middleware()
-	)
+  )
-	.listen(PORT, err => {
+  .listen(config.port, (err) => {
-		if (err) console.log('error', 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
+);