refactor: extract StepOneForm to new component

Author: zacklyonsdev

cards/02.advanced_version/RentalCars/src/app/extensions/CreateRental.jsx

@@ -269,51 +269,12 @@ const Extension = ({ context, runServerless, sendAlert, fetchProperties }) => {
         />
       )}
       {currentStep === 1 && (
-        <>
-          <Table
-            width={'max'}
-            paginated={false}
-          >
-            <TableHead>
-              <TableRow>
-                <TableHeader width={'min'}>MakeTableHeader>
-                <TableHeader width={'min'}>
-                  Model
-                TableHeader>
-                <TableHeader width={'min'}>
-                  <Link variant="dark"
-                    onClick={() => { setVehicleYearSort(vehicleYearSort === 'asc' ? 'desc' : 'asc') }}
-                  >
-                    Year
-                  Link>
-                  {vehicleYearSort === '' ? ' ' : vehicleYearSort === 'asc' ? ' ↓' : ' ↑'}
-                TableHeader>
-                <TableHeader width={'min'} >
-                  Book
-                TableHeader>
-              TableRow>
-            TableHead>
-            <TableBody>
-
-              {vehiclesOnPage.map((vehicle) => (
-                <TableRow>
-                  <TableCell>
-                    <Text>{vehicle.properties.make}Text>
-                  TableCell>
-                  <TableCell>
-                    <Text>{vehicle.properties.model}Text>
-                  TableCell>
-                  <TableCell>
-                    <Text>{vehicle.properties.year}Text>
-                  TableCell>
-                  <TableCell>
-                    <Link onClick={() => { goToBookingPage(vehicle) }}>Book nowLink>
-                  TableCell>
-                TableRow>
-              ))}
-            TableBody>
-          Table>
-        >
+        <StepOneForm
+          goToBookingPage={goToBookingPage}
+          setVehicleYearSort={setVehicleYearSort}
+          vehiclesOnPage={vehiclesOnPage}
+          vehicleYearSort={vehicleYearSort}
+        />
       )}
       {
         currentStep === 2 && (
@@ -626,4 +587,58 @@ const StepZeroForm = ({
       Table>
     >
   );
+};
+
+const StepOneForm = ({
+  goToBookingPage,
+  setVehicleYearSort,
+  vehiclesOnPage,
+  vehicleYearSort
+}) => {
+  return(
+    <>
+      <Table
+        width={'max'}
+        paginated={false}
+      >
+        <TableHead>
+          <TableRow>
+            <TableHeader width={'min'}>MakeTableHeader>
+            <TableHeader width={'min'}>
+              Model
+            TableHeader>
+            <TableHeader width={'min'}>
+              <Link variant="dark"
+                onClick={() => { setVehicleYearSort(vehicleYearSort === 'asc' ? 'desc' : 'asc') }}
+              >
+                Year
+              Link>
+              {vehicleYearSort === '' ? ' ' : vehicleYearSort === 'asc' ? ' ↓' : ' ↑'}
+            TableHeader>
+            <TableHeader width={'min'} >
+              Book
+            TableHeader>
+          TableRow>
+        TableHead>
+        <TableBody>
+          {vehiclesOnPage.map((vehicle) => (
+            <TableRow>
+              <TableCell>
+                <Text>{vehicle.properties.make}Text>
+              TableCell>
+              <TableCell>
+                <Text>{vehicle.properties.model}Text>
+              TableCell>
+              <TableCell>
+                <Text>{vehicle.properties.year}Text>
+              TableCell>
+              <TableCell>
+                <Link onClick={() => { goToBookingPage(vehicle) }}>Book nowLink>
+              TableCell>
+            TableRow>
+          ))}
+        TableBody>
+      Table>
+    >
+  );
 };