Adding inputs on click in React.js project(with Redux toolkit)

Question

I'm doing my PET project with Redux toolkit, but have some troubles with inputs. When i add an input on click it adds correctly, but i'm not sure it adds in right place(it's should be added in ITEMS array). Other issue is with it's data. If i add 2 inputs: 1) Item Name: 'Iphone 13', Unit Costs: '1200', unit: '2'; 2) Item Name: 'Iphone 12', Unit Costs: '1100', unit: '1'. It gonna add only last one and array length would be only 1.

Why is it hapenning? What i did wrong?

I've already tried using spread operator, but it shows error when i click on Add Item button.

Now the code.

InvoicesList.js file with INVOICES_LIST array which includes ITEMS where should be all items from inputs.

export const INVOICES_LIST = [
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "Pineapple Inc.",
    bill_to: "REDQ Inc.",
    total_cost: "14630",
    status: "Pending",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: [
      {
        item_name: "A box of happiness",
        unit_costs: "200",
        unit: "14",
        price: "2800",
        sub_total: "133300",
        vat: "13300",
        grand_total: "14630",
      },
    ],
  },
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "AMD Inc.",
    bill_to: "Intel Inc.",
    total_cost: "14630",
    status: "Delivered",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: [
      {
        item_name: "Unicorn Tears",
        unit_costs: "500",
        unit: "14",
        price: "1700",
        sub_total: "133300",
        vat: "13300",
        grand_total: "14630",
      },
    ],
  },
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "Apple Inc.",
    bill_to: "Samsung",
    total_cost: "14630",
    status: "Shipped",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: [
      {
        item_name: "Rainbow Machine",
        unit_costs: "700",
        unit: "5",
        price: "3500",
        sub_total: "133300",
        vat: "13300",
        grand_total: "14630",
      },
    ],
  },
];

AddInvoiceItem.js file where you can find inputs and adding logic.

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import { uiActions } from "../../store/ui-slice";

import classes from "./AddInvoiceItem.module.css";

import { useFormik } from "formik";

import Wrapper from "../../UI/Wrapper";
import Card from "../../UI/Card";
import Footer from "../../UI/Footer";
import Button from "../../UI/Button";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendar } from "@fortawesome/free-solid-svg-icons";

import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { invoiceActions } from "../../store/invoice-slice";
import { Link } from "react-router-dom";

const AddInvoiceItem = (props) => {
  const date = new Date();

  const options = ["Pending", "Shipped", "Delivered"];

  const inputs = [{ itemName: "", unitCosts: "", unit: "" }];

  const [startDate, setStartDate] = useState(date);
  const [selectedOption, setSelectedOption] = useState(options[0]);
  const [listItems, setListItems] = useState(inputs);

  const optionClickHandler = (value) => () => {
    setSelectedOption(value);
    dispatch(uiActions.toggleMoreOptions());
  };

  const addInvoiceHandler = (invoice) => {
    console.log(invoice);
    console.log(selectedOption);
    dispatch(
      invoiceActions.addNewInvoice({
        id: Math.random(),
        invoiceNumber: invoice.invoiceNumber,
        billFrom: invoice.billFrom,
        billFromAddress: invoice.billFromAddress,
        billTo: invoice.billTo,
        billToAddress: invoice.billToAddress,
        status: selectedOption,
        order_date: startDate.toJSON(),
        ITEMS: [
          {
            id: Math.random(),
            item_name: invoice.itemName,
            unit_costs: invoice.unitCosts,
            units: invoice.unit,
          },
        ],
      })
    );
  };

  const formikInvoice = useFormik({
    initialValues: {
      invoiceNumber: "",
      billFrom: "",
      billFromAddress: "",
      billTo: "",
      billToAddress: "",
      status: selectedOption,
      date: startDate.toJSON(),
      ITEMS: [
        {
          id: Math.random(),
          itemName: "",
          unitCosts: "",
          unit: "",
        },
      ],
    },
    onSubmit: (val) => {
      addInvoiceHandler(val);
    },
  });

  const dispatch = useDispatch();

  const toggleMoreOptions = () => {
    dispatch(uiActions.toggleMoreOptions());
  };

  const showOtherOptions = useSelector(
    (state) => state.ui.selectMoreOptionsIsVisible
  );

  let counter = 1;

  const addItemHandler = () => {
    setListItems(listItems.concat([{ itemName: "", unitCosts: "", unit: "" }]));
  };

  return (
    
      
        
          
            
              
                
              
              {/*  */}
              
              {/*  */}
            
            
              
                Invoice Info
                
              
              
                
                  Order Status: 
                  
                    {showOtherOptions && (
                      
                        {options.map((option) => (
                          
                            {option}
                          
                        ))}
                      
                    )}
                    
                    
                  
                
                
                  Order Date:
                   setStartDate(val)}
                  />
                  
                
              
            
            
              
                
                
              
              
                
                
              
            
            
              
                  {listItems.map((item, index) => (
                    
                      {/* There should be dynamic values later */}
                    
                  ))}
                
                
                  
                  
                  
                  
                  
                  
                
                
                  
                    #
                    Item Name
                    Unit Costs
                    Unit
                    Price
                    
                  
                
                
                      {counter++}
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      0
                      
              
              
                
              
              
                
                  Sub Total: 
                  $0
                  {/* Dynamic value later here */}
                
                
                  Total Vat:
                  
                    
                      
                      %
                    
                    $0
                    {/* Dynamic value later here */}
                  
                
                
                  Grand Total
                  
                    
                    0
                    {/* Dynamic value later here */}
                  
                
              
            
            
          
        
        
      
    
  );
};

