Adding steps

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.js

@@ -36,12 +36,16 @@ const FirstPartCreateOffer = (props) => {
     initialValues: {
       nameOfProduct: "",
       description: "",
+      location: "",
       category: "",
+      subcategory: "",
     },
     validationSchema: Yup.object().shape({
       nameOfProduct: Yup.string().required(t("login.nameOfProductRequired")),
       description: Yup.string().required(t("login.descriptionRequired")).min(8),
-      category: Yup.string().oneOf(["Automobili", "Audio", "Racunari"]),
+      location: Yup.string().oneOf(locations.map((l) => l.city)),
+      category: Yup.string().oneOf(categories.map((c) => c.name)),
+      // subcategory: Yup.string().oneOf(subcat[0].subcategories),
     }),
     onSubmit: handleSubmit,
     validateOnBlur: true,
@@ -83,28 +87,30 @@ const FirstPartCreateOffer = (props) => {
       />
 
       <FieldLabel leftText={"LOKACIJA"} />
-      <SelectField defaultValue={1}>
-        {locations.map((location, i) => {
+      <SelectField
+        defaultValue="default"
+        onChange={(value) => {
+          formik.setFieldValue("location", value.target.value.city);
+        }}
+      >
+        <Option value="default">Izaberi lokaciju</Option>
+        {locations.map((loc) => {
           return (
-            <Option key={location._if} value={i + 1}>
-              {location.city}
+            <Option key={loc._if} value={loc}>
+              {loc.city}
             </Option>
           );
         })}
-        {/* <Option value={1}>Opcija 1</Option>
-        <Option value={2}>Opcija 2</Option>
-        <Option value={3}>Opcija 3</Option>
-        <Option value={4}>Opcija 4</Option> */}
       </SelectField>
 
       <FieldLabel leftText={"KATEGORIJA"} />
       <SelectField
-        defaultValue={1}
+        defaultValue="default"
         onChange={(value) => {
           formik.setFieldValue("category", value.target.value.name);
-          console.log(value.target);
         }}
       >
+        <Option value="default">Izaberi kategoriju</Option>
         {categories.map((cat, i) => {
           return (
             <Option
@@ -116,18 +122,21 @@ const FirstPartCreateOffer = (props) => {
             </Option>
           );
         })}
-        {/* <Option value={1}>Opcija 1</Option>
-        <Option value={2}>Opcija 2</Option>
-        <Option value={3}>Opcija 3</Option>
-        <Option value={4}>Opcija 4</Option> */}
       </SelectField>
 
       <FieldLabel leftText={"PODKATEGORIJA"} />
-      <SelectField defaultValue={1}>
+      <SelectField
+        defaultValue="default"
+        onChange={(value) => {
+          formik.setFieldValue("subcategory", value.target.value.name);
+          console.log(value.target);
+        }}
+      >
+        <Option value="default">Izaberi podkategoriju</Option>
         {subcat?.length > 0 &&
           subcat[0].subcategories.map((sub, i) => {
             return (
-              <Option key={i} value={i + 1}>
+              <Option key={i} value={sub}>
                 {sub.name}
               </Option>
             );

src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.js

@@ -83,9 +83,9 @@ const ThirdPartCreateOffer = (props) => {
           {props.informations.nameOfProduct}
         </OfferDetailsTitle>
         <HorizontalScroller>
-          <OfferImage src={props.informations[0] && props.informations[0]} />
-          <OfferImage src={props.informations[1] && props.informations[1]} />
-          <OfferImage src={props.informations[2] && props.informations[2]} />
+          {props.informations.images.map((img, i) => {
+            return <OfferImage key={i} src={img} />;
+          })}
         </HorizontalScroller>
         <OfferDescriptionContainer>
           <OfferDescriptionTitle>Opis:</OfferDescriptionTitle>

src/components/Select/Option/Option.js

@@ -1,32 +1,29 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { OptionIcon, OptionStyled } from './Option.styled'
+import React from "react";
+import PropTypes from "prop-types";
+import { OptionIcon, OptionStyled } from "./Option.styled";
 
-const Option = props => {
-    console.log(props)
+const Option = (props) => {
   return (
-    <OptionStyled {...props} value={props.value} >
-    {props.startIcon ? (
-      <OptionIcon color={props.color}>
-        {props.startIcon}
-      </OptionIcon>
-    ) :(<>
-
-    </>)}
-    {props.children}
+    <OptionStyled {...props} value={props.value}>
+      {props.startIcon ? (
+        <OptionIcon color={props.color}>{props.startIcon}</OptionIcon>
+      ) : (
+        <></>
+      )}
+      {props.children}
     </OptionStyled>
-  )
-}
+  );
+};
 
 Option.propTypes = {
-    children: PropTypes.node,
-    color: PropTypes.any,
-    startIcon: PropTypes.any,
-    value: PropTypes.any,
-    // selected: PropTypes.bool,
-}
+  children: PropTypes.node,
+  color: PropTypes.any,
+  startIcon: PropTypes.any,
+  value: PropTypes.any,
+  // selected: PropTypes.bool,
+};
 Option.defaultProps = {
   // selected: true
-}
+};
 
-export default Option
+export default Option;