Codice per imparare

event.preventDefault

1

 
1

 
1
2

 
{playing ? "Stop" : "Play"}

Array con map e ricerca all-interno di una corriposndena 

1
2
3
4
5
6
7
8

 
props.lista_classi_per_programma.map(function(item, index, array){
    i = array_salvato_classi.findIndex(e => e._id === item._id);
    if (i === -1) {
        aggiungi_un_giorno_ad_array(props.item._id, item._id)
    }
    console.log(this) // 80
}, 80);

Rimuove una riga in un array in base a _id 

1
2
3
4
5
6
7
8
9
10

 
function removeObjectWithId(arr, _id) {
    const objWithIdIndex = arr.findIndex((obj) => obj._id === _id);
 
    if (objWithIdIndex > -1) {
      arr.splice(objWithIdIndex, 1);
    }
 
    return arr;
  }

USESTATE

Aggiornamento di una variabile di stato UseState 

1
2
3
4
5
6
7
8
9
10

 
    function handleChange(event) {
        const { name, value } = event.target;
        setInput(prevInput => {
            return {
                ...prevInput,
                [name]: value
            }
        })
    }

usestate Variabile False True 

1

   props.set_cambio_stato1(current => !current)

usestate Incremento numero 

1

    props.setKey (prevState => prevState - 1)

usestate aggiungere un elemento ad un array PUSH oppure UNSHIFT 

1
2
3

        var lista_aux = props.lista_materie
        lista_aux.unshift({ materia: valore, accesa: true, colore_bordo: 'solid red' })
        props.SET_lista_materie([... lista_aux])

usestate aggiornamento di singoli elementi 

1
2
3
4
5
6
7
8

const [lista_variabili, set_lista_variabili] = useState(props.item.variabili_calcoli)
 
        let newArr = [...props.lista_domande_render]; // copying the old datas array
        //        newArr[props.index].materia_id = item_id; // replace e.target.value with whatever you want to change it to
        newArr[props.index].indice_end = indice_end; 
        newArr[props.index].indice_aux = -indice_end -1; 
        newArr[props.index].indice_now = -indice_end; 
        props.SET_lista_domande_render(newArr);

usestate passare variabili allo stato iniziale di usestate 

1
2
3
4
5
6
7
8

 
	const [lista_variabili, set_lista_variabili] = useState(props.item.variabili_calcoli)
 
	useEffect(() => {
        // This effect uses the `value` variable,
        // so it "depends on" `value`.
        set_lista_variabili(props.item.variabili_calcoli)
    }, [props.item.variabili_calcoli])

usestate cambiare una sola variabile in un oggetto 

1
2
3
4
5
6
7
8

 
        let updatedValue = {};
        updatedValue = {"solo_mp3":true};
        props.setinput_opzioni(prevInput => ({
 
            ...prevInput,
            ...updatedValue
        }))

RENDER CONDIZIONALE 

1
2

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

   {(props.salva === "multipla" && props.risposta_singola.key !== '') &&
      <button onClick={() => Cancella_immagine_dal_bucket_S3()}> Erase2 </button>
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
function Mostra_alert() {
    if (show_alert) {
        return <div class="alert alert-success" role="alert">
            This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
        </div>
    }
    if (!show) {
        console.log('sadgsdfgdsfgsdfgdsfgds')
        return <Navigate to="/url_form_ditta_uscita_form" replace={true} />
    }
}
 
return (
    <div>
       {Mostra_alert()}
    </div>
);

Altro esempio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 
    function Mostra_progress_bar() {
        let barra = -100*props.item.indice_aux/props.item.indice_end
//        console.log (barra)
        if (barra > 0) {
            return <div>
                           <ProgressBar variant="success" now={barra} />
            </div>
        }
        if (barra < 0) {
            return <div>
                           <ProgressBar variant="danger" now={-1*barra} />
            </div>
 
        }
    }
 
    return (
        <div>
             {Mostra_progress_bar()}
          </div>
    )

Render un Oggettoid con i suoi elementi

1
2
3
4
5

   {item.alunno !== undefined &&        
      <h2>          
         You have {item.alunno.nome} unread messages.        
      </h2> 
   }

CSS

Cambiare il CSS tramite una funzione 

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

 
    function colorazione(item) {
        var hStyle = {
            backgroundColor: item.colore_sfondo, color: item.colore_sfondo, margin: '1px',
            padding: '1px', border: 'lightgreen', borderRadius: '2vmin'
        };
        return hStyle;
    }
 
   <div style={colorazione(item)}>
      <Button variant="outline-primary" onClick={() => apertura_finestra_modale(index2)}>Modifica</Button>{' '}
   </div>

PAGINE DI BASE 

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

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

UTILIZZARE UNA FUNZIONE IN UN ALTRA PAGINA 

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

 
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

Nel file che chiama la funzione esterna

1

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

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
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) => {
        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) => {
            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) => {
            console.log(error)
        });
 
 
 
    }).catch((error) => {
        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) => {
        console.log('CLASSI appena fecciate da mongo')
        return res.data
    }).catch((error) => {
        console.log(error)
    });
}
exports.trova_classi_che_seguono_il_programma = trova_classi_che_seguono_il_programma

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

