CLEANUP on Jobs page. Now uses search param instead of state.
This commit is contained in:
@@ -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>;
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user