Codice per imparare

event.preventDefault56

1

 
1

 
1

{playing ? "Stop" : "Play"}
1

 

USESTATE

1

 

RENDER CONDIZIONALE

1

{playing ? "Stop" : "Play"}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

   {(props.salva === "multipla" && props.risposta_singola.key !== '') &&
      <button> Cancella_immagine_dal_bucket_S3()}&gt; Erase2 </button>
   }
function Mostra_alert() {
    if (show_alert) {
        return
<div class="alert alert-success" role="alert">This is a success alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>
    }
    if (!show) {
        console.log('sadgsdfgdsfgsdfgdsfgds')
        return 
    }
}
 
return (
<div>{Mostra_alert()}</div>
ine="1">);

Altro esempio

1
2
3
4
5

function Mostra_progress_bar() {
        let barra = -100*props.item.indice_aux/props.item.indice_end
//        console.log (barra)
        if (barra &gt; 0) {
            return
1
2
3

        }
        if (barra &lt; 0) {
            return

}
}

return (

{Mostra_progress_bar()}

)

Render un Oggettoid con i suoi elementi

1
2
3
4

        }
    }
 
    return (

You have {item.alunno.nome} unread messages.

1

    )

CSS

Cambiare il CSS tramite una funzione

1

   {item.alunno !== undefined &amp;&amp;
{‘ ‘}
1

   }

PAGINE DI BASE

1
2
3
4
5
6
7

    function colorazione(item) {
        var hStyle = {
            backgroundColor: item.colore_sfondo, color: item.colore_sfondo, margin: '1px',
            padding: '1px', border: 'lightgreen', borderRadius: '2vmin'
        };
        return hStyle;
    }

UTILIZZARE UNA FUNZIONE IN UN ALTRA PAGINA

1

 

Nel file che chiama la funzione esterna

1
2
3
4
5
6
7
8
9
10
11

import React, { useState } from 'react';
//import './navbar.css';
import { Link } from "react-router-dom"
import Scroll_evento from "./X2_scroll_evento.jsx";
const Scroll_evento = () =&gt; {
//    const [somma, calcola_somma] = useState('');
    return (
<div>ciao2</div>
   )
}
export default Scroll_evento;

Quando serve una libreria come AXIOS il modo per chiamarla è diverso

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const { AWS_uploadFile_PDF, AWS_geturl_PDF, AWS_cancella_file } = require('./S3_File_pdf')
 
// uploads a file to s3
function AWS_uploadFile_PDF(file) {
    const fileStream = fs.createReadStream(file.path)
    const uploadParams = {
        Bucket: bucketName,
        Body: fileStream,
        Key: file.filename,
        //        ContentDisposition: "inline",
        ContentType: "application/pdf"
    }
    return s3.upload(uploadParams).promise()
}
exports.AWS_uploadFile_PDF = AWS_uploadFile_PDF

PAGINE DI BASE CHIAMATA DI UNA FUNZIONE DI APPOGGIO CON UN RETURN

DROPDWON MENU

1

const { AWS_uploadFile_PDF } = require('../funzioni_comuni_array_classi')
{Cambia_nome_allegati()}

{/* Action */} Cancella domanda Modifica domanda {isLoggedIn && ( <> {props.item._id} )}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

const axios = require('axios')
 
function AWS_uploadFile_PDF(file) {
   console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ssaedgfwerrfgh')
};
exports.AWS_uploadFile_PDF = AWS_uploadFile_PDF;
 
 
function aggiungi_classi_non_spalmate_array (materiale_id, programma_della_classe, id_utente) {
    axios.get('/materiali/trova_materiale/' + materiale_id)
    .then((res) =&gt; {
        console.log('MATERIALI appena fecciate da mongo')
        console.log(res.data)
        let lista_classi_gia_presenti = res.data.array_classi
        console.log('id_utente' + id_utente)
        console.log('programma_della_classe' + programma_della_classe)
 
        axios.get('/classi/classi_carica_tutti_programma/' + id_utente + '/' + programma_della_classe)
        .then((res) =&gt; {
            console.log('CLASSI appena fecciate da mongo')
            let lista_classi_per_programma = res.data
            controlla_se_aggiungere_classi_ad_array(lista_classi_gia_presenti, lista_classi_per_programma, materiale_id)        
 
        }).catch((error) =&gt; {
            console.log(error)
        });
 
 
 
    }).catch((error) =&gt; {
        console.log(error)
    });
}
exports.aggiungi_classi_non_spalmate_array = aggiungi_classi_non_spalmate_array
 
 
function trova_classi_che_seguono_il_programma (programma_della_classe, id_utente) {
    axios.get('/classi/classi_carica_tutti_programma/' + id_utente + '/' + programma_della_classe)
    .then((res) =&gt; {
        console.log('CLASSI appena fecciate da mongo')
        return res.data
    }).catch((error) =&gt; {
        console.log(error)
    });
}
exports.trova_classi_che_seguono_il_programma = trova_classi_che_seguono_il_programma

PAGINE DI BASE CON UN PULSANTE CHE APRE UN FORM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

import React, { useState } from 'react';
import axios from 'axios'
import '../App.css';
import { Dropdown, DropdownButton, Accordion, Card, Button, Modal, Form } from 'react-bootstrap';
import Risposta_modifica from './X15_0_edit_risposta';
import { useSelector, useDispatch } from 'react-redux'
 
