SSR for the Dashboard

frontend/src/lib/components/codemirror/codemirror.svelte

@@ -1,17 +1,17 @@
 <script context="module">
   import { EditorView, minimalSetup, basicSetup } from "codemirror";
-  import { ViewPlugin } from "@codemirror/view";
   import { StateEffect } from "@codemirror/state";
   export { minimalSetup, basicSetup };
 </script>
 
-<script>
+<script lang="ts">
   import { onMount, onDestroy, createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
 
-  let dom;
+  let dom: any;
 
   let _mounted = false;
+
   onMount(() => {
     _mounted = true;
     return () => {
@@ -19,21 +19,21 @@
     };
   });
 
-  export let view = null;
+  export let view: any = null;
 
   /* `doc` is deliberately made non-reactive for not storing a reduntant string
    besides the editor. Also, setting doc to undefined will not trigger an
    update, so that you can clear it after setting one. */
-  export let doc;
+  export let doc: string;
 
   /* Set this if you would like to listen to all transactions via `update` event. */
   export let verbose = false;
 
   /* Cached doc string so that we don't extract strings in bulk over and over. */
-  let _docCached = null;
+  let _docCached: string = "";
 
   /* Overwrite the bulk of the text with the one specified. */
-  function _setText(text) {
+  function _setText(text: string) {
     view.dispatch({
       changes: { from: 0, to: view.state.doc.length, insert: text },
     });
@@ -58,7 +58,7 @@
 
       return () => void subscribers.delete(cb);
     },
-    set(newValue) {
+    set(newValue: string) {
       if (!_mounted) {
         throw new Error(
           "Cannot set docStore when the component is not mounted."
@@ -80,7 +80,7 @@
   }
   $: extensions, _reconfigureExtensions();
 
-  function _editorTxHandler(tr) {
+  function _editorTxHandler(tr: any) {
     this.update([tr]);
 
     if (verbose) {
@@ -88,7 +88,7 @@
     }
 
     if (tr.docChanged) {
-      _docCached = null;
+      _docCached = "";
       if (subscribers.size) {
         dispatchDocStore((_docCached = tr.newDoc.toString()));
       }
@@ -104,7 +104,7 @@
 
   // the view will be inited with the either doc (as long as that it is not `undefined`)
   // or the value in docStore once set
-  function _initEditorView(initialDoc) {
+  function _initEditorView(initialDoc: string) {
     if (view !== null) {
       return false;
     }
@@ -119,7 +119,7 @@
   }
 
   $: if (_mounted && doc !== undefined) {
-    const inited = _initEditorView(doc);
+    _initEditorView(doc);
     dispatchDocStore(doc);
   }
 
@@ -137,37 +137,3 @@
     display: contents;
   }
 </style>
-
-<!-- <script lang="ts"> -->
-<!--   import { EditorView, basicSetup, minimalSetup } from "codemirror"; -->
-<!--   import { EditorState } from "@codemirror/state"; -->
-
-<!--   import { onMount, createEventDispatcher } from "svelte"; -->
-
-<!--   const dispatch = createEventDispatcher(); -->
-
-<!--   let view; -->
-<!--   let dom; -->
-
-<!--   onMount(() => { -->
-<!--     let startState = EditorState.create({ -->
-<!--       doc: "Hello World", -->
-<!--     }); -->
-
-<!--     view = new EditorView({ -->
-<!--       state: startState, -->
-<!--       extensions: [minimalSetup], -->
-<!--       parent: dom, -->
-<!--     }); -->
-<!--   }); -->
-<!-- </script> -->
-
-<!-- <div> -->
-<!--   <div class="codemirror" bind:this="{dom}"></div> -->
-<!-- </div> -->
-
-<!-- <style> -->
-<!--   .codemirror { -->
-<!--     display: contents; -->
-<!--   } -->
-<!-- </style> -->

frontend/src/routes/+page.svelte

@@ -6,7 +6,6 @@
   const _identity = get(identity);
 </script>
 
-<!-- -------------------------------------------------------------------------->
 <section id="welcome">
   <h1>Probo</h1>
 

frontend/src/routes/dashboard/+page.server.ts

@@ -0,0 +1,24 @@
+type Question = {
+  text: string;
+};
+
+type Answer = {
+  text: string;
+};
+
+type Quiz = {
+  uid: string;
+  question: Question;
+  answers: Answer[];
+};
+
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+  const res = await fetch("http://localhost:8080/quizzes");
+  const response = await res.json();
+
+  console.log(response);
+  if (response.status === "success") {
+    return { quizzes: (await response.content) as Quiz[] };
+  }
+}

frontend/src/routes/dashboard/+page.svelte

@@ -3,27 +3,39 @@
   import { get } from "svelte/store";
   import identity from "$lib/stores/kratos/identity";
   import CodeMirror, { basicSetup } from "$lib/components/codemirror/codemirror.svelte";
-
+  import type { PageData } from './$types';
+  
+  export let data: PageData;
+  $: quizzes = data.quizzes;
+  
   const _identity = get(identity);
   let email = "";
-  let store;
+  let store: any;
   
   if (_identity && _identity.traits) email = _identity.traits.email;
 
-  function changeHandler({ detail: {tr} }) {
+  function changeHandler({ detail: {tr: any} }) {
     console.log('change', tr.changes.toJSON())
   }
+  
 </script>
 
 <section id="dashboard">
-  <h2>Dashboard</h2>
+  <h2>Probo Dashboard</h2>
 
   <p>Hello {email}</p>
 
-  <CodeMirror doc={'Edit me!\nAnd here is the second line!!'}
+  {#each quizzes as quiz}
+    <ul>
+      <li>{quiz.Question.Text}</li>
+    </ul>
+  {/each}
+  
+  <CodeMirror doc={'Testo della domanda\n\n* Risposta 1\n* Risposta 2\n* Risposta 3'}
 	      bind:docStore={store}
 	      extensions={basicSetup}
-	      on:change={changeHandler}></CodeMirror>
+	      on:change={changeHandler}>
+  </CodeMirror>
 
   <p><a href="{APP}/auth/settings">Settings</a></p>
   <p><a href="{APP}/auth/logout">Logout</a></p>

main.go

@@ -9,7 +9,7 @@ import (
 	"github.com/sirupsen/logrus"
 )
 
-const port = "3000"
+const port = "8080"
 
 func main() {
 	//	logger.SetLevel(logger.DebugLevel)

server.go

@@ -10,6 +10,7 @@ import (
 	"git.andreafazzi.eu/andrea/probo/models"
 	"git.andreafazzi.eu/andrea/probo/store"
 	"github.com/julienschmidt/httprouter"
+	"log"
 )
 
 type ProboCollectorServer struct {
@@ -100,6 +101,7 @@ func (ps *ProboCollectorServer) updateQuizHandler(w http.ResponseWriter, r *http
 }
 
 func (ps *ProboCollectorServer) readAllQuiz(w http.ResponseWriter, r *http.Request) ([]*models.Quiz, error) {
+	log.Println(r)
 	quizzes, err := ps.store.ReadAllQuizzes()
 	if err != nil {
 		return nil, err

tests/hurl/create_new_quiz.hurl

@@ -1,4 +1,4 @@
-POST http://localhost:3000/quizzes/create
+POST http://localhost:8080/quizzes/create
 {
   "question": {"text": "Text of Question 1"},
   "answers": [

tests/hurl/read_all_quiz.hurl

@@ -1 +1 @@
-GET http://localhost:3000/quizzes
+GET http://localhost:8080/quizzes