Merge pull request #1662 from benetech/frontend_v2

#1636 - add scroll to section
benetech · Jan 29, 2021 · abb3ae6 · abb3ae6
2 parents 0fc33c6 + 46e833f
commit abb3ae6
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 20 deletions.
diff --git a/v2/src/components/Sidebar/index.js b/v2/src/components/Sidebar/index.js
@@ -3,15 +3,17 @@ import { connect } from 'react-redux';
 import {
     Button, Layout, Menu,
 } from 'antd';
-import { updateSideBarCollapsed } from '../../redux/ui/actions';
+import { goToPage, scrollTo, updateSideBarCollapsed } from '../../redux/ui/actions';
 import { logoutOfUserProfile } from '../../redux/userProfile/actions';
+import Locales from '../../strings';
 import styles from './styles.scss';
 
 const { Sider } = Layout;
 
 class Sidebar extends React.Component {
     state = {
         contrast: 'standard',
+        selectedKey: '',
     };
 
     handleContrastChange = (e) => {
@@ -28,11 +30,79 @@ class Sidebar extends React.Component {
         return (info.userType || '').replace(/(^|\s)\S/g, t => t.toUpperCase());
     }
 
+    getMenu = () => {
+        const { userProfile } = this.props;
+        const menuList = [];
+        if (userProfile.email) {
+            if (userProfile.userType === 'student') {
+                menuList.push({
+                    key: 'my_solution_sets',
+                    text: Locales.strings.my_solution_sets,
+                });
+                menuList.push({
+                    key: 'my_created_sets',
+                    text: Locales.strings.my_created_sets,
+                });
+            } else {
+                menuList.push({
+                    key: 'my_created_sets',
+                    text: Locales.strings.my_created_sets,
+                });
+                menuList.push({
+                    key: 'my_solution_sets',
+                    text: Locales.strings.my_solution_sets,
+                });
+            }
+        } else {
+            menuList.push({
+                key: 'my_sets',
+                text: Locales.strings.my_sets,
+            });
+        }
+        menuList.push({
+            key: 'example_sets',
+            text: Locales.strings.example_sets,
+        });
+        menuList.push({
+            key: 'about_mathshare',
+            text: Locales.strings.about_mathshare,
+        });
+        menuList.push({
+            key: 'help_center',
+            text: Locales.strings.help_center,
+        });
+        menuList.push({
+            key: 'accessibility',
+            text: Locales.strings.accessibility,
+        });
+        return menuList;
+    }
+
+    handleMenuSelect = (event) => {
+        const { key } = event;
+        this.setState({ selectedKey: key });
+        if (!['my_sets', 'my_solution_sets', 'my_created_sets', 'example_sets'].includes(key)) {
+            return null;
+        }
+        if (window.location.hash === '#/app') {
+            this.props.scrollTo({
+                scrollTo: key,
+            });
+        } else {
+            this.props.goToPage({
+                page: '/app',
+                scrollTo: key,
+            });
+        }
+        return null;
+    }
+
     render() {
         const { routerHooks, userProfile, ui } = this.props;
         if (routerHooks.current === '/#/userDetailsEdit' || routerHooks.current === '/#/userDetails') {
             return null;
         }
+        const active = routerHooks.current === '/#/app' ? this.state.selectedKey : '';
         return (
             <Sider
                 breakpoint="xl"
@@ -75,23 +145,14 @@ class Sidebar extends React.Component {
                     )}
                     <Menu
                         mode="inline"
-                        defaultSelectedKeys={['2']}
+                        selectedKeys={[active]}
+                        onSelect={this.handleMenuSelect}
                     >
-                        <Menu.Item key="2">
-                            My Sets
-                        </Menu.Item>
-                        <Menu.Item key="3">
-                            Example Sets
-                        </Menu.Item>
-                        <Menu.Item key="4">
-                            About Mathshare
-                        </Menu.Item>
-                        <Menu.Item key="5">
-                            Help
-                        </Menu.Item>
-                        <Menu.Item key="6">
-                            Settings
-                        </Menu.Item>
+                        {this.getMenu().map(menuItem => (
+                            <Menu.Item key={menuItem.key}>
+                                {menuItem.text}
+                            </Menu.Item>
+                        ))}
                     </Menu>
                 </div>
             </Sider>
@@ -106,6 +167,8 @@ export default connect(
         ui: state.ui,
     }),
     {
+        goToPage,
+        scrollTo,
         updateSideBarCollapsed,
         logoutOfUserProfile,
     },

diff --git a/v2/src/pages/Dashboard/index.js b/v2/src/pages/Dashboard/index.js
@@ -87,7 +87,7 @@ class Dashboard extends Component {
         const allowedSets = ['Example Problem Set', 'Combining Like Terms', 'Solve for X'];
         return (
             <>
-                <div className={styles.heading}>
+                <div className={styles.heading} id="example_sets">
                     <span className={styles.title}>{Locales.strings.example_sets}</span>
                 </div>
                 <Row className={`${styles.problemSetGrid} ${this.getLayout()}`}>
@@ -177,7 +177,7 @@ class Dashboard extends Component {
                     className={`justify-content-between ${styles.heading}`}
                     gutter={gutter}
                 >
-                    <Col className={`gutter-row ${styles.topBar}`} xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Col className={`gutter-row ${styles.topBar}`} xs={24} sm={24} md={12} lg={12} xl={12} id={title.replace(/ /g, '_').toLowerCase()}>
                         <span className={styles.title}>{title}</span>
                     </Col>
                     {isFirst && !ui.sideBarCollapsed && (
@@ -269,7 +269,7 @@ class Dashboard extends Component {
 
         return (
             <div style={{ padding: '20px' }}>
-                {this.renderSetsContainer('recentProblemSets', Locales.strings.my_created_sets, true)}
+                {this.renderSetsContainer('recentProblemSets', userProfile.email ? Locales.strings.my_created_sets : Locales.strings.my_sets, true)}
                 {this.renderSignInBanner()}
                 {userProfile.email && this.renderSetsContainer('recentSolutionSets', Locales.strings.my_solution_sets)}
                 {this.renderExampleSets()}

diff --git a/v2/src/redux/ui/actions.js b/v2/src/redux/ui/actions.js
@@ -43,6 +43,16 @@ export const blurFocusedElement = payload => ({
     payload,
 });
 
+export const goToPage = payload => ({
+    type: 'GOTO_PAGE',
+    payload,
+});
+
+export const scrollTo = payload => ({
+    type: 'SCROLL_TO',
+    payload,
+});
+
 export default {
     setDropdownId,
     setTtsPlaying,
@@ -51,4 +61,6 @@ export default {
     setCurrentHeight,
     setFocusedElement,
     blurFocusedElement,
+    goToPage,
+    scrollTo,
 };
diff --git a/v2/src/redux/ui/sagas.js b/v2/src/redux/ui/sagas.js
@@ -5,11 +5,14 @@ import {
     put,
     select,
     take,
+    takeEvery,
 } from 'redux-saga/effects';
+import { push } from 'connected-react-router';
 import {
     getState,
 } from './selectors';
 import {
+    scrollTo as scrollToAction,
     setDropdownId,
 } from './actions';
 import { announceOnAriaLive } from '../ariaLiveAnnouncer/actions';
@@ -42,9 +45,42 @@ function* validateDropdownSaga() {
     }
 }
 
+function* gotoPageSaga() {
+    yield takeEvery('GOTO_PAGE', function* workerSaga({
+        payload: {
+            page,
+            scrollTo,
+        },
+    }) {
+        yield put(push(page));
+        yield delay(1000);
+        yield put(scrollToAction({
+            scrollTo,
+        }));
+    });
+}
+
+function* scrollToPageSaga() {
+    yield takeEvery('SCROLL_TO', function* workerSaga({
+        payload: {
+            scrollTo,
+        },
+    }) {
+        const element = document.getElementById(scrollTo);
+        if (element) {
+            element.scrollIntoView();
+        }
+        yield put({
+            type: 'SCROLL_TO_COMPLETED',
+        });
+    });
+}
+
 export default function* rootSaga() {
     yield all([
         fork(closeDropdownSaga),
+        fork(gotoPageSaga),
+        fork(scrollToPageSaga),
         fork(validateDropdownSaga),
     ]);
 }
diff --git a/v2/src/strings.js b/v2/src/strings.js
@@ -4,6 +4,8 @@ class Locales {
     constructor() {
         this.strings = new LocalizedStrings({
             en: {
+                about_mathshare: 'About Mathshare',
+                accessibility: 'Accessibility',
                 active: 'active',
                 add_new_problem: 'Add New Problem',
                 add_new_problem_disabled: 'Add New Problem (enter data in current problem to enable this)',
@@ -55,6 +57,7 @@ class Locales {
                 grade_and_role_warning: 'Please make sure a grade and role is selected',
                 grade_of_study: 'What grade do you study in',
                 grade_of_work: 'What grade do you work with?',
+                help_center: 'Help Center',
                 info: 'Info',
                 load_more: 'Load More',
                 loading: 'Loading...',
@@ -64,6 +67,7 @@ class Locales {
                 ms: 'Microsoft',
                 ms_team: 'Microsoft Teams',
                 my_created_sets: 'My Created Sets',
+                my_sets: 'My Sets',
                 my_solution_sets: 'My Solution Sets',
                 my_steps: 'My Steps',
                 next_problem: 'Next Problem, {currentIndex} is currently active',