export default AddInvoiceItem;

invoice-slice.js file.

import { createSlice } from "@reduxjs/toolkit";

import { INVOICES_LIST } from "../Pages/Invoice/InvoicesList";

const invoiceSlice = createSlice({
  name: "invoice",
  initialState: {
    invoices: INVOICES_LIST,
  },
  reducers: {
    addNewInvoice(state, action) {
      const newItem = action.payload;
      state.invoices.push({
        id: newItem.id,
        billFrom: newItem.bill_from,
        billFromAddress: newItem.billFromAddress,
        billTo: newItem.bill_to,
        billToAddress: newItem.bill_to_address,
        invoiceNumber: newItem.invoice_num,
        status: newItem.status,
        order_date: newItem.order_date,
        ITEMS: [
          {
            id: Math.random(),
            item_name: newItem.item_name,
            unit_costs: newItem.unit_costs,
            units: newItem.units,
          },
        ],
      });
      console.log(newItem);
    },
    removeInvoice(state, action) {
      const id = action.payload;
      state.invoices = state.invoices.filter((item) => item.id !== id);
    },
    editInvoice() {},
  },
});

export const invoiceActions = invoiceSlice.actions;

export default invoiceSlice;

Also: should i give every item unique id? Because, i'm not sure if i need that.

P.S. here is github repo - https://github.com/stepan-slyvka/test-project

P.P.S. this is my PET project, so don't wonder why I'm using Context in one page and another Redux. It's only for learning purpose.

axordahaxor · Accepted Answer

I've looked at your code now. This is one way to get it all to work, but, in general you should probably make a decision whether to use formik's state as the main state for listItems and refactor your code into that direction or do something else.

However, here is one ROUGH way to solve your problem, use it as a reference in making decisions on how to manage it.

Add the following to your AddinvoiceItem.js:

  const updateItemHandler = (index, inputName, value) => {
    listItems[index] = {...listItems[index], [inputName]: value};
  }

  const updateValuesOnSubmit = () => {
    return listItems;
  }

and change every input (itemName, unitCosts, unit) to use the new function in its onChange parameter:

 onChange={(e) => updateItemHandler(index, 'THIS has to be the name of the input, for example itemName', e.currentTarget.value)}

Change addInvoiceHandler to use new function in its dispatch:

dispatch(
      invoiceActions.addNewInvoice({
        id: Math.random(),
        invoiceNumber: invoice.invoiceNumber,
        billFrom: invoice.billFrom,
        billFromAddress: invoice.billFromAddress,
        billTo: invoice.billTo,
        billToAddress: invoice.billToAddress,
        status: selectedOption,
        order_date: startDate.toJSON(),
        ITEMS: [
      ...updateValuesOnSubmit()
        ],
      })
    );
  };

and finally, go to invoice-slice.js and do this:

 ITEMS: [
          ...newItem.ITEMS
        ],

This is how you should be able to get multiple items within an invoice to your redux state. Let me emphasize once more that you should still consider using Formik's state and its management, handleChange features etc. as you've already chosen it for this task.

But this is still one way to do what you wanted to do. Hope it helps!

Adding inputs on click in React.js project(with Redux toolkit)

Answers (1)

Related Questions