partial synch with ph2 updates
This commit is contained in:
@@ -0,0 +1,216 @@
|
||||
// pages/admin/storage.js
|
||||
import { useState } from "react";
|
||||
import Head from "next/head";
|
||||
import CookieBanner from "../../components/cookieBanner";
|
||||
import Header from "../../components/header";
|
||||
import Footer from "../../components/footer";
|
||||
import { connect } from "react-redux";
|
||||
import { wrapper } from "../../store/store";
|
||||
|
||||
import StorageTab from "../../components/admin/tabs/storage";
|
||||
import AccountsTab from "../../components/admin/tabs/accounts";
|
||||
import AppealsTab from "../../components/admin/tabs/appeals";
|
||||
import DocumentsTab from "../../components/admin/tabs/documents";
|
||||
|
||||
import { fetchAdminStorageData } from "../../components/admin/utils/serverside";
|
||||
import { getNewAppeals } from "../../actions";
|
||||
|
||||
import { getSearchDetails } from "../../components/utils";
|
||||
|
||||
import {
|
||||
setSearchDetails,
|
||||
setSearchResults,
|
||||
} from "../../store/searchOutput/action";
|
||||
import { setCurrentPage } from "../../store/currentView/action";
|
||||
|
||||
const StoragePage = (props) => {
|
||||
const {
|
||||
data,
|
||||
userData,
|
||||
repCompleteCount,
|
||||
searchResultsObj,
|
||||
docsOffline,
|
||||
showFilteredDocs,
|
||||
} = props;
|
||||
const [whichTab, setWhichTab] = useState("documents");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Admin Browser</title>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header />
|
||||
|
||||
<div
|
||||
className="govuk-width-containera"
|
||||
style={{ width: "90%", margin: "auto" }}
|
||||
>
|
||||
<div className="js-enabled govuk-template__body govuk-frontend-supported">
|
||||
<div className="govuk-tabs" data-module="govuk-tabs">
|
||||
<h2 className="govuk-tabs__title">Contents</h2>
|
||||
|
||||
{/* Tabs */}
|
||||
<ul className="govuk-tabs__list">
|
||||
{[
|
||||
"documents",
|
||||
"appeals",
|
||||
"storage",
|
||||
"accounts",
|
||||
].map((tab) => (
|
||||
<li
|
||||
key={tab}
|
||||
className={
|
||||
whichTab === tab
|
||||
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
|
||||
: "govuk-tabs__list-item"
|
||||
}
|
||||
>
|
||||
<a
|
||||
className="govuk-tabs__tab"
|
||||
href={`#${tab}`}
|
||||
onClick={() => {
|
||||
setWhichTab(tab);
|
||||
tab === "appeals" &&
|
||||
props.setCurrentPage(1);
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{tab === "documents" &&
|
||||
"Latest Documents"}
|
||||
{tab === "appeals" &&
|
||||
"Latest Appeals"}
|
||||
{tab === "storage" &&
|
||||
"Storage Account"}
|
||||
{tab === "accounts" &&
|
||||
"User Accounts"}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Panels */}
|
||||
|
||||
<div
|
||||
className={
|
||||
whichTab === "documents"
|
||||
? "govuk-tabs__panel"
|
||||
: "govuk-tabs__panel govuk-tabs__panel--hidden"
|
||||
}
|
||||
>
|
||||
<DocumentsTab
|
||||
documentDetailsObj={
|
||||
props.searchResultsObj
|
||||
.documentDetailsObj
|
||||
}
|
||||
docsOffline={docsOffline}
|
||||
showFilteredDocs={props.showFilteredDocs}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
whichTab === "appeals"
|
||||
? "govuk-tabs__panel"
|
||||
: "govuk-tabs__panel govuk-tabs__panel--hidden"
|
||||
}
|
||||
>
|
||||
<AppealsTab
|
||||
searchResultsObj={searchResultsObj}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
whichTab === "storage"
|
||||
? "govuk-tabs__panel"
|
||||
: "govuk-tabs__panel govuk-tabs__panel--hidden"
|
||||
}
|
||||
>
|
||||
<StorageTab
|
||||
data={data}
|
||||
repCompleteCount={repCompleteCount}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
whichTab === "accounts"
|
||||
? "govuk-tabs__panel"
|
||||
: "govuk-tabs__panel govuk-tabs__panel--hidden"
|
||||
}
|
||||
>
|
||||
<AccountsTab userData={userData} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps = wrapper.getServerSideProps(
|
||||
(store) => async (ctx) => {
|
||||
const { query, req, res } = ctx;
|
||||
// IP restriction check
|
||||
const ALLOWED_IPS = process.env.ALLOWED_IPS
|
||||
? process.env.ALLOWED_IPS.split(",").map((ip) => ip.trim())
|
||||
: [];
|
||||
const LOCALHOST_IPS = ["127.0.0.1", "::1"];
|
||||
const forwarded = req.headers["x-forwarded-for"];
|
||||
const ip =
|
||||
typeof forwarded === "string"
|
||||
? forwarded.split(",")[0]
|
||||
: req.socket.remoteAddress;
|
||||
|
||||
if (![...ALLOWED_IPS, ...LOCALHOST_IPS].includes(ip)) {
|
||||
return {
|
||||
redirect: { destination: "/403", permanent: false },
|
||||
};
|
||||
}
|
||||
|
||||
// 🔹 fetch actual data
|
||||
const { data, userData, repCompleteCount } =
|
||||
await fetchAdminStorageData();
|
||||
|
||||
const newAppeals = await getNewAppeals();
|
||||
|
||||
const searchDetailsObj = await getSearchDetails(newAppeals);
|
||||
|
||||
store.dispatch(setSearchResults(newAppeals));
|
||||
store.dispatch(setSearchDetails(searchDetailsObj));
|
||||
const state = store.getState();
|
||||
|
||||
store.dispatch(setCurrentPage(1));
|
||||
|
||||
return {
|
||||
props: {
|
||||
data,
|
||||
userData,
|
||||
repCompleteCount,
|
||||
docsOffline: process.env.DOCAPI_OFFLINE || false,
|
||||
showFilteredDocs: process.env.SHOWFILTERDOCS || false,
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setCurrentPage: (currentPage) => {
|
||||
dispatch(setCurrentPage(currentPage));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
console.log("===============================\n state:", state);
|
||||
return {
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(StoragePage);
|
||||
Reference in New Issue
Block a user