Merge branch 'dev' into TCA-883_temp-dev

Author: brooketopcoder

src-ts/config/environments/environment.default.config.ts

@@ -36,6 +36,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,
         API_BASE: `${COMMUNITY_WEBSITE}/api`,
         BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,

src-ts/config/environments/environment.prod.config.ts

@@ -34,6 +34,7 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,
         API_BASE: `${COMMUNITY_WEBSITE}/api`,
         BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,

src-ts/lib/global-config.model.ts

@@ -29,6 +29,7 @@ export interface GlobalConfig {
         CUSTOMER_TOKEN: string
     }
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: string
         ACCOUNT_SETTINGS: string
         API_BASE: string
         BLOG_PAGE: string

src-ts/utils/settings/Settings.tsx

@@ -1,22 +1,18 @@
 import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
-import { ContentLayout, profileContext, ProfileContextData, routeContext, RouteContextData } from '../../lib'
+import { ContentLayout, routeContext, RouteContextData } from '../../lib'
 
 export const toolTitle: string = 'Account Settings'
 
+/**
+ * DEPRECATED
+ * TODO: Remove after some time, when clear no one links to here...
+ */
 const Settings: FC<{}> = () => {
 
     const { getChildRoutes }: RouteContextData = useContext(routeContext)
 
-    const profileContextData: ProfileContextData = useContext(profileContext)
-    const { profile }: ProfileContextData = profileContextData
-
-    // if we don't have a profile, don't show the page
-    if (!profile) {
-        return <></>
-    }
-
     return (
         <ContentLayout title={toolTitle}>
             <>

src-ts/utils/settings/account/Account.module.scss

@@ -1,22 +1,15 @@
-@import '../../../lib/styles/includes';
-
-:global(.account-settings-modal) {
-    h2 {
-        margin-bottom: $space-xxl;
-        padding: 0 0 $space-xxl;
-        border-bottom: 1px solid $black-10;
-    }
-
-}
-
+/**
+ * DEPRECATED
+ * TODO: Remove after some time, when no used...
+ */
 .cards {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: $space-xxl;
-    margin: $space-xxl 0 0;
-
-    @include ltemd {
-        grid-template-columns: 1fr;
-        row-gap: $space-xxl;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    h3 {
+        margin-bottom: 32px;
     }
 }

src-ts/utils/settings/account/Account.tsx

@@ -1,112 +1,29 @@
-/* eslint-disable jsx-a11y/tabindex-no-positive */
-import { Dispatch, FC, SetStateAction, useCallback, useContext, useState } from 'react'
-import Modal from 'react-responsive-modal'
+import { FC, useEffect } from 'react'
 
-import {
-    Button,
-    Card,
-    formGetInputFields,
-    FormInputModel,
-    formOnReset,
-    profileContext,
-    ProfileContextData,
-} from '../../../lib'
+import { Button } from '../../../lib'
+import { EnvironmentConfig } from '../../../config'
 
-import { ChangePassword } from './change-password'
-import { EditName, editNameFormDef } from './edit-name'
 import styles from './Account.module.scss'
 
+/**
+ * DEPRECTED
+ * TODO: Remove after some time, when clear no one links to here...
+ */
 const Account: FC<{}> = () => {
 
-    const profileContextData: ProfileContextData = useContext(profileContext)
-    const { profile }: ProfileContextData = profileContextData
-
-    const [editProfileOpen, setEditNameOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
-    const [changePasswordOpen, setChangePasswordOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
-
-    const toggleEditName = useCallback((): void => {
-        const inputs: Array<FormInputModel> = formGetInputFields(editNameFormDef.groups || [])
-        formOnReset(inputs)
-        setEditNameOpen(!editProfileOpen)
-    }, [editProfileOpen])
-
-    const toggleChangePassword = useCallback((): void => {
-        const inputs: Array<FormInputModel> = formGetInputFields(editNameFormDef.groups || [])
-        formOnReset(inputs)
-        setChangePasswordOpen(!changePasswordOpen)
-    }, [changePasswordOpen])
-
-    // if we don't have a profile, don't show the page
-    if (!profile) {
-        return <></>
-    }
+    // setup auto redirect in 5sec.
+    useEffect(() => {
+        setTimeout(() => {
+            window.location.href = EnvironmentConfig.TOPCODER_URLS.ACCOUNT_SETTINGS
+        }, 5000)
+    }, [])
 
     return (
         <div className={styles.cards}>
 
-            <Card title='Account'>
-                <p>
-                    <strong>Email:</strong>
-                    {' '}
-                    {profile.email}
-                </p>
-                <p>
-                    <strong>Username:</strong>
-                    {' '}
-                    {profile.handle}
-                </p>
-            </Card>
-
-            <Card
-                title='Name'
-                onClick={toggleEditName}
-            >
-                <p>
-                    {profile.firstName}
-                    {' '}
-                    {profile.lastName}
-                </p>
-                <Button
-                    label='edit name'
-                    onClick={toggleEditName}
-                    tabIndex={1}
-                    buttonStyle='secondary'
-                />
-            </Card>
-
-            <Modal
-                open={editProfileOpen}
-                onClose={toggleEditName}
-                classNames={{ modal: 'account-settings-modal' }}
-            >
-                <EditName onClose={toggleEditName} />
-            </Modal>
-
-            <Card
-                onClick={toggleChangePassword}
-                title='Password'
-            >
-                <p>
-                    *******************
-                </p>
-                <Button
-                    label='change password'
-                    onClick={toggleChangePassword}
-                    tabIndex={2}
-                    buttonStyle='secondary'
-                />
-            </Card>
-
-            <Modal
-                open={changePasswordOpen}
-                onClose={toggleChangePassword}
-                classNames={{ modal: 'account-settings-modal' }}
-            >
-                <ChangePassword onClose={toggleChangePassword} />
-            </Modal>
-
+            <h3>This page has moved.</h3>
+            <Button label='Navigate to Account Settings' url={`${EnvironmentConfig.TOPCODER_URLS.ACCOUNT_PROFILE}`} />
+            <p>We will automatically redirect you in 5 seconds...</p>
         </div>
     )
 }