From a1ad7672619a0aeffeac9156da13360d25e9cc3c Mon Sep 17 00:00:00 2001 From: Steven Fan Date: Thu, 9 May 2024 23:36:25 -0400 Subject: [PATCH] Backup checkpoint one --- client/package-lock.json | 33 +++ client/package.json | 1 + client/src/App.tsx | 37 ++- client/src/index.d.ts | 2 + client/src/keycloak.ts | 16 +- .../basiccomponents/FormModal/CreateForm.tsx | 5 +- .../shared/basiccomponents/FormModal/Form.tsx | 15 +- .../basiccomponents/FormModal/styles.css | 20 +- .../shared/basiccomponents/Select/Select.tsx | 9 +- .../shared/basiccomponents/Select/styles.css | 12 +- .../shared/couchconnector/CouchCrudService.ts | 2 +- client/src/store/reducers/member.reducer.ts | 2 - client/src/types/member.ts | 239 +++++++++++++++++- client/src/views/AuthGuard/AuthGuard.tsx | 184 +++++++------- client/src/views/Directory/Directory.tsx | 155 +++++++++++- client/src/views/Directory/ListViewRow.tsx | 114 +++++++++ client/src/views/Directory/MemberPhoto.tsx | 18 ++ client/src/views/Directory/MemberRow.tsx | 75 ++++++ client/src/views/Directory/ncbc_white.png | Bin 0 -> 16230 bytes 19 files changed, 783 insertions(+), 156 deletions(-) create mode 100644 client/src/index.d.ts create mode 100644 client/src/views/Directory/ListViewRow.tsx create mode 100644 client/src/views/Directory/MemberPhoto.tsx create mode 100644 client/src/views/Directory/MemberRow.tsx create mode 100644 client/src/views/Directory/ncbc_white.png diff --git a/client/package-lock.json b/client/package-lock.json index 8b2d694..50710a1 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -51,6 +51,7 @@ "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-jss": "^10.10.0", + "react-phone-input-2": "^2.15.1", "react-redux": "^8.1.2", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", @@ -7587,6 +7588,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -14437,11 +14443,21 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "node_modules/lodash.reduce": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz", + "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw==" + }, "node_modules/lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==" }, + "node_modules/lodash.startswith": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz", + "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww==" + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -17049,6 +17065,23 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "node_modules/react-phone-input-2": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz", + "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==", + "dependencies": { + "classnames": "^2.2.6", + "lodash.debounce": "^4.0.8", + "lodash.memoize": "^4.1.2", + "lodash.reduce": "^4.6.0", + "lodash.startswith": "^4.2.1", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", + "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0" + } + }, "node_modules/react-redux": { "version": "8.1.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.2.tgz", diff --git a/client/package.json b/client/package.json index 5e7bf7a..0579c28 100644 --- a/client/package.json +++ b/client/package.json @@ -69,6 +69,7 @@ "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-jss": "^10.10.0", + "react-phone-input-2": "^2.15.1", "react-redux": "^8.1.2", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", diff --git a/client/src/App.tsx b/client/src/App.tsx index acbb3cc..2c15804 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,43 +1,36 @@ -import { ReactKeycloakProvider } from "@react-keycloak/web"; import { Chart as RegisterChart, registerables } from "chart.js"; +import { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { BrowserRouter, Route, Routes } from "react-router-dom"; -import keycloak from "./keycloak"; import ToastDemo from "./shared/basiccomponents/Toast/Toast"; -import { selectMemberLoading, selectMemberUpdating } from "./store/selectors/member.selectors"; -import AuthGuard from "./views/AuthGuard/AuthGuard"; -import Directory from "./views/Directory/Directory"; -import { useEffect } from "react"; -import { memberActions } from "./store/actions/member.actions"; import { AppDispatch } from "./store"; +import { selectMemberLoading, selectMemberUpdating } from "./store/selectors/member.selectors"; +import Directory from "./views/Directory/Directory"; export const DIRECTORY = "/"; RegisterChart.register(...registerables); function App() { + const [initialLoad, setInitialLoad] = useState(true); const dispatch = useDispatch(); const isLoading: boolean = useSelector(selectMemberLoading) === "pending"; const isUpdating: boolean = useSelector(selectMemberUpdating) === "pending"; - useEffect(() => { - dispatch(memberActions.fetchMembers()); - }, []); - return ( <> - - - - - - - - - - - + {/* */} + {/* */} + + + + + + {/* */} + {/* */} + + ); } diff --git a/client/src/index.d.ts b/client/src/index.d.ts new file mode 100644 index 0000000..6dad66d --- /dev/null +++ b/client/src/index.d.ts @@ -0,0 +1,2 @@ +declare module '*.jpg'; +declare module '*.png'; \ No newline at end of file diff --git a/client/src/keycloak.ts b/client/src/keycloak.ts index 06101b7..e1987aa 100644 --- a/client/src/keycloak.ts +++ b/client/src/keycloak.ts @@ -1,11 +1,11 @@ -import Keycloak from "keycloak-js"; +// import Keycloak from "keycloak-js"; -const KeycloakURL = "https://directory.dojo1.e3labs.net/" +// const KeycloakURL = "" -const keycloak = new Keycloak({ - url: KeycloakURL, - realm: "directory", - clientId: "React-auth", -}); +// const keycloak = new Keycloak({ +// url: KeycloakURL, +// realm: "directory", +// clientId: "React-auth", +// }); -export default keycloak; +// export default keycloak; diff --git a/client/src/shared/basiccomponents/FormModal/CreateForm.tsx b/client/src/shared/basiccomponents/FormModal/CreateForm.tsx index 06aa43f..8c4dc7e 100644 --- a/client/src/shared/basiccomponents/FormModal/CreateForm.tsx +++ b/client/src/shared/basiccomponents/FormModal/CreateForm.tsx @@ -12,6 +12,7 @@ interface CreateFormProps { isDocument: (object: any) => object is Document; formInputs: formInput[]; triggerElement: JSX.Element; + title?: string; } type CreateFormState = {}; @@ -29,13 +30,13 @@ export default class CreateForm extends React.Component onSubmitForm={this.onFormSubmit} triggerElement={triggerElement} - modalTitle={""} + modalTitle={title || ""} modalDescription="" submitFormButtonText="Save" formInputs={formInputs} diff --git a/client/src/shared/basiccomponents/FormModal/Form.tsx b/client/src/shared/basiccomponents/FormModal/Form.tsx index 52fcc6a..24291cb 100644 --- a/client/src/shared/basiccomponents/FormModal/Form.tsx +++ b/client/src/shared/basiccomponents/FormModal/Form.tsx @@ -2,6 +2,7 @@ import { Dictionary } from "lodash"; import React from "react"; import { SPACE_BETWEEN_HORIZONTALLY } from "../../../utils/styles"; import Select from "../Select/Select"; +import PhoneInput from "react-phone-input-2"; export type formInput = { name: string; @@ -9,6 +10,7 @@ export type formInput = { validationMessage: string; inputProps: React.DetailedHTMLProps, HTMLInputElement>; options?: Dictionary; + style?: React.CSSProperties; }; export type FormProps = { @@ -84,7 +86,7 @@ export default class Form extends React.Component {
{formInputs.map((formInput) => { return ( -
+
{/* Range Input additional label */} {formInput.inputProps.type && formInput.inputProps.type === "range" ? (