new tab for videos

Author: exidy80

client/src/Components/Navigation/HomeNav/HomeNav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import { getVideosUrl } from 'utils';
 import NavItem from '../NavItem/NavItem';
 import Avatar from '../../UI/Avatar/Avatar';
 import DropdownNavItem from '../DropdownNavItem';
@@ -33,9 +34,32 @@ const Navbar = ({ page, user, loggedIn, isDark, toggleAdmin }) => {
     });
   }
 
+  const _handleExternalLinkClick = (url) => {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  const _videoButton = () => {
+    return (
+      <button
+        onClick={() => _handleExternalLinkClick(getVideosUrl())}
+        style={{
+          border: 'none',
+          fontSize: 'inherit',
+          fontFamily: 'inherit',
+          background: 'inherit',
+          color: 'inherit',
+          fontWeight: 'inherit',
+        }}
+      >
+        Videos
+      </button>
+    );
+  };
+
   const aboutList = [
     { name: 'About', link: '/about' },
     { name: 'Instructions', link: '/instructions' },
+    { name: 'Videos', sliderDetails: { customComponent: _videoButton() } },
     { name: 'FAQ', link: '/faq' },
     { name: 'Contact', link: '/contact' },
   ];

client/src/Components/Navigation/NavItem/NavItem.js

@@ -17,7 +17,8 @@ const NavItem = ({ name, link, ntf, sliderDetails, pattern }) => {
   const dataName = typeof name === 'string' ? name : 'profile';
 
   if (sliderDetails) {
-    const { isOn, onClick } = sliderDetails;
+    const { isOn, onClick, customComponent } = sliderDetails;
+    if (customComponent) return <div className={style}>{customComponent}</div>;
     return (
       <div className={style}>
         <Checkbox checked={isOn} change={onClick} dataId={`nav-${dataName}`}>
@@ -47,6 +48,7 @@ NavItem.propTypes = {
   sliderDetails: PropTypes.shape({
     isOn: PropTypes.bool,
     onClick: PropTypes.func,
+    customComponent: PropTypes.element,
   }),
 };
 

client/src/Components/Navigation/Navbar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
+import { getVideosUrl } from 'utils';
 import NavItem from './NavItem/NavItem';
 import DropdownNavItem from './DropdownNavItem';
 import classes from './navbar.css';
@@ -30,9 +31,32 @@ const Navbar = ({ user, location, toggleAdmin }) => {
     styles = classes.EditorNavContainer;
   }
 
+  const _handleExternalLinkClick = (url) => {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  const _videoButton = () => {
+    return (
+      <button
+        onClick={() => _handleExternalLinkClick(getVideosUrl())}
+        style={{
+          border: 'none',
+          fontSize: 'inherit',
+          fontFamily: 'inherit',
+          background: 'inherit',
+          color: 'inherit',
+          fontWeight: 'inherit',
+        }}
+      >
+        Videos
+      </button>
+    );
+  };
+
   const aboutList = [
     { name: 'About', link: '/about' },
     { name: 'Instructions', link: '/instructions' },
+    { name: 'Videos', sliderDetails: { customComponent: _videoButton() } },
     { name: 'FAQ', link: '/faq' },
     { name: 'Contact', link: '/contact' },
   ];

client/src/utils/appUrls.js

@@ -15,3 +15,6 @@ export const getGoogleUrl = () => {
 
 export const getDesmosActivityUrl = (code) =>
   `https://teacher.desmos.com/activitybuilder/custom/${code}`;
+
+export const getVideosUrl = () =>
+  'https://drive.google.com/drive/folders/1WbYYSlV0si0G8Odeuh1giR222qkkG-7M';