styling

src/components/Form/FormField.js

@@ -23,9 +23,9 @@ export const DateField = ({
     <DateFieldWrapper className={className}>
       <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
       <StyledDatePicker
+        /* eslint-disable react/jsx-props-no-spreading */
         {...field}
         {...props}
-        selected={field.value}
         onChange={handleDatePickerChange}
         onBlur={() => helpers.setTouched(true)}
       />
@@ -44,16 +44,20 @@ DateField.propTypes = {
 };
 
 export const SelectField = ({
-  label, className, name, id, options, ...props
+  label, className, name, id, options, ...rest
 }) => {
   const [field, meta] = useField(name);
   return (
     <InputWrapper className={className}>
-      <InputLabel htmlFor={props.name || props.id}>
+      <InputLabel htmlFor={rest.name || rest.id}>
         {label}
       </InputLabel>
       <InputContainer>
-        <Select {...field} {...props}>
+        <Select
+          {...field}
+          {...rest}
+          options={field.options}
+        >
           {options.map((option) => (
             <option key={option.value} value={option.value}>
               {option.label}
@@ -82,7 +86,7 @@ SelectField.propTypes = {
 };
 
 export const TextInputField = ({
-  label, className, name, placeholder, id, ...props
+  label, name, className, placeholder, id, ...props
 }) => {
   const [field, meta] = useField(name);
 
@@ -92,7 +96,12 @@ export const TextInputField = ({
         {label}
       </InputLabel>
       <InputContainer>
-        <Input {...field} {...props} className={className || ''} placeholder={placeholder} />
+        <Input
+          {...field}
+          {...props}
+          className={className || ''}
+          placeholder={placeholder}
+        />
       </InputContainer>
       {meta.touched && meta.error ? (
         <FieldErrorInfo>{meta.error}</FieldErrorInfo>
@@ -150,13 +159,20 @@ export const FileInputField = ({
 
   const handleChange = (event) => {
     const file = event.currentTarget.files[0];
-    helpers.setValue(file);
+    // helpers.setValue(file);
+    console.log('FIle', file);
   };
 
   return (
     <FileInputWrapper className={className}>
       <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
-      <StyledFileInput type="file" {...field} {...props} onChange={handleChange} onBlur={() => helpers.setTouched(true)} />
+      <StyledFileInput
+        type="file"
+        {...field}
+        {...props}
+        onChange={handleChange}
+        onBlur={() => helpers.setTouched(true)}
+      />
       {meta.touched && meta.error ? (
         <FieldErrorInfo>{meta.error}</FieldErrorInfo>
       ) : null}

src/components/Form/HideableTextFormField.js

@@ -32,7 +32,13 @@ const HideableTextFormField = ({
       <InputWrapper className={className}>
         <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
         <InputContainer>
-          <Input {...field} {...props} type={showKey ? 'text' : 'password'} />
+          <Input
+            name={field.name}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            type={showKey ? 'text' : 'password'}
+          />
           <VisibiltyToggleIconsArea>
             {showKey ? (
               <VisibilityIcon

src/layout/LandingPage/LandingPageLayout.js

@@ -1,14 +1,20 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import styled from '@emotion/styled';
 import Header from './header/Header';
 
 const LandingPageLayout = () => (
   <>
     <Header />
-    <main>
+    <Main>
       <Outlet />
-    </main>
+    </Main>
   </>
 );
 
 export default LandingPageLayout;
+
+const Main = styled.main`
+  background-color: yellow;
+  border: 1rem solid yellow;
+`;

src/layout/UsersDashboard/sideNav/navConfig.js

@@ -1,5 +1,5 @@
 import {
-  RESERVE_CARS,
+  // RESERVE_CARS,
   MY_RESERVATIONS,
   USERDASHBOARDHOME,
   ADD_NEW_CAR,
@@ -20,11 +20,11 @@ const navConfig = [
     // icon: JobsIcon(),
   },
 
-  {
-    title: 'Reserve Cars',
-    path: RESERVE_CARS,
-    // icon: PlaneIcon(),
-  },
+  // {
+  //   title: 'Reserve Cars',
+  //   path: RESERVE_CARS,
+  //   // icon: PlaneIcon(),
+  // },
 
   {
     title: 'Add New Cars',

src/pages/LandingPage/Home/Home.js

@@ -2,41 +2,71 @@ import React from 'react';
 import styled from '@emotion/styled';
 import AuthNav from '../../../layout/LandingPage/nav/AuthNav';
 
-import bicycleImage from '../../../components/asset/bicycle.jpg';
+// import bicycleImage from '../../../components/asset/bicycle.jpg';
 
 const Home = () => (
   <Container>
-    <Image>
-      <img src={bicycleImage} alt="Bicycle" />
-    </Image>
-    <Paragraph>CarBooky</Paragraph>
-    <Auth>
-      <AuthNav />
-    </Auth>
+    <Content>
+      <Paragraph>
+        CarBooky
+        <br />
+        Book A car today
+      </Paragraph>
+      <Auth>
+        <AuthNav />
+      </Auth>
+    </Content>
   </Container>
 );
 
 export default Home;
 
 const Container = styled.div`
-  width: 100%;
+  // backgroun-color: yellow;
+  border: 15rem solid yellow;
+  margin-bottom: 8rem;
+  margin-top: 6rem;
+  @media (max-width: 768px) {
+    margin-left: 2rem;
+  }
+`;
+
+const Content = styled.div`
+  margin-top: 20rem;
+  position: relative;
+  max-width: 1200px;
+  // background-color: green;
+
+  @media (max-width: 768px) {
+    padding: 0 20px;
+  }
 `;
 
 const Paragraph = styled.p`
   font-size: 3rem;
   margin-top: -40rem;
-  margin-left: 25rem;
-  color: green;
-`;
-
-const Image = styled.div`
-  // width: 100%;
+  margin-left: -4rem;
+  background color: blue;
+  text-align: center;
 
-  img {
-    width: 100%;
+  @media (max-width: 768px) {
+    font-size: 2rem;
+    margin-top: -20rem;
+    margin-left: 10rem;
   }
 `;
 
+// const Image = styled.div`
+//   img {
+//     width: 100%;
+//   }
+// `;
+
 const Auth = styled.div`
   margin-left: -10rem;
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+    text-align: center;
+  }
 `;

src/pages/UserDashboard/AddNewCar/AddNewCarForm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { CarSchema, carInitialValues } from '../../../models/car.model';
-import { TextInputField, TextAreaInputField } from '../../../components/Form/FormField';
+import { TextInputField, TextAreaInputField, FileInputField } from '../../../components/Form/FormField';
 import FormSubmitButton from '../../../components/Button/FormSubmitButton';
 import FormComponent2 from '../../../components/Form/FormComponent2';
 import { postNewCar } from '../../../redux/thunk';
@@ -32,6 +32,7 @@ const AddNewCarForm = () => {
       <TextInputField label="Price/Hour" name="pricePerHr" placeholder="Price of rent/hr" />
       <TextInputField label="Seating Capacity" name="seating_capacity" placeholder="Seating Capacity of Car" />
       <TextInputField label="Minimum Rent Duration" name="rental_duration" placeholder="Minimum Reantal Duration" />
+      <FileInputField label="Add Image of Car" name="Add Image" />
       <FormSubmitButton type="submit" className="add-new-car-submit">
         Create Car
       </FormSubmitButton>

src/pages/UserDashboard/DashboardHome.js

@@ -6,43 +6,17 @@ import { useSelector } from 'react-redux';
 import DisplayCartCard from '../../components/Card/DisplayCartCard';
 import colorWheel from '../../components/asset/small_color_wheel.png';
 
-const DummyCards = [
-  {
-    imageName: { colorWheel },
-    name: 'Bicycle',
-    shortNote:
-      'The VESPA C20 is a stunning moped with a modern electronic system and more',
-  },
-  {
-    imageName: { colorWheel },
-    name: 'Bicycle',
-    shortNote:
-      'The VESPA C20 is a stunning moped with a modern electronic system and more',
-  },
-  {
-    imageName: { colorWheel },
-    name: 'Bicycle',
-    shortNote:
-      'The VESPA C20 is a stunning moped with a modern electronic system and more',
-  },
-  {
-    imageName: { colorWheel },
-    name: 'Bicycle',
-    shortNote:
-      'The VESPA C20 is a stunning moped with a modern electronic system and more',
-  },
-];
-
 const DashboardHome = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const cars = useSelector((state) => state.cars.cars);
+  console.log('Cars', cars);
 
   const handleNext = () => {
-    setCurrentIndex((prevIndex) => (prevIndex + 3) % DummyCards.length);
+    setCurrentIndex((prevIndex) => (prevIndex + 3) % cars.length);
   };
 
   const handlePrev = () => {
-    setCurrentIndex((prevIndex) => (prevIndex - 3 + DummyCards.length) % DummyCards.length);
+    setCurrentIndex((prevIndex) => (prevIndex - 3 + cars.length) % cars.length);
   };
 
   return (
@@ -56,9 +30,9 @@ const DashboardHome = () => {
           <FaArrowLeft />
         </ArrowLeft>
         <CardContainer>
-          {cars.slice(currentIndex, currentIndex + 3).map((data, index) => (
+          {cars.slice(currentIndex, currentIndex + 3).map((data) => (
             <DisplayCartCard
-              key={index}
+              key={data.id}
               id={data.id}
               name={data.name}
               shortNote={data.description}
@@ -78,7 +52,10 @@ export default DashboardHome;
 
 const Inner = styled.section`
   display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   margin-top: 2rem;
+  // border: 1px solid blue;
   // margin-left: 2rem;
 `;
 
@@ -87,7 +64,10 @@ const Container = styled.div`
   flex-direction: column;
   width: 90%;
   margin: 3.5rem;
-  // border: 1px solid blue;
+  // border: 1px solid green;
+  @media (max-width: 768px) {
+    width: 80%;
+  }
 `;
 
 const CardContainer = styled.div`

src/redux/authentication/authenticationSlice.js

@@ -45,9 +45,9 @@ const authenticationSlice = createSlice({
       })
       .addCase(logoutUser.fulfilled, (state, action) => {
         state.authenticatedUser = {};
-        console.log('user has been logged out');
+        // console.log('user has been logged out');
         state.status = action.payload.status;
-        console.log('current status is:', state.status);
+        // console.log('current status is:', state.status);
       })
       .addCase(logoutUser.rejected, (state, action) => {
         state.status = 'failed';

src/redux/thunk.js

@@ -15,9 +15,9 @@ export const getAuthenticationToken = () => localStorage.getItem('token') || fal
 const removeAuthenticationToken = () => localStorage.removeItem('token');
 
 const handleResponse = async (response) => {
-  const { status, data, headers } = response;
+  const { status, data } = response;
 
-  console.log('Response headers: ', headers);
+  // console.log('Response headers: ', headers);
 
   if (status === 200 || status === 201) {
     return { data, status: 'succeeded' };
@@ -133,6 +133,7 @@ export const postNewCar = createAsyncThunk(
           Authorization: token,
         },
       });
+      console.log('Response', response);
       const { data } = await handleResponse(response);
 
       if (response.status === 200 || response.status === 201) {

src/routes/routes.js

@@ -32,12 +32,12 @@ import DashboardHome from '../pages/UserDashboard/DashboardHome';
 import AddNewCar from '../pages/UserDashboard/AddNewCar/AddNewCar';
 import Contact from '../pages/LandingPage/Contact/Contact';
 import DeleteList from '../components/DeleteCars/DeleteList';
-import LoadingText from '../pages/LoadingText';
+// import LoadingText from '../pages/LoadingText';
 
 export default function Router() {
   const authenticationStatus = useSelector((state) => state.authentication.status);
   const isAuthenticated = authenticationStatus === 'succeeded';
-  const isLoading = authenticationStatus === 'loading';
+  // const isLoading = authenticationStatus === 'loading';
 
   return useRoutes([
     {
@@ -48,10 +48,10 @@ export default function Router() {
       ],
     },
 
-    isLoading && {
-      path: USERS_DASHBOARD,
-      element: <LoadingText />,
-    },
+    // isLoading && {
+    //   path: USERS_DASHBOARD,
+    //   element: <LoadingText />,
+    // },
 
     isAuthenticated && {
       path: USERS_DASHBOARD,