DROPDWON MENU 

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

 
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) => {
    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 => state.variabile.value)
    const isLoggedIn = id_utente === "612fb32ad7c7ea0bf37cbe8f"
 
    const submit = async event => {
        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 => {
        const file = event.target.files[0]
        setFile(file)
    }
 
 
    const handleSubmit1 = (e) => {
        alert('scrivi qualcosa')
    }
 
 
    const ottieni_url = (indirizzo) => {
    };
 
 
    const cancella_url = (id, id_array, key) => {
 
    }
 
 
    function Cambia_nome_allegati() {
        if (props.elenco_pdf !== undefined) { 
            if (props.elenco_pdf.length > 0) {
                return <strong >
                    Allegati
                </strong>
            }
        }
        return <strong>
            |||
        </strong>
    }
 
 
    const handleSelect=(e)=>{
        console.log(e);
		if (e === "Cancella_Domanda") {cancellazione_domanda()}    
    	if (e === "Modifica_Domanda") {setShow_edit_domanda(true)}    
    }
 
 
    function cancellazione_domanda(e) {
 
    }
 
 
    return (
        <div>
 
            <Dropdown  onSelect={handleSelect}>
                <Dropdown.Toggle id="dropdown-basic">
                    {Cambia_nome_allegati()}
                </Dropdown.Toggle>
 
                <Dropdown.Menu   >
                    <div className="verticale">
 
                    </div>
                    {/* <Dropdown.Item href="#/action-1">Action</Dropdown.Item> */}
                    <Dropdown.Item eventKey="Cancella_Domanda">Cancella domanda</Dropdown.Item>
                    <Dropdown.Item eventKey="Modifica_Domanda">Modifica domanda</Dropdown.Item>
                    <Dropdown.Divider />
 
 
                    {isLoggedIn && (
                        <>
                        {props.item._id} 
                        </>
                    )}
                </Dropdown.Menu>
            </Dropdown>
        </div>
    )
}
export default Gestione_menu_alto_destra;

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

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 = () => {
//    const [somma, calcola_somma] = useState('');
    const [show, setShow] = useState(false);
    const Chiusura_della_finestra_modale = () => {
        setShow(false);
    }
    const apertura_finestra_modale = () => {
        setShow(true)
    }
    return (
        <>
       <Modal
            show={show}
            onHide={Chiusura_della_finestra_modale}
            backdrop="static"
            keyboard={false}
        >
        <Modal.Header closeButton>
            <Modal.Title>Edit</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form>
                <Form.Group controlId="ciao1">
                </Form.Group>
            </Form>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="secondary" onClick={() => Chiusura_della_finestra_modale()}> Annulla </Button>
            <Button variant="primary" onClick={() => Chiusura_della_finestra_modale()}>Salva</Button>
        </Modal.Footer>
        </Modal> 
        <div className="d-flex flex-row-reverse">
 
        <Button onClick={() => apertura_finestra_modale()}>
            Upload mp3  <BsFillFileEarmarkPlusFill />
        </Button>
    </div>
    </>
    )
}
export default Upload_files_mp3;

AXIOS 

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) => {
            console.log(res.data)
        }).catch((error) => {
            console.log(error)
        });
1
2
3
4
5
6
7

 
axios.patch('/classi/classe_modifica/' + props.id, input)
    .then((res) => {
        console.log(res.data)
    }).catch((error) => {
        console.log(error)
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
        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) => {
                SET_max_indice_aux(lista_domande[0].indice_aux)
                crea_lista_stornati(res.data, lista_materie_caricate_da_mongo)
            }).catch((error) => {
                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
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 => {
 
//        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) => {
            console.log('Cancellato un file pdf')
        }).catch((error) => {
            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) => {
                console.log(res.data)
//                props.SET_cambio_stato(!props.cambio_stato)
            }).catch((error) => {
                console.log(error)
            });
        }
        if (props.salva === "multipla") {
            axios.patch('/domande/aggiorna_risposta_multipla_key/' + props.item._id + '/' + props.indice + '/' + result.data.key)
            .then((res) => {
                console.log(res.data)
            }).catch((error) => {
                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
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
84
85

 
import React, { useState } from 'react';
//import { useSelector, useDispatch, useStore } from 'react-redux'
//import { assegna_account } from '../REDUX_actions'
import axios from 'axios';
 
// File scritto per caricare i vecchi file
 
const FileUploadPage = (props) => {
 
    let fileReader;
//    const id_utente1 = useSelector(state => state.Account_Reducer)
    const id_utente1 = "612fb32ad7c7ea0bf37cbe8f";
 
 
    const handleFileRead = (e) => {
        let lista_materie_aux = props.lista_materie
        const content = fileReader.result;
        console.log(content)
        const obj = JSON.parse(content);
        console.log(obj)
 
        console.log(obj.file)
        var roots2 = obj.file.map(function (item, index1) {
            console.log(item)
            console.log(item.domanda)
            let presente = false
            var roots1 = lista_materie_aux.map(function (item1, index2) {
                if (item.materia == item1.materia) {
                    presente = true
                }
            });
            if (!presente) {
                lista_materie_aux.push(item)
                let materia = {
                    materia: item.materia,
                    utente: id_utente1
                }
                axios.post('/posts/MATERIE_salva', materia)
                    .then((res) => {
                        console.log(res.data)
                    }).catch((error) => {
                        console.log(error)
                    });
            }
        });
        var roots3 = obj.file.map(function (item, index1) {
 
            let domanda = {
                domanda: item.domanda,
                risposta: item.risposta,
                materia: item.materia,
                utente: id_utente1
            }
            axios.post('/posts/domande_salva', domanda)
                .then((res) => {
                    //                    console.log(res.data)
                }).catch((error) => {
                    console.log(error)
                });
 
        });
 
        // … do something with the 'content' …
    };
 
    const handleFileChosen = (file) => {
        fileReader = new FileReader();
        fileReader.onloadend = handleFileRead;
        fileReader.readAsText(file);
    };
 
    return <div className='upload-expense'>
        <input
            type='file'
            id='file'
            className='input-file'
            accept='.txt'
            onChange={e => handleFileChosen(e.target.files[0])}
        />
    </div>;
};
 
 
export default FileUploadPage;
On: