robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added in post data flow

Browse Source
This commit is contained in:
robbond
2021-07-05 08:29:38 +01:00
parent 7912f8a46a
commit aeaa1502c3
15 changed files with 19221 additions and 5547 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/homepage/casesearch.js
+50 -32
View File
@@ -1,4 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
@@ -7,44 +8,61 @@ export default function CaseSearch() {
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
const [query, setQuery] = useState("");
const handleParam = (setValue) => (e) => setValue(e.target.value);
const basicSearch = (event) => {
event.preventDefault();
console.log(query);
// /searchresults
router.push({
pathname: "/searchresults",
query: { q: query },
});
};
return ( return (
<div className="card" id="casesearch-card"> <div className="card" id="casesearch-card">
<div className="card-body"> <form onSubmit={basicSearch}>
<h3 className="heading-small card-heading"> <div className="card-body">
{t("home:casesearch-card-title")} <h3 className="heading-small card-heading">
</h3> {t("home:casesearch-card-title")}
<div className="govuk-form-group"> </h3>
<div id="event-name-hint" className="govuk-hint "> <div className="govuk-form-group">
{t("home:casesearch-card-search-hint")}: <div id="event-name-hint" className="govuk-hint ">
<br /> {t("home:casesearch-card-search-hint")}:
<span className="govuk-body-s"> <br />
{" "} <span className="govuk-body-s">
<span className="govuk-!-font-weight-bold"> {" "}
{t("home:casesearch-card-search-example-label")} <span className="govuk-!-font-weight-bold">
: {t(
</span>{" "} "home:casesearch-card-search-example-label"
APP/A1234/A/99/1234567 )}
</span> :
</span>{" "}
APP/A1234/A/99/1234567
</span>
</div>
<input
className="govuk-input"
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
onChange={handleParam(setQuery)}
/>
</div> </div>
<input <div className="govuk-form-group">
className="govuk-input" <button type="submit" className="govuk-button">
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
/>
</div>
<div className="govuk-form-group">
<Link href="/searchresults">
<a className="govuk-button">
{t("home:casesearch-card-button")} {t("home:casesearch-card-button")}
</a> </button>
</div>
<Link href="/advancedsearch">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link> </Link>
</div> </div>
<Link href="/advancedsearch"> </form>
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
</div> </div>
); );
} }
components/myportal/searchcases.js
+54 -34
View File
@@ -1,4 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
@@ -7,46 +8,65 @@ export default function SearchCases() {
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
const [query, setQuery] = useState("");
const handleParam = (setValue) => (e) => setValue(e.target.value);
const basicSearch = (event) => {
event.preventDefault();
console.log(query);
// /searchresults
router.push({
pathname: "/searchresults",
query: { q: query },
});
};
return ( return (
<div className="card card-3" id="casescomment-card"> <div className="card card-3" id="casescomment-card">
<div className="card-body"> <form onSubmit={basicSearch}>
<h3 className="heading-small card-heading"> <div className="card-body">
{t("myportal:searchcases-card-title")} <h3 className="heading-small card-heading">
</h3> {t("myportal:searchcases-card-title")}
<div className="govuk-form-group"> </h3>
<div id="event-name-hint" className="govuk-hint "> <div className="govuk-form-group">
{t("myportal:searchcases-card-search-hint")}: <div id="event-name-hint" className="govuk-hint ">
<br /> {t("myportal:searchcases-card-search-hint")}:
<span className="govuk-body-s"> <br />
{" "} <span className="govuk-body-s">
<span className="govuk-!-font-weight-bold"> {" "}
{t( <span className="govuk-!-font-weight-bold">
"myportal:searchcases-card-search-example-label" {t(
)} "myportal:searchcases-card-search-example-label"
: )}
</span>{" "} :
APP/A1234/A/99/1234567 </span>{" "}
</span> APP/A1234/A/99/1234567
</span>
</div>
<input
className="govuk-input"
id="event-name"
name="event-name"
type="text"
aria-describedby="event-name-hint"
onChange={handleParam(setQuery)}
/>
</div> </div>
<input <div className="govuk-form-group">
className="govuk-input" <button
id="event-name" type="submit"
name="event-name" name="search"
type="text" className="govuk-button"
aria-describedby="event-name-hint" >
/>
</div>
<div className="govuk-form-group">
<Link href="/searchresults">
<a className="govuk-button">
{t("myportal:searchcases-card-button")} {t("myportal:searchcases-card-button")}
</a> </button>
</div>
<Link href="/advancedsearch">
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link> </Link>
</div> </div>
<Link href="/advancedsearch"> </form>
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link>
</div>
</div> </div>
); );
} }
components/search.js
+1 -17
View File
@@ -17,23 +17,7 @@ export default function Search({ children, pages }) {
id="main-content" id="main-content"
role="main" role="main"
> >
<div className="govuk-grid-row"> <AdvancedSearch />
<div className="govuk-grid-column-full">
<SearchForCase />
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<AdvancedSearch />
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<Link href="/searchresults">
<a className="govuk-button ">Search</a>
</Link>
</div>
</div>
</main> </main>
); );
} }
components/search/advancedsearch.js
+892 -613
View File
File diff suppressed because it is too large Load Diff
components/search/searchresults.js
+4 -3
View File
@@ -2,7 +2,8 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
export default function SearchResults() { export default function SearchResults(props) {
const { searchString } = props;
let { t } = useTranslation(); let { t } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -14,8 +15,8 @@ export default function SearchResults() {
{t("search:searchresults-title-label")} {t("search:searchresults-title-label")}
</h1> </h1>
<p className="govuk-body"> <p className="govuk-body">
{t("search:searchresults-count-label-part-1")} 99{" "} {t("search:searchresults-count-label", { count: 22 })}. You
{t("search:searchresults-count-label-part-2")} searched for <em>"{searchString}"</em>
</p> </p>
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results"> <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
<div className="govuk-summary-list__row results-headings"> <div className="govuk-summary-list__row results-headings">
components/searchresults.js
+3 -2
View File
@@ -5,7 +5,8 @@ import useTranslation from "next-translate/useTranslation";
import SearchForCase from "./search/searchforcase"; import SearchForCase from "./search/searchforcase";
import SearchResults from "./search/searchresults"; import SearchResults from "./search/searchresults";
export default function Search({ children, pages }) { export default function Search(props) {
const { searchString } = props;
let { t } = useTranslation(); let { t } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -19,7 +20,7 @@ export default function Search({ children, pages }) {
> >
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-full"> <div className="govuk-grid-column-full">
<SearchResults /> <SearchResults searchString={searchString} />
</div> </div>
</div> </div>
<div className="govuk-grid-row"> <div className="govuk-grid-row">
locales/cy/search.json
+1 -2
View File
@@ -46,8 +46,7 @@
"clear-button-label": "Cliriwch", "clear-button-label": "Cliriwch",
"clear-all-button-label": "Clirio Pob Un", "clear-all-button-label": "Clirio Pob Un",
"searchresults-title-label": "Crynodeb o’r Achos ar gyfer", "searchresults-title-label": "Crynodeb o’r Achos ar gyfer",
"searchresults-count-label-part-1": "Cafodd eich chwiliad", "searchresults-count-label": "Cafodd eich chwiliad {{count}} o ganlyniadau",
"searchresults-count-label-part-2": "o ganlyniadau",
"searchresults-case-reference-label": "Cyfeirnod yr Achos", "searchresults-case-reference-label": "Cyfeirnod yr Achos",
"searchresults-site-address-label": "Cyfeiriad y Safle", "searchresults-site-address-label": "Cyfeiriad y Safle",
"searchresults-applicant-label": "Apelydd/Ymgeisydd", "searchresults-applicant-label": "Apelydd/Ymgeisydd",
locales/en/search.json
+1 -2
View File
@@ -46,8 +46,7 @@
"clear-button-label": "Clear", "clear-button-label": "Clear",
"clear-all-button-label": "Clear all", "clear-all-button-label": "Clear all",
"searchresults-title-label": "Search for a case", "searchresults-title-label": "Search for a case",
"searchresults-count-label-part-1": "Your search returned", "searchresults-count-label": "Your search returned {{count}} results",
"searchresults-count-label-part-2": "results",
"searchresults-case-reference-label": "Case reference", "searchresults-case-reference-label": "Case reference",
"searchresults-site-address-label": "Site address", "searchresults-site-address-label": "Site address",
"searchresults-applicant-label": "Appellant/Applicant", "searchresults-applicant-label": "Appellant/Applicant",
package-lock.json
Generated
+12879 -32
View File
File diff suppressed because it is too large Load Diff
pages/advancedsearch.js
+9 -1
View File
@@ -75,4 +75,12 @@ const Home = (props) => {
// }; // };
// }; // };
export default Home; //connect(mapStateToProps)(Home); const mapStateToProps = (state) => {
console.log(state);
return {
search: state.search,
};
};
export default connect(mapStateToProps)(Home);
pages/searchresults.js
+42 -29
View File
@@ -14,6 +14,8 @@ import Cookies from "cookies";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { setSearch, getSearchObj } from "../store/search/action";
const Home = (props) => { const Home = (props) => {
const { footerLinks, pages } = props; const { footerLinks, pages } = props;
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
@@ -33,7 +35,7 @@ const Home = (props) => {
<Header courseName={t("common:service-name")} /> <Header courseName={t("common:service-name")} />
<div className="govuk-width-container"> <div className="govuk-width-container">
<Banner /> <Banner />
<SearchResults /> <SearchResults searchString={props.search.searchString} />
</div> </div>
<Footer footerLinks={footerLinks} /> <Footer footerLinks={footerLinks} />
</div> </div>
@@ -41,38 +43,49 @@ const Home = (props) => {
); );
}; };
export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
({ req, res, query }) => {
console.log(query);
store.dispatch(setSearch(query.q));
}
);
// export const getServerSideProps = wrapper.getServerSideProps( // export const getServerSideProps = wrapper.getServerSideProps(
// async ({ locale, store, req, res }) => { // async ({ locale, store, query, req, res }) => {
// const token = await getToken(); // // const token = await getToken();
// let accessToken = token.access_token; // // let accessToken = token.access_token;
// const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT; // // const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
// const [pages, footerLinks, courseListContent] = await Promise.all([ // // const [pages, footerLinks, courseListContent] = await Promise.all([
// await getPages(accessToken, locale), // // await getPages(accessToken, locale),
// await getFooterLinks(accessToken, locale), // // await getFooterLinks(accessToken, locale),
// await getCourseList(accessToken, locale), // // await getCourseList(accessToken, locale),
// ]); // // ]);
// //const courseID = await getCourseID // // //const courseID = await getCourseID
// store.dispatch(setApiRoot(apiRoot)); // // store.dispatch(setApiRoot(apiRoot));
// store.dispatch(setPages(pages)); // // store.dispatch(setPages(pages));
// store.dispatch(setFooterLinks(footerLinks)); // // store.dispatch(setFooterLinks(footerLinks));
// store.dispatch(setCourseListContent(courseListContent)); // // store.dispatch(setCourseListContent(courseListContent));
// } // console.log(query);
// //store.dispatch(setSearch(query.search));
// }
// ); // );
// const mapStateToProps = (state) => { const mapStateToProps = (state) => {
// //console.log(state); console.log(state);
// return { return {
// apiroot: state.apiroot, search: state.search,
// courseListContent: state.courseListContent.courseListContent, // // apiroot: state.apiroot,
// pages: state.pages.pages, // // courseListContent: state.courseListContent.courseListContent,
// footerLinks: state.footerLinks.footerLinks, // // pages: state.pages.pages,
// regions: state.regions, // // footerLinks: state.footerLinks.footerLinks,
// sectors: state.sectors, // // regions: state.regions,
// form: state.form, // // sectors: state.sectors,
// }; // // form: state.form,
// }; };
};
export default Home; //connect(mapStateToProps)(Home); export default connect(mapStateToProps)(Home);
store/search/action.js
+18
View File
@@ -0,0 +1,18 @@
export const searchActionTypes = {
GETSEARCH: "GETSEARCH",
SETSEARCH: "SETSEARCH",
UPDATESEARCH: "UPDATESEARCH",
};
export const getSearchObj = () => (dispatch) => {
return dispatch({
type: searchActionTypes.GETSEARCH,
});
};
export const setSearch = (search) => (dispatch) => {
return dispatch({
type: searchActionTypes.SETSEARCH,
searchString: search,
});
};
store/search/reducer.js
+16
View File
@@ -0,0 +1,16 @@
import { searchActionTypes } from "./action";
const searchInitialState = {
search: {},
};
export default function reducer(state = searchInitialState, action) {
switch (action.type) {
case searchActionTypes.SETSEARCH:
return {
searchString: action.searchString,
};
default:
return state;
}
}
store/store.js
+66 -66
View File
@@ -2,94 +2,94 @@ import { createStore, applyMiddleware, combineReducers } from "redux";
import { createWrapper, HYDRATE } from "next-redux-wrapper"; import { createWrapper, HYDRATE } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk"; import thunkMiddleware from "redux-thunk";
import progress from "./progress/reducer"; import progress from "./progress/reducer";
import search from "./search/reducer";
import { reducer as formReducer } from "redux-form"; import { reducer as formReducer } from "redux-form";
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2"; import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
//COMBINING ALL REDUCERS //COMBINING ALL REDUCERS
const combinedReducer = combineReducers({ const combinedReducer = combineReducers({
progress, progress,
search,
}); });
const reducer = (state = { progress: "{}" }, action) => { const reducer = (state = { progress: "{}" }, action) => {
switch (action.type) { switch (action.type) {
case HYDRATE: case HYDRATE:
//if (action.payload.progress === '{}') delete action.payload.progress; //if (action.payload.progress === '{}') delete action.payload.progress;
return { ...state, ...action.payload }; return { ...state, ...action.payload };
case "SERVER_ACTION": case "SERVER_ACTION":
return { return {
...state, ...state,
server: { server: {
...state.server, ...state.server,
progress: action.payload, progress: action.payload,
}, },
}; };
case "CLIENT_ACTION": case "CLIENT_ACTION":
return { return {
...state, ...state,
client: { client: {
...state.client, ...state.client,
progress: action.payload, progress: action.payload,
}, },
}; };
case "GET_ITEMS": case "GET_ITEMS":
return { return {
...state, ...state,
items: action.payload, items: action.payload,
loading: false, loading: false,
}; };
case "SET_ITEMS": case "SET_ITEMS":
return { return {
...state, ...state,
items: action.payload, items: action.payload,
loading: false, loading: false,
}; };
default: default:
return combinedReducer(state, action); return combinedReducer(state, action);
} }
}; };
// BINDING MIDDLEWARE // BINDING MIDDLEWARE
const bindMiddleware = (middleware) => { const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== "production") { if (process.env.NODE_ENV !== "production") {
const { composeWithDevTools } = require("redux-devtools-extension"); const { composeWithDevTools } = require("redux-devtools-extension");
return composeWithDevTools(applyMiddleware(...middleware)); return composeWithDevTools(applyMiddleware(...middleware));
} }
return applyMiddleware(...middleware); return applyMiddleware(...middleware);
}; };
const makeStore = ({ isServer }) => { const makeStore = ({ isServer }) => {
if (isServer) { if (isServer) {
//If it's on server side, create a store //If it's on server side, create a store
return createStore(reducer, bindMiddleware([thunkMiddleware])); return createStore(reducer, bindMiddleware([thunkMiddleware]));
} else { } else {
//If it's on client side, create a store which will persist //If it's on client side, create a store which will persist
const { persistStore, persistReducer } = require("redux-persist"); const { persistStore, persistReducer } = require("redux-persist");
const storage = require("redux-persist/lib/storage").default; const storage = require("redux-persist/lib/storage").default;
const persistConfig = { const persistConfig = {
key: "nextjs", key: "nextjs",
whitelist: [ whitelist: ["progress,search"],
"progress" storage,
], stateReconciler: autoMergeLevel2, // if needed, use a safer storage
storage, };
stateReconciler: autoMergeLevel2, // if needed, use a safer storage
};
const persistedReducer = persistReducer(persistConfig, reducer); // Create a new reducer with our existing reducer const persistedReducer = persistReducer(persistConfig, reducer); // Create a new reducer with our existing reducer
const store = createStore( const store = createStore(
persistedReducer, persistedReducer,
bindMiddleware([thunkMiddleware]) bindMiddleware([thunkMiddleware])
); // Creating the store again ); // Creating the store again
store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature store.__persistor = persistStore(store); // This creates a persistor object & push that persisted object to .__persistor, so that we can avail the persistability feature
return store; return store;
} }
}; };
export const setClientState = (clientState) => ({ export const setClientState = (clientState) => ({
type: SET_CLIENT_STATE, type: SET_CLIENT_STATE,
payload: clientState, payload: clientState,
}); });
// Export the wrapper & wrap the pages/_app.js with this wrapper only // Export the wrapper & wrap the pages/_app.js with this wrapper only
export const wrapper = createWrapper(makeStore); export const wrapper = createWrapper(makeStore);
yarn.lock
+5185 -4714
View File
File diff suppressed because it is too large Load Diff