CLEANUP on Jobs page. Now uses search param instead of state.

This commit is contained in:
Patrick Fic
2020-04-02 11:36:01 -07:00
parent 53a567d65f
commit 922463d400
7 changed files with 57 additions and 59 deletions

View File

@@ -1,5 +0,0 @@
import React from "react";
export default function ErrorNotFound() {
return <div>Uh oh, we couldn't find the page you're looking for.</div>;
}

View File

@@ -1,27 +1,22 @@
import { useQuery } from "@apollo/react-hooks";
import queryString from "query-string";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
import JobsList from "../../components/jobs-list/jobs-list.component";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import EnterInvoiceModalContainer from "../../components/invoice-enter-modal/invoice-enter-modal.container";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
export default connect(
mapStateToProps,
null
)(function JobsPage({ match, location, bodyshop }) {
export function JobsPage({ location, bodyshop }) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
fetchPolicy: "network-only",
variables: {
statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
}
@@ -32,8 +27,7 @@ export default connect(
document.title = t("titles.jobs");
}, [t]);
const { hash } = location;
const [selectedJob, setSelectedJob] = useState(hash ? hash.substr(1) : null);
const search = queryString.parse(location.search);
const searchTextState = useState("");
const searchText = searchTextState[0];
if (error) return <AlertComponent message={error.message} type="error" />;
@@ -45,11 +39,11 @@ export default connect(
searchTextState={searchTextState}
refetch={refetch}
loading={loading}
selectedJob={selectedJob}
setSelectedJob={setSelectedJob}
selectedJob={search.selected}
//setSelectedJob={setSelectedJob}
jobs={
data
? searchTextState[0] === ""
? searchText === ""
? data.jobs
: data.jobs.filter(
j =>
@@ -79,7 +73,9 @@ export default connect(
: null
}
/>
<JobDetailCards selectedJob={selectedJob} />
<JobDetailCards selectedJob={search.selected} />
</div>
);
});
}
export default connect(mapStateToProps, null)(JobsPage);