SSR for the Dashboard

This commit is contained in:
Andrea Fazzi 2022-10-12 09:14:31 +02:00
parent 6ed2c97e0a
commit 522d344372
8 changed files with 59 additions and 56 deletions

View file

@ -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> -->

View file

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

View file

@ -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[] };
}
}

View file

@ -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>

View file

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

View file

@ -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

View file

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

View file

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