Merge pull request #22 from SailingSteve/steveStaffClientFeb3-3pm

First steps toward verify email address

src/App.jsx

@@ -4,20 +4,20 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import styled from 'styled-components';
-import { PrivateRoute } from './js/auth';
 import muiTheme from './js/common/components/Style/muiTheme';
 import { normalizedHref } from './js/common/utils/hrefUtils';
 import initializejQuery from './js/common/utils/initializejQuery';
 import { renderLog } from './js/common/utils/logging';
 import Drawers from './js/components/Drawers/Drawers';
+import PrivateRoute from './js/components/PrivateRoute';
 import webAppConfig from './js/config';
 import ConnectAppContext from './js/contexts/ConnectAppContext';
 import Login from './js/pages/Login';
 
 
 // Root URL pages
 
-const AnswerQuestionsForm = React.lazy(() => import(/* webpackChunkName: 'AnswerQuestionsForm' */ './js/pages/AnswerQuestionsForm'));
+// const AnswerQuestionsForm = React.lazy(() => import(/* webpackChunkName: 'AnswerQuestionsForm' */ './js/pages/AnswerQuestionsForm'));
 const FAQ = React.lazy(() => import(/* webpackChunkName: 'FAQ' */ './js/pages/FAQ'));
 // const Footer = React.lazy(() => import(/* webpackChunkName: 'Footer' */ './js/components/Navigation/Footer'));
 const Header = React.lazy(() => import(/* webpackChunkName: 'Header' */ './js/components/Navigation/Header'));

src/js/auth.js

@@ -1,30 +1,34 @@
-import React from 'react';
-import { Navigate, Outlet, useLocation } from 'react-router';
-import webAppConfig from './config';
-
-
-/* global $  */
-
+// import React from 'react';
+// import { Navigate, Outlet, useLocation } from 'react-router';
+// import { useConnectAppContext } from './contexts/ConnectAppContext';
+//
+// import webAppConfig from './config';
+//
+//
+// /* global $  */
+//
 // eslint-disable-next-line import/prefer-default-export
-export async function getAuthentication () {
-  if (window.$) {
-    console.log(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}getAuth`);
-    $.get(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}auth/`,
-      {},
-      (data, status) => {
-        console.log(`/auth response -- status: '${status}',  data: ${JSON.stringify(data)}`);
-        localStorage.setItem('isAuthenticated', data.userId);
-        return data.authenticated;
-      });
-  } else {
-    console.log('jquery not yet defined in getAuthentication');
-  }
-}
+// export async function getAuthentication () {
+//   if (window.$) {
+//     console.log(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}getAuth`);
+//     $.get(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}auth/`,
+//       {},
+//       (data, status) => {
+//         console.log(`/auth response -- status: '${status}',  data: ${JSON.stringify(data)}`);
+//         localStorage.setItem('isAuthenticated', data.userId);
+//         return data.authenticated;
+//       });
+//   } else {
+//     console.log('jquery not yet defined in getAuthentication');
+//   }
+// }
 
 // Routes in App.jsx wrapped with PrivateRoute require authentication to access
-export const PrivateRoute = () => {
-  console.log('========= PrivateRoute =========== isAuth: ', localStorage.getItem('isAuthenticated'));
-  const location = useLocation();
-  const isAuthenticated = localStorage.getItem('isAuthenticated');
-  return isAuthenticated ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
-};
+// eslint-disable-next-line import/prefer-default-export
+// export const PrivateRoute = () => {
+//   const { getAppContextValue } = useConnectAppContext();
+//   console.log('========= PrivateRoute =========== isAuth: ', localStorage.getItem('isAuthenticated'));
+//   const location = useLocation();
+//   const isAuthenticated = getAppContextValue('isAuthenticated');
+//   return isAuthenticated ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
+// };

src/js/common/utils/cordovaUtils.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import webAppConfig from '../../config';
 import { isAndroid, isAndroidTablet, isCordova, isWebApp } from './isCordovaOrWebApp';
-import { cordovaOffsetLog, oAuthLog } from './logging';
+import { cordovaOffsetLog, authLog } from './logging';
 
 /* global $  */
 
