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 { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
@@ -7,44 +8,61 @@ export default function CaseSearch() {
const router = useRouter();
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 (
<div className="card" id="casesearch-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("home:casesearch-card-title")}
</h3>
<div className="govuk-form-group">
<div id="event-name-hint" className="govuk-hint ">
{t("home:casesearch-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t("home:casesearch-card-search-example-label")}
:
</span>{" "}
APP/A1234/A/99/1234567
</span>
<form onSubmit={basicSearch}>
<div className="card-body">
<h3 className="heading-small card-heading">
{t("home:casesearch-card-title")}
</h3>
<div className="govuk-form-group">
<div id="event-name-hint" className="govuk-hint ">
{t("home:casesearch-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t(
"home:casesearch-card-search-example-label"
)}
:
</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>
<input
className="govuk-input"
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">
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
{t("home:casesearch-card-button")}
</a>
</button>
</div>
<Link href="/advancedsearch">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
<Link href="/advancedsearch">
<a>{t("home:casesearch-card-advanced-link")}</a>
</Link>
</div>
</form>
</div>
);
}
components/myportal/searchcases.js
+54 -34
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
@@ -7,46 +8,65 @@ export default function SearchCases() {
const router = useRouter();
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 (
<div className="card card-3" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:searchcases-card-title")}
</h3>
<div className="govuk-form-group">
<div id="event-name-hint" className="govuk-hint ">
{t("myportal:searchcases-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t(
"myportal:searchcases-card-search-example-label"
)}
:
</span>{" "}
APP/A1234/A/99/1234567
</span>
<form onSubmit={basicSearch}>
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:searchcases-card-title")}
</h3>
<div className="govuk-form-group">
<div id="event-name-hint" className="govuk-hint ">
{t("myportal:searchcases-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t(
"myportal:searchcases-card-search-example-label"
)}
:
</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>
<input
className="govuk-input"
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">
<div className="govuk-form-group">
<button
type="submit"
name="search"
className="govuk-button"
>
{t("myportal:searchcases-card-button")}
</a>
</button>
</div>
<Link href="/advancedsearch">
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link>
</div>
<Link href="/advancedsearch">
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link>
</div>
</form>
</div>
);
}
components/search.js
+1 -17
View File
@@ -17,23 +17,7 @@ export default function Search({ children, pages }) {
id="main-content"
role="main"
>
<div className="govuk-grid-row">
<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>
<AdvancedSearch />
</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 useTranslation from "next-translate/useTranslation";
export default function SearchResults() {
export default function SearchResults(props) {
const { searchString } = props;
let { t } = useTranslation();
const router = useRouter();
@@ -14,8 +15,8 @@ export default function SearchResults() {
{t("search:searchresults-title-label")}
</h1>
<p className="govuk-body">
{t("search:searchresults-count-label-part-1")} 99{" "}
{t("search:searchresults-count-label-part-2")}
{t("search:searchresults-count-label", { count: 22 })}. You
searched for <em>"{searchString}"</em>
</p>
<dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
<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 SearchResults from "./search/searchresults";
export default function Search({ children, pages }) {
export default function Search(props) {
const { searchString } = props;
let { t } = useTranslation();
const router = useRouter();
@@ -19,7 +20,7 @@ export default function Search({ children, pages }) {
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<SearchResults />
<SearchResults searchString={searchString} />
</div>
</div>
<div className="govuk-grid-row">
locales/cy/search.json
+1 -2
View File
@@ -46,8 +46,7 @@
"clear-button-label": "Cliriwch",
"clear-all-button-label": "Clirio Pob Un",
"searchresults-title-label": "Crynodeb o’r Achos ar gyfer",
"searchresults-count-label-part-1": "Cafodd eich chwiliad",
"searchresults-count-label-part-2": "o ganlyniadau",
"searchresults-count-label": "Cafodd eich chwiliad {{count}} o ganlyniadau",
"searchresults-case-reference-label": "Cyfeirnod yr Achos",
"searchresults-site-address-label": "Cyfeiriad y Safle",
"searchresults-applicant-label": "Apelydd/Ymgeisydd",
locales/en/search.json
+1 -2
View File
@@ -46,8 +46,7 @@
"clear-button-label": "Clear",
"clear-all-button-label": "Clear all",
"searchresults-title-label": "Search for a case",
"searchresults-count-label-part-1": "Your search returned",
"searchresults-count-label-part-2": "results",
"searchresults-count-label": "Your search returned {{count}} results",
"searchresults-case-reference-label": "Case reference",
"searchresults-site-address-label": "Site address",
"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 useTranslation from "next-translate/useTranslation";
import { setSearch, getSearchObj } from "../store/search/action";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
@@ -33,7 +35,7 @@ const Home = (props) => {
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<SearchResults />
<SearchResults searchString={props.search.searchString} />
</div>
<Footer footerLinks={footerLinks} />
</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(
// async ({ locale, store, req, res }) => {
// const token = await getToken();
// let accessToken = token.access_token;
// async ({ locale, store, query, req, res }) => {
// // const token = await getToken();
// // 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([
// await getPages(accessToken, locale),
// await getFooterLinks(accessToken, locale),
// await getCourseList(accessToken, locale),
// ]);
// //const courseID = await getCourseID
// store.dispatch(setApiRoot(apiRoot));
// store.dispatch(setPages(pages));
// store.dispatch(setFooterLinks(footerLinks));
// store.dispatch(setCourseListContent(courseListContent));
// }
// // const [pages, footerLinks, courseListContent] = await Promise.all([
// // await getPages(accessToken, locale),
// // await getFooterLinks(accessToken, locale),
// // await getCourseList(accessToken, locale),
// // ]);
// // //const courseID = await getCourseID
// // store.dispatch(setApiRoot(apiRoot));
// // store.dispatch(setPages(pages));
// // store.dispatch(setFooterLinks(footerLinks));
// // store.dispatch(setCourseListContent(courseListContent));
// console.log(query);
// //store.dispatch(setSearch(query.search));
// }
// );
// const mapStateToProps = (state) => {
// //console.log(state);
const mapStateToProps = (state) => {
console.log(state);
// return {
// apiroot: state.apiroot,
// courseListContent: state.courseListContent.courseListContent,
// pages: state.pages.pages,
// footerLinks: state.footerLinks.footerLinks,
// regions: state.regions,
// sectors: state.sectors,
// form: state.form,
// };
// };
return {
search: state.search,
// // apiroot: state.apiroot,
// // courseListContent: state.courseListContent.courseListContent,
// // pages: state.pages.pages,
// // footerLinks: state.footerLinks.footerLinks,
// // regions: state.regions,
// // 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 thunkMiddleware from "redux-thunk";
import progress from "./progress/reducer";
import search from "./search/reducer";
import { reducer as formReducer } from "redux-form";
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
//COMBINING ALL REDUCERS
const combinedReducer = combineReducers({
progress,
progress,
search,
});
const reducer = (state = { progress: "{}" }, action) => {
switch (action.type) {
case HYDRATE:
//if (action.payload.progress === '{}') delete action.payload.progress;
return { ...state, ...action.payload };
case "SERVER_ACTION":
return {
...state,
server: {
...state.server,
progress: action.payload,
},
};
case "CLIENT_ACTION":
return {
...state,
client: {
...state.client,
progress: action.payload,
},
};
case "GET_ITEMS":
return {
...state,
items: action.payload,
loading: false,
};
case "SET_ITEMS":
return {
...state,
items: action.payload,
loading: false,
};
default:
return combinedReducer(state, action);
}
switch (action.type) {
case HYDRATE:
//if (action.payload.progress === '{}') delete action.payload.progress;
return { ...state, ...action.payload };
case "SERVER_ACTION":
return {
...state,
server: {
...state.server,
progress: action.payload,
},
};
case "CLIENT_ACTION":
return {
...state,
client: {
...state.client,
progress: action.payload,
},
};
case "GET_ITEMS":
return {
...state,
items: action.payload,
loading: false,
};
case "SET_ITEMS":
return {
...state,
items: action.payload,
loading: false,
};
default:
return combinedReducer(state, action);
}
};
// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== "production") {
const { composeWithDevTools } = require("redux-devtools-extension");
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
if (process.env.NODE_ENV !== "production") {
const { composeWithDevTools } = require("redux-devtools-extension");
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const makeStore = ({ isServer }) => {
if (isServer) {
//If it's on server side, create a store
return createStore(reducer, bindMiddleware([thunkMiddleware]));
} else {
//If it's on client side, create a store which will persist
const { persistStore, persistReducer } = require("redux-persist");
const storage = require("redux-persist/lib/storage").default;
if (isServer) {
//If it's on server side, create a store
return createStore(reducer, bindMiddleware([thunkMiddleware]));
} else {
//If it's on client side, create a store which will persist
const { persistStore, persistReducer } = require("redux-persist");
const storage = require("redux-persist/lib/storage").default;
const persistConfig = {
key: "nextjs",
whitelist: [
"progress"
],
storage,
stateReconciler: autoMergeLevel2, // if needed, use a safer storage
};
const persistConfig = {
key: "nextjs",
whitelist: ["progress,search"],
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(
persistedReducer,
bindMiddleware([thunkMiddleware])
); // Creating the store again
const store = createStore(
persistedReducer,
bindMiddleware([thunkMiddleware])
); // 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) => ({
type: SET_CLIENT_STATE,
payload: clientState,
type: SET_CLIENT_STATE,
payload: clientState,
});
// Export the wrapper & wrap the pages/_app.js with this wrapper only
export const wrapper = createWrapper(makeStore);
yarn.lock
+5185 -4714
View File
File diff suppressed because it is too large Load Diff