async function salva_file_server_s3({ image, description }) {
    const formData = new FormData();
    formData.append("image", image)
    formData.append("description", description)
    const result = await axios.post('/transfer_s3/file_pdf', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
    console.log('tornato nel front end')
    console.log(result.data)
    return result.data
}
 
 
const Gestione_menu_alto_destra = (props) =&gt; {
    const [file, setFile] = useState()
    const [description, setDescription] = useState("")
    const [images, setImages] = useState([])
    const [show_edit_domanda, setShow_edit_domanda] = useState(false);
 
    const id_utente = useSelector(state =&gt; state.variabile.value)
    const isLoggedIn = id_utente === "612fb32ad7c7ea0bf37cbe8f"
 
    const submit = async event =&gt; {
        event.preventDefault()
        const result = await salva_file_server_s3({ image: file, description })
        setImages([result.image, ...images])
        console.log(result.Key)
        console.log(file)
    }
 
 
    const fileSelected = event =&gt; {
        const file = event.target.files[0]
        setFile(file)
    }
 
 
    const handleSubmit1 = (e) =&gt; {
        alert('scrivi qualcosa')
    }
 
 
    const ottieni_url = (indirizzo) =&gt; {
    };
 
 
    const cancella_url = (id, id_array, key) =&gt; {
 
    }
 
 
    function Cambia_nome_allegati() {
        if (props.elenco_pdf !== undefined) { 
            if (props.elenco_pdf.length &gt; 0) {
                return <strong>
                    Allegati
                </strong>
            }
        }
        return <strong>
            |||
        </strong>
    }
 
 
    const handleSelect=(e)=&gt;{
        console.log(e);
		if (e === "Cancella_Domanda") {cancellazione_domanda()}    
    	if (e === "Modifica_Domanda") {setShow_edit_domanda(true)}    
    }
 
 
    function cancellazione_domanda(e) {
 
    }
 
 
    return (
1
2
3

    )
}
export default Gestione_menu_alto_destra;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import React, { useState } from 'react';
//import './navbar.css';
import { Link } from "react-router-dom"
import { Dropdown, DropdownButton, Accordion, Card, Button, Modal, Form } from 'react-bootstrap';
import { BsFillFileEarmarkPlusFill } from "react-icons/bs";
 
const Upload_files_mp3 = () =&gt; {
//    const [somma, calcola_somma] = useState('');
    const [show, setShow] = useState(false);
    const Chiusura_della_finestra_modale = () =&gt; {
        setShow(false);
    }
    const apertura_finestra_modale = () =&gt; {
        setShow(true)
    }
    return (
        &lt;&gt;
 
 
            Edit

AXIOS

1
2
3

 
            <button> Chiusura_della_finestra_modale()}&gt; Annulla </button>
            <button> Chiusura_della_finestra_modale()}&gt;Salva</button>
1
2
3

    )
}
export default Upload_files_mp3;
1
2
3
4
5
6
7
8
9
10
11

    const nuovi_indici = {
        indice_end: indice_end,
        indice_aux: -indice_end - 1,
        indice_now: -indice_end
    }
    axios.patch('/domande/modifica_indici/' + props.item._id, nuovi_indici)
        .then((res) =&gt; {
            console.log(res.data)
        }).catch((error) =&gt; {
            console.log(error)
        });

Fare una chiamata con axios e aspettare la risposta per poter fare altre cose
Serve una funzione asincroina

1
2
3
4
5
6

axios.patch('/classi/classe_modifica/' + props.id, input)
    .then((res) =&gt; {
        console.log(res.data)
    }).catch((error) =&gt; {
        console.log(error)
    });

UPLOAD E LETTURA DI UN FILE

La variabile fileReader viene in pratica dichiarata come globale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

        axios.get('/domande/carica_tutte_sort_old/', {
            params: {
                id_utente: id_utente,
                ordine_visualizzazione: ordine_visualizzazione,
                solo_mp3: input_opzioni.solo_mp3, 
                show_nomat: input_opzioni.show_nomat,
                scelta_query: input_opzioni.scelta_query,
                lista_materie: JSON.stringify(lista_materie_caricate_da_mongo)
            }
        }).then((res) =&gt; {
                SET_max_indice_aux(lista_domande[0].indice_aux)
                crea_lista_stornati(res.data, lista_materie_caricate_da_mongo)
            }).catch((error) =&gt; {
                console.log(error)
            });
handleFileChosen(e.target.files[0])} />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

    const Invia_file_al_bucket_S3 = async event =&gt; {
 
//        const result = await salva_file_server_s3({ image: file, description })
//        event.preventDefault()
 
        console.log('INVIA AL BUCKET')
        console.log('salva' + props.salva)
        console.log('key' + props.key)
/*        
        axios.post('/transfer_s3/file_jpg_cancella/' + props.item.indirizzo_S3_immagine_domanda.key)
        .then((res) =&gt; {
            console.log('Cancellato un file pdf')
        }).catch((error) =&gt; {
            console.log('errore nella richiesta')
            console.log(error)
        });
*/    
        const formData = new FormData();
        formData.append("image", file)
        formData.append("description", description)
        const result = await axios.post('/transfer_s3/file_jpg', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
        console.log('tornato nel front end')
        console.log(result)
//        set_key_aws (result.data.key)
        console.log(file)
        console.log(file.name)
        const nuova_immagine_s3 = {
            key:  result.data.key,
            descrizione: 'descrizione'
        }
 
        if (props.salva === "domanda") { 
            axios.patch('/domande/modifica_immagine_domanda_S3/' + props.item._id, nuova_immagine_s3)
            .then((res) =&gt; {
                console.log(res.data)
//                props.SET_cambio_stato(!props.cambio_stato)
            }).catch((error) =&gt; {
                console.log(error)
            });
        }
        if (props.salva === "multipla") {
            axios.patch('/domande/aggiorna_risposta_multipla_key/' + props.item._id + '/' + props.indice + '/' + result.data.key)
            .then((res) =&gt; {
                console.log(res.data)
            }).catch((error) =&gt; {
                console.log(error)
            });
        }
    }
On: