reset help link & move help icon to navbar

UniversityOfHelsinkiCS · Sep 23, 2024 · 50778e7 · 50778e7
1 parent 629af98
commit 50778e7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 27 deletions.
diff --git a/client/components/NavBar.js b/client/components/NavBar.js
@@ -40,7 +40,7 @@ import {
   learningLanguageSelector,
   getBackgroundColor,
   supportedLearningLanguages,
-  localeCodeToName
+  getHelpLink
 } from 'Utilities/common'
 import { Offline } from 'react-detect-offline'
 import { FormattedMessage, FormattedHTMLMessage, useIntl } from 'react-intl'
@@ -191,13 +191,13 @@ export default function NavBar() {
             : undefined
         dispatch(setIrtDummyScore(irtScore))
       }
-      setHelpLink(getHelpLink())
+      setHelpLink(getHelpLink(locale, isTeacher, learningLanguage))
     }
   }, [user])
 
   useEffect(() => {
     dispatch(getMetadata(learningLanguage))
-    setHelpLink(getHelpLink())
+    setHelpLink(getHelpLink(locale, isTeacher, learningLanguage))
   }, [learningLanguage])
 
   useEffect(() => {
@@ -207,28 +207,7 @@ export default function NavBar() {
   }, [])
 
 
-  const getHelpLink = () => {
-    const interface_language = localeCodeToName(locale)
-    if (isTeacher && interface_language == 'Russian' && learningLanguage == 'Finnish') 
-      return 'https://docs.google.com/presentation/d/1MKh8e15yEziO4iJtG2-rovP4nRMciUS8cCSpy4KnsUg/edit?usp=drive_link'
-    else if (isTeacher && interface_language == 'English' && learningLanguage == 'Finnish')
-      return 'https://docs.google.com/presentation/d/16wRAQjgfRIqkXig9JAxkC3Ll1Zoi35P0chjG3KO_cgI/edit?usp=drive_link'
-    else if (isTeacher && interface_language == 'Russian' && learningLanguage == 'Russian')
-      return 'https://docs.google.com/presentation/d/1lORT0jD_UOxzDI7Tar2k_5nyYXSkp8r8Ywa-njpS2uk/edit?usp=drive_link'
-    else if (isTeacher && interface_language == 'Finnish' && learningLanguage == 'Finnish')
-      return 'https://docs.google.com/presentation/d/11zzFn62Xl1dYxA0GSYOjls7cVH7hqZstjha5GOnO1m4/edit?usp=drive_link'
-    else if (!isTeacher && interface_language == 'Chinese' && learningLanguage == 'Russian')
-      return 'https://docs.google.com/presentation/d/1JtCkK1x48ZuC3URpMAJShQwdI9qBel8A35heXuJ7NFs/edit?usp=drive_link'
-    else if (!isTeacher && interface_language == 'Russian' && learningLanguage == 'Finnish')
-      return 'https://docs.google.com/presentation/d/16g-k_DupoDkf814LVjQVy7u7hGsS6Rh255DaWUN0ywQ/edit?usp=drive_link'
-    else if (!isTeacher && interface_language == 'Finnish' && learningLanguage == 'Finnish')
-      return 'https://docs.google.com/presentation/d/1hOOekSdDC3MeIJoWphPDg3xk3LTJ16jsFQ5fJKrhxGQ/edit?usp=drive_link'
-    else if (!isTeacher && interface_language == 'English' && learningLanguage == 'Finnish')
-      return 'https://docs.google.com/presentation/d/1qZ9syaJZVgUXgr0DATDehJl-xefZSA2C6yZnkN6NyiY/edit?usp=drive_link'
-    else if (!isTeacher && interface_language == 'English' && learningLanguage == 'Russian')
-      return 'https://docs.google.com/presentation/d/1OSNXy5cydhqMRqRO4I2csG2DqN70Po1HTW-3DYJMxZ8/edit?usp=drive_link'
-    else return null
-  }
+
 
   const irt_score =
     irtExerciseHistory && irtExerciseHistory.length > 0
@@ -471,6 +450,30 @@ export default function NavBar() {
               />
             </div>
           </Nav>
+          <Nav>
+            <div className="navbar-container" style={{ width: '90%' }}>
+              <Popup
+                trigger={
+                  <a
+                    className="navbar-basic-icon"
+                    style={{ display: 'table-cell' }}
+                    href={helpLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span style={{position: 'relative', cursor: 'pointer',}}>
+                      <Icon name="help circle" size="large" style={{ color: 'black' }} />
+                    </span>
+                  </a>
+                }
+                content={
+                  <FormattedMessage id="help" />
+                }
+                on="hover"
+                position="bottom right"
+              />
+            </div>
+          </Nav>
           {/******************************* END *******************************/}
         </Navbar.Collapse>
       </Navbar>

diff --git a/client/components/Sidebar.js b/client/components/Sidebar.js
@@ -31,7 +31,7 @@ import useWindowDimensions from 'Utilities/windowDimensions'
 import ContactUs from './StaticContent/ContactUs'
 import LearningSettingsModal from './LearningSettingsModal'
 import PracticeModal from './HomeView/PracticeModal'
-import { hiddenFeatures } from 'Utilities/common'
+import { hiddenFeatures, getHelpLink } from 'Utilities/common'
 
 export default function Sidebar({ history }) {
   const dispatch = useDispatch()
@@ -46,6 +46,7 @@ export default function Sidebar({ history }) {
   const [practiceModalOpen, setPracticeModalOpen] = useState(false)
   const intl = useIntl()
   const isTeacher = user?.user.is_teacher
+  const [helpLink, setHelpLink] = useState(null)
 
   const handleLocaleChange = newLocale => {
     dispatch(setLocale(newLocale)) // Sets locale in root reducer...
@@ -54,6 +55,12 @@ export default function Sidebar({ history }) {
 
   const marginTopButton = '8px'
 
+  useEffect(() => {
+    if (user) {
+      setHelpLink(getHelpLink(locale, isTeacher, learningLanguage))
+    }
+  }, [user, learningLanguage])
+
   useEffect(() => {
     const temp = localeOptions.map(option => ({
       value: option.code,
@@ -364,7 +371,7 @@ export default function Sidebar({ history }) {
                   text={intl.formatMessage({id: 'start-tour'})} icon='info circle'
                 />
               )}
-              <DropdownItem as={Link} to="/help" text={intl.formatMessage({id: 'help'})} icon='help circle' />
+              {/* <DropdownItem as={Link} to={helpLink} text={intl.formatMessage({id: 'help'})} icon='help circle' /> */}
               <DropdownItem
                 data-cy="about-button"
                 as={Link}

diff --git a/client/util/common.js b/client/util/common.js
@@ -958,6 +958,30 @@ const tourSign = () => {
   )
 }
 
+
+export const getHelpLink = (locale, isTeacher, learningLanguage) => {
+  const interface_language = localeCodeToName(locale)
+  if (isTeacher && interface_language == 'Russian' && learningLanguage == 'Finnish') 
+    return 'https://docs.google.com/presentation/d/1MKh8e15yEziO4iJtG2-rovP4nRMciUS8cCSpy4KnsUg/edit?usp=drive_link'
+  else if (isTeacher && interface_language == 'English' && learningLanguage == 'Finnish')
+    return 'https://docs.google.com/presentation/d/16wRAQjgfRIqkXig9JAxkC3Ll1Zoi35P0chjG3KO_cgI/edit?usp=drive_link'
+  else if (isTeacher && interface_language == 'Russian' && learningLanguage == 'Russian')
+    return 'https://docs.google.com/presentation/d/1lORT0jD_UOxzDI7Tar2k_5nyYXSkp8r8Ywa-njpS2uk/edit?usp=drive_link'
+  else if (isTeacher && interface_language == 'Finnish' && learningLanguage == 'Finnish')
+    return 'https://docs.google.com/presentation/d/11zzFn62Xl1dYxA0GSYOjls7cVH7hqZstjha5GOnO1m4/edit?usp=drive_link'
+  else if (!isTeacher && interface_language == 'Chinese' && learningLanguage == 'Russian')
+    return 'https://docs.google.com/presentation/d/1JtCkK1x48ZuC3URpMAJShQwdI9qBel8A35heXuJ7NFs/edit?usp=drive_link'
+  else if (!isTeacher && interface_language == 'Russian' && learningLanguage == 'Finnish')
+    return 'https://docs.google.com/presentation/d/16g-k_DupoDkf814LVjQVy7u7hGsS6Rh255DaWUN0ywQ/edit?usp=drive_link'
+  else if (!isTeacher && interface_language == 'Finnish' && learningLanguage == 'Finnish')
+    return 'https://docs.google.com/presentation/d/1hOOekSdDC3MeIJoWphPDg3xk3LTJ16jsFQ5fJKrhxGQ/edit?usp=drive_link'
+  else if (!isTeacher && interface_language == 'English' && learningLanguage == 'Finnish')
+    return 'https://docs.google.com/presentation/d/1qZ9syaJZVgUXgr0DATDehJl-xefZSA2C6yZnkN6NyiY/edit?usp=drive_link'
+  else if (!isTeacher && interface_language == 'English' && learningLanguage == 'Russian')
+    return 'https://docs.google.com/presentation/d/1OSNXy5cydhqMRqRO4I2csG2DqN70Po1HTW-3DYJMxZ8/edit?usp=drive_link'
+  else return '/help'
+}
+
 /////////////////////////////////////////////////////////
 // OLD tour item #3
 //-   {