gistfile1.js

import React, { useState, useEffect } from 'react';
import { useParams, useLocation, useHistory } from "react-router-dom";
import withFetch from "../components/Fetch";

// Bootstrap
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

// Utils
import api from "../utils/api";

// Components
import Layout from "../components/Layout";
import Header from "../components/Header";
import LocalMenuApp from "../components/LocalMenuApp";
import TableCreatives from "../components/TableCreatives";
import InputText from "../components/InputText";
import Select from "../components/Select";
import FormFilterCreatives from "../components/FormFilterCreatives";

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

const AppCreativesPage = ({ axiosGet }) => {
  let { appId } = useParams();
  let history = useHistory();
  let query = useQuery();
  const tagType = query.get("tag_type");
  const tagValue = query.get("tag_value");

  const [creatives, setCreatives] = useState({
    data: {}, filter: tagValue ? tagValue : "",
  });

  const [inputs, setInputs] = useState({
    key: tagType ? tagType : "", value: tagValue ? tagValue : "",
  });

  useEffect(() => {
    const options = {
      withCredentials: true, params: { app_key: appId, filter: creatives.filter}
    }

    const getAllCreatives = () => {
      axiosGet(`${api.url}/creatives`, options).then(response => {
        if(response.status >= 200 && response.status <= 300) {
          setCreatives({...creatives, data: response.data.creatives});
        }
      });
    };

    getAllCreatives();
  }, [axiosGet, appId]);

  const handleInputChange = event => {
    event.persist();
    setInputs(inputs => ({ ...inputs, [event.target.name]: event.target.value }));
  };

  const handleSubmit = event => {
    // event.preventDefault();
    // setCreatives({data: {}, filter: inputs.value});
    history.push(`/apps/${appId}/creatives?tag_type=${inputs.key}&tag_value=${inputs.value}`)

  };

  console.log("Inputs state", inputs);

  return(
    <Layout>
      <Header pageTitle={`Creatives`} appId={appId} />
      <LocalMenuApp />
        <FormFilterCreatives
          type={inputs.key}
          value={inputs.value}
          handleInputChange={handleInputChange}
          handleSubmit={handleSubmit}
        />
      <TableCreatives data={creatives.data} sameApp />
    </Layout>
  );
};

export default withFetch(AppCreativesPage);