refactoring, typescript:

* problems with CKEditor in ExamPage.tsx
Unipisa · Oct 16, 2023 · ff6ea45 · ff6ea45
1 parent b7d69d4
commit ff6ea45
Show file tree

Hide file tree

Showing 106 changed files with 14,244 additions and 554 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
+    "@types/ckeditor": "^4.9.10",
     "axios": "^0.26.1",
     "bootstrap": "^4.6.0",
     "bootstrap-select": "^1.13.18",

diff --git a/frontend/src/components/Card.js → frontend/src/components/Card.tsx b/frontend/src/components/Card.js → frontend/src/components/Card.tsx
@@ -1,5 +1,3 @@
-'use strict'
-
 import React from "react";
 
 import { default as BootStrapCard } from 'react-bootstrap/Card';
@@ -27,10 +25,14 @@ export default function Card({
     className,
     title,
     customHeader,
-    // titleClass,
-    // titleBg,
     onClick,
     children
+}:{
+    className?: string,
+    title?: string,
+    customHeader?: JSX.Element,
+    onClick?: () => void,
+    children?: JSX.Element | JSX.Element[]
 }) {
     let cardClass = classWithDefault(className, 'shadow my-2');
     // let headerClass = titleBg || 'bg-primary';

diff --git a/frontend/src/components/Comments.js → frontend/src/components/Comments.tsx b/frontend/src/components/Comments.js → frontend/src/components/Comments.tsx
@@ -1,15 +1,12 @@
-'use strict';
-
 import React, { useState } from 'react'
+import assert from 'assert'
 
 import { useEngine, useIndex, useDelete, usePost } from "../modules/engine"
-import Attachment from "../models/Attachment"
-import Comment from "../models/Comment"
 import Card from "./Card";
 import LoadingMessage from '../components/LoadingMessage'
 
 export default function Comments({object_id}) {
-    const commentsQuery = useIndex(Comment, { object_id })
+    const commentsQuery = useIndex('comments/', { object_id })
 
     if (commentsQuery.isLoading) return <LoadingMessage>caricamento commenti...</LoadingMessage>
     if (commentsQuery.isError) return <div>errore caricamento commenti</div>    
@@ -27,19 +24,16 @@ export default function Comments({object_id}) {
     </>
 }
 
-function CommentCard({ comment, userUpdater }) {
+function CommentCard({ comment, userUpdater }: 
+    { 
+        comment: any, 
+        userUpdater?: (user: Comment) => void 
+    }) {
     const engine = useEngine()
-    const deleter = useDelete(Comment, comment._id)
+    const deleter = useDelete('comments/', comment._id)
+
+    if (!engine) return null
 
-    function deleteComment() {
-        engine.modalConfirm("Elimina commento", "confermi di voler eliminare il commento?")
-            .then(confirm => {
-                if (confirm) {
-                    deleter.mutate(null)
-                }
-            })
-
-    }
     return <>
         <div className='mb-2 rounded border border-left-info p-1 d-flex justify-content-between align-items-end'>
             <div>
@@ -50,6 +44,16 @@ function CommentCard({ comment, userUpdater }) {
             <div className='btn btn-sm btn-danger' onClick={deleteComment}>Elimina</div>
         </div>
     </>
+
+    function deleteComment() {
+        engine?.modalConfirm("Elimina commento", "confermi di voler eliminare il commento?")
+            .then(confirm => {
+                if (confirm) {
+                    deleter.mutate()
+                }
+            })
+
+    }    
 }
 
 /**
@@ -62,11 +66,11 @@ function CommentCard({ comment, userUpdater }) {
 */
 function CommentWidget({object_id}) {
     const engine = useEngine()
-    const attachmentInserter = usePost(Attachment)
-    const commentInserter = usePost(Comment)
+    const attachmentInserter = usePost('attachments/')
+    const commentInserter = usePost('comments/')
     const [text, setText] = useState("")
-    const [files, setFiles] = useState([])
-    const [error, setError] = useState({})
+    const [files, setFiles] = useState<number[]>([])
+    const [error, setError] = useState<any>({})
 
     function addFile() {
         setError({})
@@ -88,34 +92,37 @@ function CommentWidget({object_id}) {
         for (const id of files) {
             // TODO: vedi se c'è un modo migliore di recuperare l'input che non
             // sia tramite document.getElementById
-            const file = document.getElementById(`allegato-${id}`).files[0]
+            const el = document.getElementById(`allegato-${id}`) as HTMLInputElement
+            if (!el) continue
+            if (!el.files) continue   
+            const file = el.files[0]
             if (file !== undefined) data.append(`allegato-${id}`, file, file.name)
         }
 
-        attachmentInserter.mutate(data, {
+        attachmentInserter.mutate(data as any, {
             onSuccess: (res) => {
                 const attachmentIds = res.data
                 const comment = {
                     object_id,
                     content: text,
                     attachments: attachmentIds
                 }
-                commentInserter.mutate(comment, {
+                commentInserter.mutate(comment as any, {
                     onSuccess: (commentId) => {
                         setText("")
                         setFiles([])
                         setError({})
                     },
                     onError: (err) => {
-                        engine.flashError(`${err}`)
+                        engine?.flashError(`${err}`)
                     }
                 })
             },
-            onError: (err) => {
-                if (err.code === 422) {
+            onError: (err:any) => {
+                if (err?.code === 422) {
                     setError(err)
                 } else {
-                    engine.flashError(`${err}`)
+                    engine?.flashError(`${err}`)
                 }
             }
         })
@@ -137,7 +144,7 @@ function CommentWidget({object_id}) {
                 }
             </div>
             {error &&
-                <div className="text-danger">{error.message}</div>
+                <div className="text-danger">{error?.message}</div>
             }        
             <div className="d-flex justify-content-between">
                 <button className="btn btn-primary" onClick={addFile}>

diff --git a/frontend/src/components/Flash.js → frontend/src/components/Flash.tsx b/frontend/src/components/Flash.js → frontend/src/components/Flash.tsx
@@ -1,14 +1,17 @@
 import React from "react";
 import Card from "./Card";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import FA from "react-fontawesome";
 
-function FlashCard({className, message, onClick}) {
+function FlashCard({className, message, onClick}:{
+    className: string,
+    message: string,
+    onClick: () => void
+}) {
     return <Card className={`border-left-${className} mb-2`} onClick={onClick}>
         <div className="d-flex align-middle">
             <div className="mr-auto">{message}</div>
             <div className="align-middle" style={{ cursor: 'pointer' }}>
-                <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>
+                <FA name="fa-times" />
             </div>
         </div>
     </Card>;
@@ -29,8 +32,7 @@ function Flash({ messages, onClick }) {
             className={ classForType(message.type) }
             message={ message.message }
             onClick={ onClick }
-            >
-        </FlashCard>);
+            />)
 }
 
 export default Flash;
diff --git a/frontend/src/components/Footer.js → frontend/src/components/Footer.tsx b/frontend/src/components/Footer.js → frontend/src/components/Footer.tsx
diff --git a/frontend/src/components/Group.js → frontend/src/components/Group.tsx b/frontend/src/components/Group.js → frontend/src/components/Group.tsx
@@ -2,15 +2,21 @@ import React from "react"
 
 import Form from 'react-bootstrap/Form'
 
-export default function Group({ controlId, label, validationError, children, ...controlProps }) {
+export default function Group({ controlId, label, validationError, children, ...controlProps }:{
+    controlId: string,
+    label: string,
+    validationError?: string,
+    children?: any,
+    [key: string]: any,
+}) {
     return (
         <Form.Group className="mb-3" controlId={controlId} >
         <Form.Label>{label}</Form.Label>
         {
             children === undefined
             ? <Form.Control
-            {...controlProps}
-            className={validationError ? "border border-danger" : ""}
+                {...controlProps}
+                className={validationError ? "border border-danger" : ""}
             />
             : children
         }

diff --git a/frontend/src/components/LoadingMessage.js b/frontend/src/components/LoadingMessage.js
diff --git a/frontend/src/components/LoadingMessage.tsx b/frontend/src/components/LoadingMessage.tsx
@@ -0,0 +1,10 @@
+import React from "react"
+
+export default function LoadingMessage({children}:{
+    children?: any
+}) {
+    return <div style={{ display: "flex", alignItems: "center" }}>
+        <div className="spinner-border spinner-border-sm text-primary mr-2" role="status"></div>
+        <div>{children}</div>
+    </div>;
+}
diff --git a/frontend/src/components/Login.js → frontend/src/components/Login.tsx b/frontend/src/components/Login.js → frontend/src/components/Login.tsx
@@ -7,6 +7,8 @@ import Flash from "../components/Flash"
 export default function Login({}) {
     const engine = useEngine()
 
+    if (!engine) return null
+
     return <div className="container">
         <div className="row justify-content-center">
             <div className="col-xl-6 col-lg-6 col-md-9">
@@ -51,7 +53,7 @@ function UnipiLogin({}) {
         </div>
         <div className="card-body">
             <p>Effettua il login usando le credenziali di Ateneo.</p>
-            <Button onClick={() => engine.start_oauth2()}><i className="fas fa-key mr-2" /> Login</Button>
+            <Button onClick={() => engine?.start_oauth2()}><i className="fas fa-key mr-2" /> Login</Button>
         </div>
     </div>
 }
@@ -61,7 +63,7 @@ function LocalLogin({}) {
     const [username, setUsername] = React.useState("")
     const [password, setPassword] = React.useState("")
     return <>
-        <div className="card-header"  data-toggle="collapse" href="#local-login" role="button" aria-expanded="false" aria-controls="local-login">
+        <div className="card-header"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="local-login">
             <div className="d-flex flex-row">
                 <i className="mr-3 mt-auto mb-auto fa fa-chevron-down"></i>
                 <div>Credenziali locali</div>
@@ -90,7 +92,7 @@ function LocalLogin({}) {
 
     async function login() {
         try {
-            await engine.login(username, password)
+            await engine?.login(username, password)
         } catch(err) {
             console.error(err)
         }

diff --git a/frontend/src/components/Modal.js → frontend/src/components/Modal.tsx b/frontend/src/components/Modal.js → frontend/src/components/Modal.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import React from "react"
 
 function Modal({ title, content, callback }) {
-    const show = !!content; 
-    title ||= "conferma";
-    callback ||= () => {};
+    const show = !!content
+    title ||= "conferma"
+    callback ||= () => {}
     return <>
         <div style={{ 
                 position: "fixed", 
@@ -18,7 +18,7 @@ function Modal({ title, content, callback }) {
             }}>
             &nbsp;
         </div>
-        <div className={"modal" + (show ? " d-block" : "") } tabIndex="-1" role="dialog">
+        <div className={"modal" + (show ? " d-block" : "") } role="dialog">
             <div className="modal-dialog" role="document">
             <div className="modal-content">
                 <div className="modal-header">