Card component maken - Githubissues

Ik heb nu een card component aangemaakt. Hierbij heb ik verschillende functies gebruikt om de tijd, de profiel foto en de groepering van de radio stations te maken.

Hier dubbel check ik of de image ingeladen kan worden van de eerste gebruiker van de show. Als er geen gebruikers zijn zal de image omgezet worden naar de thumbnail van de show.


 function getImageSource(show) {
        // Pakt de koppeltabel van de show
        const programShow = show.mh_shows_id.show

        // Pakt de eerste user op van de show
        const firstUser = programShow && programShow.users && programShow.users[0] && programShow.users[0].mh_users_id && programShow.users[0].mh_users_id.cover;

        // Pakt de thumbnail van de show

        const thumbnail = programShow && programShow.thumbnail && programShow.thumbnail.id;
        console.log(thumbnail);

        // Als de cover niet bestaat of er geen users zijn, gebruik dan de thumbnail van de show
        // Als er geen thumbnail of cover is gebruik een lege string
        return firstUser ? `/${firstUser}` : (thumbnail ? `/${thumbnail}` : '');
    }

In deze functie haalt hij de twee tijden op. Als de tijden onbekend zijn zal de functie automatisch de tijd 00:00 toewijzen. Daarna wordt de tijd gesliced zodat het van 04:00:00 naar 04:00 zal gaan.


// Helper function to get the show time
    function getShowTime(show) {
        const showId = show.mh_shows_id
        // Haalt de tijden op, als er geen tijden zijn, gebruik dan 00:00
        const from = showId && showId.from ? showId.from : '00:00';
        const until = showId && showId.until ? showId.until : '00:00';

        // Verkleint de tijd van 04:00:00 naar 04:00
        const formattedFrom = from.slice(0, 5);
        const formattedUntil = until.slice(0, 5);

        return `${formattedFrom} - ${formattedUntil}`;
    }

In deze fucntie maak ik een array aan waarbij ik elke radio station verbind aan een array. Zo kan ik specifieke arrays inladen die alleen voor bijvoorbeeld 100% NL is.

    // Group shows by radio station
    function groupByRadioStation(shows) {
        const radioStation = {};

        for (const show of shows) {
            const showId = show.mh_shows_id;

            // Pakt de radio station van de show
            const programShow = showId && showId.show;
            const station = programShow && programShow.radiostation;
            const stationName = station && station.name ? station.name : 'Unknown Station';

            // Als de radio station nog niet bestaat, maak dan een lege array aan
            if (!radioStation[stationName]) {
                radioStation[stationName] = [];
            }

            // Voeg de show toe aan de radio station groep
            radioStation[stationName].push(show);
        }
        return radioStation;
    }

    // Groepeer de shows per radio station (dit is de call)
    const groupedShows = groupByRadioStation((data && data.data && data.data[0] && data.data[0].shows) || []);

Daan645 / lose-your-head-the-client-case

Card component maken #20