65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { getMeganJohns } from "./Api";
|
|
import type { MeganJohns } from "./types/MeganJohns";
|
|
import type { Album } from "./types/Album";
|
|
import type { Artwork } from "./types/Artwork";
|
|
import type { Quote } from "./types/Quote";
|
|
import type { Video } from "./types/Video";
|
|
import type { Bio, ProfessionalService } from "./types/Bio";
|
|
import MjSection from "./MjSection";
|
|
import Header from "./Header/Header";
|
|
import About from "./About/Homepage";
|
|
import { Container } from "react-bootstrap";
|
|
import Videos from "./Videos/Videos";
|
|
import "./App.css";
|
|
|
|
function App() {
|
|
const [mj, setMj] = useState<MeganJohns | undefined>(undefined);
|
|
const [albums, setAlbums] = useState<Album[]>([]);
|
|
const [artwork, setArtwork] = useState<Artwork[]>([]);
|
|
const [bio, setBio] = useState<Bio | undefined>(undefined);
|
|
const [quotes, setQuotes] = useState<Quote[]>([]);
|
|
const [videos, setVideos] = useState<Video[]>([]);
|
|
const [services, setServices] = useState<ProfessionalService[]>([]);
|
|
|
|
useEffect(() => {
|
|
getMeganJohns().then(
|
|
(mjData) => {
|
|
setMj(mjData);
|
|
},
|
|
(error) => {
|
|
console.error(error);
|
|
},
|
|
);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (mj) {
|
|
setAlbums(mj.albums);
|
|
setArtwork(mj.artwork);
|
|
setBio(mj.bio);
|
|
setQuotes(mj.quotes);
|
|
setVideos(mj.videos);
|
|
setServices(mj.professional_services);
|
|
}
|
|
}, [mj]);
|
|
|
|
if (!mj || !bio) {
|
|
return <>Loading</>;
|
|
}
|
|
|
|
return (
|
|
<Container className="">
|
|
<Container id="main-content">
|
|
<Header mj={mj} />
|
|
<MjSection sectionTitle="discography" works={albums} />
|
|
<MjSection sectionTitle="artwork" works={artwork} />
|
|
<Videos videos={videos} />
|
|
<About bio={bio} quotes={quotes} services={services} />
|
|
</Container>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default App;
|