orario/src/main.jsx

import _ from 'lodash'
import { render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import { ToolOverlay } from './components/CourseVisibility.jsx'

import { EventsView } from './components/EventsView.jsx'
import { HamburgerMenu } from './components/HamburgerMenu.jsx'
import { Icon } from './components/Icon.jsx'
import { Popup } from './components/Popup.jsx'
import { Toolbar } from './components/Toolbar.jsx'

// window._ = _
// window.dataBuffer = {}

const CALENDAR_IDS = {
    'anno-1': ['6308cfcb1df5cb026699ce32'],
    'anno-2': ['6308e2dc09352a0208fefdd9'],
    'anno-3': ['6308e42a1df5cb026699ced4'],
    'magistrale': ['6308e8ea0c34e703bb1f7e85'],
    'tutti': [
        '6308cfcb1df5cb026699ce32',
        '6308e2dc09352a0208fefdd9',
        '6308e42a1df5cb026699ced4',
        '6308e8ea0c34e703bb1f7e85',
    ],
}

async function loadEventi(ids) {
    const calendari = await Promise.all(
        ids.map(async id => {
            // Almost directly copy-pasted from Chrome Dev Tools
            const req = await fetch(
                'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico',
                {
                    headers: {
                        'content-type': 'application/json;charset=UTF-8',
                        'sec-fetch-dest': 'empty',
                        'sec-fetch-mode': 'cors',
                        'sec-fetch-site': 'same-site',
                    },
                    body: JSON.stringify({
                        mostraImpegniAnnullati: true,
                        mostraIndisponibilitaTotali: false,
                        linkCalendarioId: id,
                        clienteId: '628de8b9b63679f193b87046',
                        pianificazioneTemplate: false,
                        dataInizio: '2022-10-02T22:00:00.000Z',
                        dataFine: '2022-10-07T22:00:00.000Z',
                    }),
                    method: 'POST',
                    mode: 'cors',
                    credentials: 'omit',
                }
            )

            return await req.json()
        })
    )

    console.log(calendari)

    if (ids.length === 1) {
        return calendari[0]
    }

    return _.uniqBy(_.concat(...calendari), 'id')
}

const App = ({}) => {
    const [source, setSource] = useState('magistrale')
    const [eventi, setEventi] = useState([])
    const [selectedCourses, setSelectedCourses] = useState([])

    useEffect(() => {
        setSelectedCourses([])
    }, [source])

    useEffect(async () => {
        const eventi = await loadEventi(CALENDAR_IDS[source])
        // window.dataBuffer[source] = eventi
        setEventi(eventi)
    }, [source])

    const [helpVisible, setHelpVisible] = useState(false)

    const [mode, setMode] = useState('course')

    const [hideOtherCourses, setHideOtherCourses] = useState(false)

    // TODO: Should wrap in "useEffect"?
    if (selectedCourses.length === 0) {
        setHideOtherCourses(false)
    }

    const [showMobileMenu, setShowMobileMenu] = useState(false)

    return (
        <>
            <Toolbar
                {...{
                    mode,
                    setMode,
                    source,
                    setSource,
                    onShowMenu: () => setShowMobileMenu(true),
                    onHelp: () => setHelpVisible(true),
                }}
            />
            <EventsView
                mode={mode}
                selection={selectedCourses}
                setSelection={setSelectedCourses}
                hideOtherCourses={hideOtherCourses}
                start={new Date(2022, 10, 3)}
                events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({
                    name: _.split(nome, '-', 1)[0].trim(),
                    start: new Date(dataInizio),
                    end: new Date(dataFine),
                    docenti: docenti.map(({ nome, cognome }) =>
                        _.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome))
                    ),
                    aula: _.startCase(aule[0].codice.toLowerCase()).replace(
                        /([A-Z]) ([1-9])/,
                        '$1$2'
                    ),
                }))}
            />
            {selectedCourses.length > 0 && (
                <ToolOverlay
                    visibility={hideOtherCourses}
                    toggleVisibility={() => setHideOtherCourses(s => !s)}
                    onClose={() => {
                        setSelectedCourses([])
                        setHideOtherCourses(false)
                    }}
                />
            )}
            {showMobileMenu && (
                <HamburgerMenu
                    {...{
                        mode,
                        setMode,
                        source,
                        setSource,
                        onClose: () => {
                            setShowMobileMenu(false)
                        },
                    }}
                />
            )}
            {helpVisible && (
                <Popup
                    title={
                        <>
                            <Icon name="info" /> Guida
                        </>
                    }
                    onClose={() => setHelpVisible(false)}
                >
                    <h2>Selezione Corsi</h2>
                    <p>
                        Per visualizzare solo una selezione dei corsi disponibili, clicca su quelli che ti interessano e poi nascondi gli altri con il tasto <Icon name="visibility"/> che comparirà in basso a destra.
                    </p>
                    <p>
                        Per vedere l'orario settimanale, clicca su <b>Settimana</b>, che mostrerà un calendario con i corsi attualmente selezionati.
                    </p>
                    <p>
                        La selezione effettuata verrà preservata dalla visualizzazione <b>Corsi</b> a quella Settimana, permettendo di individuare eventuali sovrapposizioni di orari.
                    </p>
                    <p>
                        I corsi sono raggruppati per: primo, secondo, terzo anno (<b>I</b>,<b>II</b>,<b>III</b>) e magistrale. Alternativamente, puoi scegliere fra tutti i corsi disponibili cliccando su <b>Tutti</b>.
                    </p>
                    <h2>Stampa</h2>
                    <p>
                        Puoi stampare l'orario attualmente visibile con il bottone <Icon name="print"/> (è consigliato controllare le opzioni di stampa per un risultato soddisfacente).
                    </p>
                </Popup>
            )}
        </>
    )
}

render(<App />, document.body)