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