NeatPlus · ft9dipesh · Aug 26, 2022
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v14.18.2
diff --git a/package.json b/package.json
@@ -81,10 +81,12 @@
         ],
         "moduleNameMapper": {
             "@ra/(.*)": "<rootDir>/src/vendor/react-arsenal/$1",
-            "@uiw/react-textarea-code-editor": "<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js"
+            "@uiw/react-textarea-code-editor": "<rootDir>/node_modules/@uiw/react-textarea-code-editor/dist/editor.js",
+            "^d3-(.*)$": "d3-$1/dist/d3-$1"
         },
         "transformIgnorePatterns": [
-            "<rootDir>/node_modules/rehype"
+            "<rootDir>/node_modules/rehype",
+            "node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
         ]
     }
 }
diff --git a/src/components/Concerns/Chart/index.js b/src/components/Concerns/Chart/index.js
@@ -78,7 +78,7 @@ const ConcernsChart = ({concerns}) => {
             return (
                 <div className={styles.tooltip}>
                     <p className={styles.tooltipLabel}>
-                        {`${payload[0].name}s : ${payload[0].value}`}
+                        {`${payload[0].name} : ${payload[0].value}`}
                     </p>
                 </div>
             );

diff --git a/src/components/Notice/index.js b/src/components/Notice/index.js
@@ -16,10 +16,18 @@ import styles from './styles.scss';
 const Notice = () => {
     const [{result}, getNotice] = usePromise(Api.getNotice);
 
-    useEffect(() => {
-        getNotice();
+    const fetchNoticeData = useCallback(async () => {
+        try {
+            await getNotice();
+        } catch(error) {
+            console.log(error);
+        }
     }, [getNotice]);
 
+    useEffect(() => {
+        fetchNoticeData();
+    }, [fetchNoticeData]);
+
     const notice = useMemo(() => result?.results?.find(el => el.isActive), [result]);
 
     const [showNotice, setShowNotice] = useState(true);

diff --git a/src/components/UserNav/index.js b/src/components/UserNav/index.js
@@ -21,7 +21,9 @@ import logo from 'assets/images/logo-dark.svg';
 import cs from '@ra/cs';
 import {logout} from 'store/actions/auth';
 import usePermissions from 'hooks/usePermissions';
+import useRequest from 'hooks/useRequest';
 import {weightagePermissions} from 'utils/permission';
+import Toast from 'services/toast';
 
 import Notification from './Notification';
 
@@ -37,6 +39,8 @@ const UserNav = (props) => {
     const {user} = useSelector(state => state.auth);
     const {activeSurvey} = useSelector(state => state.survey);
 
+    const [, logoutUser] = useRequest('/user/logout/', {method: 'POST'});
+
     const match = useRouteMatch({
         path: '/projects/:projectId/surveys/:surveyId/',
     });
@@ -64,10 +68,19 @@ const UserNav = (props) => {
         openNotification ? hideNotification() : showNotification();
     }, [hideNotification, openNotification, showNotification]);
 
-    const handleLogOut = useCallback(() => {
-        dispatch(logout());
-        history.push('/');
-    }, [dispatch, history]);
+    const handleLogOut = useCallback(async () => {
+        try {
+            const result = await logoutUser();
+            if(result) {
+                dispatch(logout());
+                return history.push('/');
+            }
+            throw new Error('logout failed');
+        } catch(error) {
+            Toast.show(_('Failed to logout. Please try again!'), Toast.DANGER);
+            console.log(error);
+        }
+    }, [dispatch, history, logoutUser]);
 
     const getInitial = useCallback(() => user?.firstName?.[0], [user]);
 

diff --git a/src/containers/Login/index.js b/src/containers/Login/index.js
@@ -1,17 +1,16 @@
-import {useCallback, useState} from 'react';
-import {Link, useHistory} from 'react-router-dom';
-
+import { useCallback, useState } from 'react';
+import { Link, useHistory } from 'react-router-dom';
 import useRequest from 'hooks/useRequest';
-import {dispatchLogin} from 'utils/dispatch';
+import { dispatchLogin } from 'utils/dispatch';
 
 import Container from 'components/Container';
 import AuthModals from 'components/AuthModals';
 import Button from 'components/Button';
-import Form, {InputField} from '@ra/components/Form';
+import Form, { InputField } from '@ra/components/Form';
 import TextInput from '@ra/components/Form/TextInput';
 import SecureTextInput from '@ra/components/Form/SecureTextInput';
-import {Localize} from '@ra/components/I18n';
-import {_} from 'services/i18n';
+import { Localize } from '@ra/components/I18n';
+import { _ } from 'services/i18n';
 
 import initStore from 'services/initStore';
 import useAuthModals from 'hooks/useAuthModals';
@@ -27,20 +26,19 @@ const Login = () => {
     const [error, setError] = useState(null);
     const [email, setEmail] = useState('');
 
-    const [{loading}, loginUser] = useRequest('/jwt/create/', {
+    const [{ loading }, loginUser] = useRequest('/user/login/', {
         method: 'POST',
     });
 
     const handleLogin = useCallback(
         async (formData) => {
-            const {username, password} = formData;
+            const { username, password } = formData;
             setEmail(username);
             setError(null);
             try {
-                const result = await loginUser({username, password});
+                const result = await loginUser({ username, password });
                 if (result) {
-                    const {access, refresh} = result;
-                    await dispatchLogin(access, refresh);
+                    await dispatchLogin();
                     history.push('/projects/');
                     initStore();
                 }
@@ -57,7 +55,7 @@ const Login = () => {
             <Container>
                 <div className={styles.loginContent}>
                     <div className={styles.nav}>
-                        <Link to='/' className={styles.navLink}>
+                        <Link to="/" className={styles.navLink}>
                             <img
                                 className={styles.logo}
                                 src={logo}
@@ -66,8 +64,12 @@ const Login = () => {
                         </Link>
                     </div>
                     <main className={styles.content}>
-                        <h2 className={styles.subTitle}><Localize>Welcome back!</Localize></h2>
-                        <h1 className={styles.title}><Localize>Log in to NEAT+</Localize></h1>
+                        <h2 className={styles.subTitle}>
+                            <Localize>Welcome back!</Localize>
+                        </h2>
+                        <h1 className={styles.title}>
+                            <Localize>Log in to NEAT+</Localize>
+                        </h1>
                         <div className={styles.loginContainer}>
                             <Form
                                 error={error}
@@ -78,7 +80,7 @@ const Login = () => {
                                 <InputField
                                     label={_('Email or Username')}
                                     component={TextInput}
-                                    name='username'
+                                    name="username"
                                     required
                                     className={styles.input}
                                     labelClassName={styles.inputLabel}
@@ -87,37 +89,44 @@ const Login = () => {
                                 <InputField
                                     label={_('Password')}
                                     component={SecureTextInput}
-                                    name='password'
+                                    name="password"
                                     required
                                     className={styles.input}
                                     labelClassName={styles.inputLabel}
                                     containerClassName={styles.inputGroup}
                                 />
-                                <Button loading={loading} className={styles.button}>
+                                <Button
+                                    loading={loading}
+                                    className={styles.button}
+                                >
                                     <Localize>Log in</Localize>
                                 </Button>
                             </Form>
                             <div className={styles.links}>
                                 <Link
                                     className={styles.linkItem}
-                                    to='#'
-                                    onClick={authModalsConfig.handleShowForgotPassword}
+                                    to="#"
+                                    onClick={
+                                        authModalsConfig.handleShowForgotPassword
+                                    }
                                 >
                                     <Localize>Forgot Password?</Localize>
                                 </Link>
                                 {!!error && (
-                                    <Link 
-                                        className={styles.linkItem} 
-                                        to="#" 
-                                        onClick={authModalsConfig.handleShowVerifyEmail}
+                                    <Link
+                                        className={styles.linkItem}
+                                        to="#"
+                                        onClick={
+                                            authModalsConfig.handleShowVerifyEmail
+                                        }
                                     >
                                         <Localize>Activate account?</Localize>
                                     </Link>
                                 )}
                             </div>
                             <p className={styles.text}>
                                 <Localize>Don't have an account?</Localize>{' '}
-                                <Link className={styles.link} to='/register'>
+                                <Link className={styles.link} to="/register">
                                     <Localize>Register Now</Localize>
                                 </Link>
                             </p>
@@ -126,28 +135,28 @@ const Login = () => {
                             <Link
                                 className={styles.link}
                                 to={{
-                                    pathname: '/legal-document', 
-                                    title: 'privacy-policy'
+                                    pathname: '/legal-document',
+                                    title: 'privacy-policy',
                                 }}
                             >
                                 <Localize>Privacy Policy</Localize>
                             </Link>
                             <Link
                                 className={styles.link}
                                 to={{
-                                    pathname: '/legal-document', 
-                                    title: 'terms-and-conditions'
+                                    pathname: '/legal-document',
+                                    title: 'terms-and-conditions',
                                 }}
                             >
                                 <Localize>Terms of Use</Localize>
                             </Link>
                         </div>
                     </main>
                 </div>
-                <AuthModals 
-                    username={email} 
-                    onRegisterComplete={authModalsConfig.hideModals} 
-                    {...authModalsConfig} 
+                <AuthModals
+                    username={email}
+                    onRegisterComplete={authModalsConfig.hideModals}
+                    {...authModalsConfig}
                 />
             </Container>
         </div>

diff --git a/src/containers/Register/index.js b/src/containers/Register/index.js
@@ -31,7 +31,7 @@ const Register = () => {
     const [recaptchaToken, setRecaptchaToken] = useState(null);
 
     const [{loading}, registerUser] = useRequest('/user/register/', {method: 'POST'});
-    const [, loginUser] = useRequest('/jwt/create/', {method: 'POST'});
+    const [, loginUser] = useRequest('/user/login/', {method: 'POST'});
 
     const handleCheck = useCallback(({checked}) => setAcceptTerms(checked), []);
 
@@ -87,8 +87,7 @@ const Register = () => {
         try {
             const result = await loginUser({username, password});
             if (result) {
-                const {access, refresh} = result;
-                await dispatchLogin(access, refresh);
+                await dispatchLogin();
                 history.push('/projects/');
             }
         } catch (err) {