@@ -76,26 +76,26 @@ export function cordovaOpenSafariViewSub (requestURL, onExit) {
   if (isIOS()) {
     console.log(`cordovaOpenSafariView -1- requestURL: ${requestURL}`);
     SafariViewController.isAvailable(() => { // eslint-disable-line no-undef
-      oAuthLog(`cordovaOpenSafariView requestURL: ${requestURL}`);
+      authLog(`cordovaOpenSafariView requestURL: ${requestURL}`);
       SafariViewController.show({ // eslint-disable-line no-undef
         url: requestURL,
         dismissButton: 1,
       },
       (result) => {
         if (result.event === 'opened') {
-          oAuthLog(`cordovaOpenSafariView opened url: ${requestURL}`);
+          authLog(`cordovaOpenSafariView opened url: ${requestURL}`);
         } else if (result.event === 'loaded') {
-          oAuthLog(`cordovaOpenSafariView URL result from loading: ${JSON.stringify(result)}`);
+          authLog(`cordovaOpenSafariView URL result from loading: ${JSON.stringify(result)}`);
         } else if (result.event === 'closed') {
-          oAuthLog(`cordovaOpenSafariView closed: ${JSON.stringify(result)}`);
+          authLog(`cordovaOpenSafariView closed: ${JSON.stringify(result)}`);
           if (onExit) {
             onExit();
           }
         }
       },
 
       (msg) => {
-        oAuthLog(`cordovaOpenSafariView KO: ${JSON.stringify(msg)}`);
+        authLog(`cordovaOpenSafariView KO: ${JSON.stringify(msg)}`);
       });
     });
   } else {

src/js/common/utils/logging.js

@@ -44,8 +44,8 @@ export function httpLog (text, res) {
 }
 
 //  Log oAuth steps
-export function oAuthLog (text, res) {
-  if (webAppConfig.LOG_SIGNIN_STEPS) {
+export function authLog (text, res) {
+  if (webAppConfig.LOG_AUTHENTICATION) {
     if (res) {
       console.log('>> oAuth >> ', text, res);
     } else {

src/js/components/Drawers/DrawerTemplateA.jsx

@@ -15,6 +15,7 @@ const DrawerTemplateA = ({ classes, drawerId, drawerOpenGlobalVariableName, head
   renderLog(`DrawerTemplateA (${drawerId})`);  // Set LOG_RENDER_EVENTS to log all renders
   const { getAppContextData, setAppContextValue, getAppContextValue } = useConnectAppContext();
 
+  // eslint-disable-next-line no-unused-vars
   const [scrolledDown, setScrolledDown] = useState(false);
   const drawerOpen = getAppContextValue(drawerOpenGlobalVariableName);
 

src/js/components/Drawers/EditQuestionnaireDrawer.jsx

@@ -9,23 +9,10 @@ const EditQuestionnaireDrawer = () => {
   renderLog('EditQuestionnaireDrawer');
   const { getAppContextValue } = useConnectAppContext();
 
-  const [headerTitleJsx, setHeaderTitleJsx] = useState(<></>);
+  const selected = getAppContextValue('selectedQuestionnaire');
+  const [headerTitleJsx] = useState(selected ? <>Edit Questionnaire</> : <>Add Questionnaire</>);
   const [headerFixedJsx] = useState(<></>);
 
-
-  useEffect(() => {
-    if (getAppContextValue('editQuestionnaireDrawerOpen')) {
-      // console.log('EditQuestionnaireDrawer: Context value changed:', true);
-      const questionnaire = getAppContextValue('selectedQuestionnaire');
-      if (questionnaire) {
-        setHeaderTitleJsx(<>Edit Questionnaire</>);
-      } else {
-        setHeaderTitleJsx(<>Add Questionnaire</>);
-      }
-    }
-  });
-  // }, [getAppContextValue]);  // TODO DALE: commented out for now to avoid infinite loop
-
   return (
     <DrawerTemplateA
       drawerId="editQuestionnaireDrawer"

src/js/components/Person/AddPersonDrawerMainContent.jsx

@@ -1,6 +1,5 @@
 import { TextField } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router';
 import styled from 'styled-components';
 import arrayContains from '../../common/utils/arrayContains';
 import { renderLog } from '../../common/utils/logging';
@@ -23,16 +22,19 @@ const AddPersonDrawerMainContent = () => {
   const [allStaffList] = useState(getAppContextValue('allStaffList'));
   const [remainingStaffToAdd, setRemainingStaffToAdd] = useState(getAppContextValue('allStaffList'));
   const [searchResultsList, setSearchResultsList] = useState(undefined);
+  // eslint-disable-next-line no-unused-vars
   const [thisTeamsCurrentMembersList, setThisTeamsCurrentMembersList] = useState([]);
+  // eslint-disable-next-line no-unused-vars
   const [teamId, setTeamId] = useState(getAppContextValue('teamId'));
+  // eslint-disable-next-line no-unused-vars
   const [teamName, setTeamName] = useState('');
   const [teamMemberPersonIdList] = useState([]);
   const [matchingCountText, setMatchingCountText] = useState('');
   const [addPersonDrawerOpen] = useState(getAppContextValue('addPersonDrawerOpen'));
 
   const searchStringRef = useRef('');
 
-  let memberList = [];
+  // let memberList = [];
   // const teamListFromContext = getAppContextValue('teamListNested');
   // const teamListFromContext = GetTeamListArray();
   // if (teamListFromContext  && thisTeamsCurrentMembersList.length === 0 && teamName === '') {

src/js/components/Person/PersonProfileDrawerMainContent.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
-import QuestionnaireResponsesList from '../Questionnaire/QuestionnaireResponsesList';
 import PersonProfile from './PersonProfile';
 
 

src/js/components/PrivateRoute.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Navigate, Outlet, useLocation } from 'react-router';
+import { authLog } from '../common/utils/logging';
+import { useConnectAppContext } from '../contexts/ConnectAppContext';
+
+const PrivateRoute = () => {
+  const { getAppContextValue } = useConnectAppContext();
+  const isAuthenticated = getAppContextValue('isAuthenticated');
+  authLog('========= PrivateRoute =========== isAuthenticated: ', isAuthenticated);
+  const location = useLocation();
+
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
+};
+
+export default PrivateRoute;

src/js/components/Questionnaire/QuestionnaireResponsesList.jsx

@@ -7,9 +7,9 @@ import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import { renderLog } from '../../common/utils/logging';
 import webAppConfig from '../../config';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
-import { useFetchData } from '../../react-query/WeConnectQuery';
-import CopyQuestionnaireLink from './CopyQuestionnaireLink';
 import { useGetPersonById } from '../../models/PersonModel';
+import { METHOD, useFetchData } from '../../react-query/WeConnectQuery';
+import CopyQuestionnaireLink from './CopyQuestionnaireLink';
 
 const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../common/components/Widgets/OpenExternalWebSite'));
 
@@ -24,7 +24,7 @@ const QuestionnaireResponsesList = ({ personId }) => {
   // Although we are sending a list, there will only be one person id, if there were more, just append them with commas
   const requestParams = `personIdList[]=${person.id}`;
 
-  const { data: dataQRL, isSuccess: isSuccessQRL, isFetching: isFetchingQRL } = useFetchData(['questionnaire-responses-list-retrieve'], requestParams);
+  const { data: dataQRL, isSuccess: isSuccessQRL, isFetching: isFetchingQRL } = useFetchData(['questionnaire-responses-list-retrieve'], requestParams, METHOD.GET);
   if (isFetchingQRL) {
     console.log('isFetching  ------------ \'questionnaire-responses-list-retrieve\'');
   }
@@ -34,7 +34,7 @@ const QuestionnaireResponsesList = ({ personId }) => {
       console.log('Successfully retrieved QuestionnaireResponsesList...');
       setQuestionnaireList(dataQRL.questionnaireList);
     }
-  }, [dataQRL, isFetchingQRL, person]);
+  }, [dataQRL, isFetchingQRL, isSuccessQRL, person]);
 
   return (
     <div>

src/js/components/Team/AddTeamForm.jsx

@@ -6,7 +6,7 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
-import weConnectQueryFn from '../../react-query/WeConnectQuery';
+import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery';
 
 
 const AddTeamForm = ({ classes }) => {
@@ -24,7 +24,7 @@ const AddTeamForm = ({ classes }) => {
       teamName: teamNameCached,
       teamNameChanged: true,
       teamId: team ? team.id : '-1',
-    }),
+    }, METHOD.GET),
     onSuccess: () => {
       console.log('--------- saveTeamMutation addTeamForm mutated ---------');
       queryClient.invalidateQueries(['team-list-retrieve']).then(() => {});

src/js/config-template.js

@@ -12,29 +12,39 @@ module.exports = {
   WECONNECT_URL_FOR_SEO: 'https://wevoteconnect.org',
 
   ///////////////////////////////////////////////
-  // Keep both configuration blocks below, but only uncomment one of them at a time.
+  // Keep all three configuration blocks below, but only uncomment one of them at a time.
   //// Connecting to local WeConnect "weconnect-server" APIs ////
   STAFF_API_SERVER_ROOT_URL: 'http://localhost:4500/',
   STAFF_API_SERVER_ADMIN_ROOT_URL: 'http://localhost:4500/admin/',
   STAFF_API_SERVER_API_ROOT_URL: 'http://localhost:4500/apis/v1/',
   STAFF_API_SERVER_API_CDN_ROOT_URL: 'http://localhost:4500/apis/v1/',
+  //// weconnect-server local server running SSL/TLS HTTPS
+  // STAFF_API_SERVER_ROOT_URL: 'https://wevotedeveloper.com:4500/',
+  // STAFF_API_SERVER_ADMIN_ROOT_URL: 'https://wevotedeveloper.com:4500/admin/',
+  // STAFF_API_SERVER_API_ROOT_URL: 'https://wevotedeveloper.com:4500/apis/v1/',
+  // STAFF_API_SERVER_API_CDN_ROOT_URL: 'https://wevotedeveloper.com:4500/apis/v1/',
   //// Connecting to live WeConnect APIs ////
-  // STAFF_API_SERVER_ROOT_URL: 'https://weconnectserver.org/',
-  // STAFF_API_SERVER_ADMIN_ROOT_URL: 'https://weconnectserver.org/admin/',
-  // STAFF_API_SERVER_API_ROOT_URL: 'https://weconnectserver.org/apis/v1/',
-  // STAFF_API_SERVER_API_CDN_ROOT_URL: 'https://cdn.weconnectserver.org/apis/v1/',
+  // STAFF_API_SERVER_ROOT_URL: 'https://weconnect.wevoteusa.org/',
+  // STAFF_API_SERVER_ADMIN_ROOT_URL: 'https://weconnect.wevoteusa.org/admin/',
+  // STAFF_API_SERVER_API_ROOT_URL: 'https://weconnect.wevoteusa.org/apis/v1/',
+  // STAFF_API_SERVER_API_CDN_ROOT_URL: 'https://cdn.weconnect.wevoteusa.org/apis/v1/',
 
-  // For when we need to connect to the WeVote WebApp front end
+  // For when we need to connect to the WeVoteServer APIs
   VOTER_FRONT_END_APP_URL_PROTOCOL: 'http://', // 'http://' for local dev (if not using SSL), or 'https://' for live server
   VOTER_FRONT_END_APP_HOSTNAME: 'localhost:3000', // Don't add 'http...' here.  Live server: 'WeVote.US', Quality: 'quality.WeVote.US', developers: 'localhost:3000'
 
   ///////////////////////////////////////////////
-  // Keep both configuration blocks below, but only uncomment one of them at a time.
-  //// Connecting to local WeVoteServer APIs ////
+  // Keep all three configuration blocks below, but only uncomment one of them at a time.
+  //// Connecting to local WeVoteServer APIs HTTP ////
   // VOTER_FRONT_END_APP_SERVER_ROOT_URL: 'http://localhost:8000/',
   // VOTER_API_SERVER_ADMIN_ROOT_URL: 'http://localhost:8000/admin/',
   // VOTER_API_SERVER_API_ROOT_URL: 'http://localhost:8000/apis/v1/',
   // VOTER_API_SERVER_API_CDN_ROOT_URL: 'http://localhost:8000/apis/v1/',
+  //// Connecting to local WeVoteServer APIs HTTPS TLS/SSL ////
+  // VOTER_FRONT_END_APP_SERVER_ROOT_URL: 'https://wevotedeveloper.com:8000/',
+  // VOTER_API_SERVER_ADMIN_ROOT_URL: 'https://wevotedeveloper.com:8000/admin/',
+  // VOTER_API_SERVER_API_ROOT_URL: 'https://wevotedeveloper.com:8000/apis/v1/',
+  // VOTER_API_SERVER_API_CDN_ROOT_URL: 'https://wevotedeveloper.com:8000/apis/v1/',
   //// Connecting to live WeVoteServer APIs ////
   VOTER_API_SERVER_ROOT_URL: 'https://api.wevoteusa.org/',
   VOTER_API_SERVER_ADMIN_ROOT_URL: 'https://api.wevoteusa.org/admin/',
@@ -51,7 +61,7 @@ module.exports = {
   LOG_ONLY_FIRST_RENDER_EVENTS: false,
   LOG_HTTP_REQUESTS: false,
   LOG_ROUTING: false,
-  LOG_SIGNIN_STEPS: false,          // oAuthLog function prints to console
+  LOG_AUTHENTICATION: false,        // authLog function prints to console
   LOG_CORDOVA_OFFSETS: false,
   SHOW_CORDOVA_URL_FIELD: false,    // Only needed for debugging in Cordova
   ENABLE_REACT_QUERY_TOOLS: false,  // Show ReactQueryDevtools icon/console