From cac73e8373f4d3adef3cbfc16bd0951bed78bd93 Mon Sep 17 00:00:00 2001 From: Joon Lee Date: Fri, 7 Jul 2023 11:08:14 -0400 Subject: [PATCH 01/10] Trying to query AuthN --- package-lock.json | 42 ++++++++-------- package.json | 6 +-- src/config/graphqlQueries.ts | 19 +++++++ src/layouts/index.tsx | 98 +++++++++++++++++++++++++----------- tsconfig.json | 5 +- 5 files changed, 117 insertions(+), 53 deletions(-) create mode 100644 src/config/graphqlQueries.ts diff --git a/package-lock.json b/package-lock.json index 5b58b66e8..d2601368a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "CRDC DataHub", "version": "0.1.0", "dependencies": { - "@apollo/client": "^3.7.15", + "@apollo/client": "^3.7.16", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@jalik/form-parser": "^3.1.0", @@ -21,11 +21,10 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", - "@types/node": "^16.18.31", "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "dayjs": "^1.11.8", - "graphql": "^16.6.0", + "graphql": "^16.7.1", "lodash": "^4.17.21", "nprogress": "^0.2.0", "react": "^18.2.0", @@ -37,6 +36,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/node": "^20.4.0", "@typescript-eslint/eslint-plugin": "^5.59.6", "@typescript-eslint/parser": "^5.59.6", "eslint": "^8.40.0", @@ -90,9 +90,9 @@ } }, "node_modules/@apollo/client": { - "version": "3.7.15", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.15.tgz", - "integrity": "sha512-pLScjo4GAQRWKWyEg2J3FlQr9fbUAuADT0EI2+JlLf2BjaU9I7WUaZVD9w+0qNPE8BZqs53MRQq0OCm1QCW+eg==", + "version": "3.7.16", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.16.tgz", + "integrity": "sha512-rdhoc7baSD7ZzcjavEpYN8gZJle1KhjEKj4SJeMgBpcnO4as7oXUVU4LtFpotzZdFlo57qaLrNzfvppSTsKvZQ==", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/context": "^0.7.0", @@ -4408,9 +4408,9 @@ "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==" }, "node_modules/@types/node": { - "version": "16.18.34", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.34.tgz", - "integrity": "sha512-VmVm7gXwhkUimRfBwVI1CHhwp86jDWR04B5FGebMMyxV90SlCmFujwUHrxTD4oO+SOYU86SoxvhgeRQJY7iXFg==" + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz", + "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==" }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -8952,9 +8952,9 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==" }, "node_modules/graphql": { - "version": "16.6.0", - "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.6.0.tgz", - "integrity": "sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==", + "version": "16.7.1", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.7.1.tgz", + "integrity": "sha512-DRYR9tf+UGU0KOsMcKAlXeFfX89UiiIZ0dRU3mR0yJfu6OjZqUcp68NnFLnqQU5RexygFoDy1EW+ccOYcPfmHg==", "engines": { "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" } @@ -17081,9 +17081,9 @@ } }, "@apollo/client": { - "version": "3.7.15", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.15.tgz", - "integrity": "sha512-pLScjo4GAQRWKWyEg2J3FlQr9fbUAuADT0EI2+JlLf2BjaU9I7WUaZVD9w+0qNPE8BZqs53MRQq0OCm1QCW+eg==", + "version": "3.7.16", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.7.16.tgz", + "integrity": "sha512-rdhoc7baSD7ZzcjavEpYN8gZJle1KhjEKj4SJeMgBpcnO4as7oXUVU4LtFpotzZdFlo57qaLrNzfvppSTsKvZQ==", "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/context": "^0.7.0", @@ -19917,9 +19917,9 @@ "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==" }, "@types/node": { - "version": "16.18.34", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.34.tgz", - "integrity": "sha512-VmVm7gXwhkUimRfBwVI1CHhwp86jDWR04B5FGebMMyxV90SlCmFujwUHrxTD4oO+SOYU86SoxvhgeRQJY7iXFg==" + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.0.tgz", + "integrity": "sha512-jfT7iTf/4kOQ9S7CHV9BIyRaQqHu67mOjsIQBC3BKZvzvUB6zLxEwJ6sBE3ozcvP8kF6Uk5PXN0Q+c0dfhGX0g==" }, "@types/parse-json": { "version": "4.0.0", @@ -23260,9 +23260,9 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==" }, "graphql": { - "version": "16.6.0", - "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.6.0.tgz", - "integrity": "sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==" + "version": "16.7.1", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.7.1.tgz", + "integrity": "sha512-DRYR9tf+UGU0KOsMcKAlXeFfX89UiiIZ0dRU3mR0yJfu6OjZqUcp68NnFLnqQU5RexygFoDy1EW+ccOYcPfmHg==" }, "graphql-tag": { "version": "2.12.6", diff --git a/package.json b/package.json index bce42c8c9..c7146255d 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@apollo/client": "^3.7.15", + "@apollo/client": "^3.7.16", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "@jalik/form-parser": "^3.1.0", @@ -16,11 +16,10 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", - "@types/node": "^16.18.31", "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "dayjs": "^1.11.8", - "graphql": "^16.6.0", + "graphql": "^16.7.1", "lodash": "^4.17.21", "nprogress": "^0.2.0", "react": "^18.2.0", @@ -61,6 +60,7 @@ ] }, "devDependencies": { + "@types/node": "^20.4.0", "@typescript-eslint/eslint-plugin": "^5.59.6", "@typescript-eslint/parser": "^5.59.6", "eslint": "^8.40.0", diff --git a/src/config/graphqlQueries.ts b/src/config/graphqlQueries.ts new file mode 100644 index 000000000..c525618b3 --- /dev/null +++ b/src/config/graphqlQueries.ts @@ -0,0 +1,19 @@ +import { gql } from '@apollo/client'; + +const GET_USER = gql` + query getMyUser { + user { + _id + firstName + lastName + userStatus + role + IDP + email + createdAt + updateAt + } + } +`; + +export default GET_USER; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index c403fb2a9..9788f720c 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,11 +1,13 @@ import { FC, ReactNode } from 'react'; -import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet-async'; import { Outlet } from 'react-router-dom'; +import { useLazyQuery, useQuery } from '@apollo/client'; import { styled } from '@mui/material'; -import { Helmet } from 'react-helmet-async'; +import PropTypes from 'prop-types'; import Footer from '../components/Footer'; import Header from '../components/Header'; import ScrollButton from '../components/ScrollButton/ScrollButtonView'; +import GET_USER from '../config/graphqlQueries'; const StyledWrapper = styled("div")(() => ({ minHeight: "400px", @@ -15,33 +17,73 @@ interface LayoutProps { children?: ReactNode; } -const Layout: FC = ({ children }) => ( - <> - - CCDR DataHub - - {/* List of fonts here: - - */} - - -
- - {children || } - -