fix: convert carousel to Class component (lab 3)

Author: Antoine RICHARD

steps/03-state-and-clicks/src/components/Carousel.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ArrowBack, ArrowForward } from '@mui/icons-material';
 import MuiFab from '@mui/material/Fab';
 import { PersonCard } from './PersonCard';
@@ -6,17 +7,32 @@ interface CarouselProps {
   people: People;
 }
 
-export function Carousel({ people }: CarouselProps) {
-  const randomPerson = people[Math.floor(Math.random() * people.length)];
-  return (
-    <section className="carousel">
-      <MuiFab size="medium" color="default" aria-label="previous">
-        <ArrowBack />
-      </MuiFab>
-      <PersonCard person={randomPerson} />
-      <MuiFab size="medium" color="default" aria-label="previous">
-        <ArrowForward />
-      </MuiFab>
-    </section>
-  );
+interface CarouselState {
+  randomPersonIndex: number;
+}
+
+export class Carousel extends React.Component<CarouselProps, CarouselState> {
+  constructor(props: CarouselProps) {
+    super(props);
+    this.state = {
+      randomPersonIndex: Math.floor(Math.random() * props.people.length),
+    };
+  }
+
+  render() {
+    const { people } = this.props;
+    const randomPerson = people[this.state.randomPersonIndex];
+
+    return (
+      <section className="carousel">
+        <MuiFab size="medium" color="default" aria-label="previous">
+          <ArrowBack />
+        </MuiFab>
+        <PersonCard person={randomPerson} />
+        <MuiFab size="medium" color="default" aria-label="next">
+          <ArrowForward />
+        </MuiFab>
+      </section>
+    );
+  }
 }