Custom method data

src/App.js

@@ -5,6 +5,7 @@ import { ThemeProvider } from 'styled-components';
 import Transitions from './components/Transitions';
 import Loader from './components/loader';
 import SubHeader from './components/subHeader';
+import Footer from './components/footer';
 import { saveState, loadState } from './utils/common';
 import GlobalStyle from './style/global.style';
 
@@ -55,22 +56,23 @@ function App(props) {
 
 <Nav handleMode={handleModeChange} />
 <Header />
-<div className='app-container'>
+<div className="app-container">
 <SubHeader />
 <Suspense fallback={<Loader />}>
 <Transitions pageKey={props.location.key}>
 <Switch location={props.location}>
-<Route exact path='/' component={Home} />
-<Route path='/map' component={MapMethod} />
-<Route path='/find' component={FindMethod} />
-<Route path='/findindex' component={FindIndexMethod} />
-<Route path='/reduce' component={ReduceMethod} />
-<Route path='/filter' component={FilterMethod} />
-<Route path='/sort' component={SortMethod} />
+<Route exact path="/" component={Home} />
+<Route path="/map" component={MapMethod} />
+<Route path="/find" component={FindMethod} />
+<Route path="/findindex" component={FindIndexMethod} />
+<Route path="/reduce" component={ReduceMethod} />
+<Route path="/filter" component={FilterMethod} />
+<Route path="/sort" component={SortMethod} />
 </Switch>
 </Transitions>
 </Suspense>
 </div>
+<Footer />
 </>
 </ThemeProvider>
 );

src/components/Transitions.js

@@ -4,13 +4,13 @@ import styled from 'styled-components';
 
 export default ({ pageKey, children }) => (
 <Wrapper>
-<TransitionGroup className='transition-group'>
+<TransitionGroup className="transition-group">
 <CSSTransition
 key={pageKey}
 timeout={{ enter: 300, exit: 300 }}
-classNames='fade'
+classNames="fade"
 >
-<div className='route-section'>{children}</div>
+<div className="route-section">{children}</div>
 </CSSTransition>
 </TransitionGroup>
 </Wrapper>
@@ -39,10 +39,10 @@ const Wrapper = styled.div`
 position: relative;
 }
 
-.route-section {
+/* .route-section {
 position: absolute;
 width: 100%;
 top: 0;
 left: 0;
-}
+} */
 `;

src/components/editor/editor.style.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import theme from 'styled-theming';
+
+const borderColor = theme('mode', {
+light: '#000',
+dark: '#fff'
+});
+
+const EditorWrapper = styled.div`
+position: relative;
+margin: 70px 0px;
+width: 100%;
+height: 500px;
+display: flex;
+justify-content: center;
+align-items: center;
+border: 1px solid ${borderColor};
+h2 {
+position: absolute;
+font-size: 46px;
+}
+`;
+
+export { EditorWrapper };

src/components/editor/index.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { EditorWrapper } from './editor.style';
+
+function Editor(props) {
+const [loading, handleLoading] = useState(true);
+function handleOnLoad() {
+loading && handleLoading(false);
+}
+return (
+<EditorWrapper>
+{loading ? <h2>Loading....</h2> : null}
+<iframe
+title="editor"
+frameBorder="0"
+width="100%"
+height="500px"
+src={props.src}
+onLoad={handleOnLoad}
+></iframe>
+</EditorWrapper>
+);
+}
+
+export default Editor;

src/components/find/index.js

@@ -4,7 +4,8 @@ import CodePanel from '../../components/codepanel';
 import { arrayMethod } from '../../utils/data';
 import { Block, Box } from '../../components/Blocks';
 import AnimationBox from '../../components/animationBox';
-import { colorArray } from '../../utils/common';
+import Editor from '../../components/editor';
+import { colorArray, embeddLink } from '../../utils/common';
 import { FindStyle } from './find.style';
 
 function Find(props) {
@@ -76,7 +77,7 @@ function Find(props) {
 <CodePanel>
 <div dangerouslySetInnerHTML={{ __html: arrayMethod[find].data }} />
 <div dangerouslySetInnerHTML={{ __html: arrayMethod[find].function }} />
-<div className='or'>----OR----</div>
+<div className="or">----OR----</div>
 <div
 dangerouslySetInnerHTML={{
 __html: arrayMethod[find].alternative_function
@@ -96,12 +97,13 @@ function Find(props) {
 {owner}
 {floor && <span>{floor[index]}</span>}
 </Box>
-<div className='icon'></div>
+<div className="icon"></div>
 </div>
 );
 })}
 </Block>
 </AnimationBox>
+<Editor src={embeddLink.find(item => item.method === find).link} />
 </FindStyle>
 );
 }

src/components/footer/footer.style.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import theme from 'styled-theming';
+
+const bgColor = theme('mode', {
+light: '#343b46',
+dark: '#b1b1b1'
+});
+
+const color = theme('mode', {
+light: '#b1b1b1',
+dark: '#343b46'
+});
+
+const Footer = styled.div`
+min-height: 180px;
+padding-top: 72px;
+text-align: center;
+background-color: ${bgColor};
+color: ${color};
+.crafted {
+margin-bottom: 20px;
+font-size: 14px;
+}
+.copyright {
+font-size: 10px;
+}
+`;
+
+export default Footer;

src/components/footer/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import FooterWapper from './footer.style';
+
+function Footer() {
+return (
+<FooterWapper>
+<p className="crafted">
+Crafted with{' '}
+<span role="img" aria-label="heart">
+❤️
+</span>
+using React Hooks and GSAP
+</p>
+<p className="copyright">Copyright 2019 - jscodelover</p>
+</FooterWapper>
+);
+}
+
+export default Footer;

src/components/nav/index.js

@@ -13,57 +13,27 @@ function Nav(props) {
 const options = [
 {
 value: 'filter',
-label: (
-<Link to='/filter' className='linkRouter'>
-Filter Method
-</Link>
-),
-name: 'Filter Method'
+label: 'Filter Method'
 },
 {
 value: 'map',
-label: (
-<Link to='/map' className='linkRouter'>
-Map Method
-</Link>
-),
-name: 'Map Method'
+label: 'Map Method'
 },
 {
 value: 'find',
-label: (
-<Link to='/find' className='linkRouter'>
-Find Method
-</Link>
-),
-name: 'Find Method'
+label: 'Find Method'
 },
 {
 value: 'findIndex',
-label: (
-<Link to='/findindex' className='linkRouter'>
-Find-Index Method
-</Link>
-),
-name: 'Find-Index Method'
+label: 'Find-Index Method'
 },
 {
 value: 'reduce',
-label: (
-<Link to='/reduce' className='linkRouter'>
-Reduce Method
-</Link>
-),
-name: 'Reduce Method'
+label: 'Reduce Method'
 },
 {
 value: 'sort',
-label: (
-<Link to='/sort' className='linkRouter'>
-Sort Method
-</Link>
-),
-name: 'Sort Method'
+label: 'Sort Method'
 }
 ];
 
@@ -74,7 +44,6 @@ function Nav(props) {
 const arMethod = options.find(method => pathname.includes(method.value));
 handleSelect(arMethod);
 }, [props]);
-
 useEffect(() => {
 handleScroll();
 window.addEventListener('scroll', handleScroll);
@@ -93,64 +62,70 @@ function Nav(props) {
 ease: Power3.easeOut
 });
 }
+function handleClick(data) {
+showMenu && handleMenu(false);
+if (data.value !== arrayMethod.value) {
+handleSelect(data);
+props.history.push(`/${data.value}`);
+}
+}
 const navItems = (
 <ul>
 <li onClick={() => handleSelect(null)}>
-<Link to='/' className='linkRouter'>
+<Link to="/" className="linkRouter">
 Home
 </Link>
 </li>
 
 <li>
 <Select
-classNamePrefix='customSelect'
+classNamePrefix="customSelect"
 isSearchable={false}
 isClearable={false}
 value={arrayMethod}
 onChange={data => {
-showMenu && handleMenu(false);
-handleSelect(data);
+handleClick(data);
 }}
 options={options}
 components={{
 IndicatorSeparator: () => null
 }}
-placeholder='Select Method'
+placeholder="Select Method"
 />
 </li>
 <li>About Me</li>
 <li>
 <button
-className='theme-btn'
+className="theme-btn"
 onClick={() => {
 showMenu && handleMenu(false);
 props.handleMode();
 }}
 >
 <svg
-height='448pt'
-viewBox='-12 0 448 448.04455'
-width='448pt'
-xmlns='http://www.w3.org/2000/svg'
+height="448pt"
+viewBox="-12 0 448 448.04455"
+width="448pt"
+xmlns="http://www.w3.org/2000/svg"
 >
-<path d='m224.023438 448.03125c85.714843.902344 164.011718-48.488281 200.117187-126.230469-22.722656 9.914063-47.332031 14.769531-72.117187 14.230469-97.15625-.109375-175.890626-78.84375-176-176 .972656-65.71875 37.234374-125.832031 94.910156-157.351562-15.554688-1.980469-31.230469-2.867188-46.910156-2.648438-123.714844 0-224.0000005 100.289062-224.0000005 224 0 123.714844 100.2851565 224 224.0000005 224zm0 0' />
+<path d="m224.023438 448.03125c85.714843.902344 164.011718-48.488281 200.117187-126.230469-22.722656 9.914063-47.332031 14.769531-72.117187 14.230469-97.15625-.109375-175.890626-78.84375-176-176 .972656-65.71875 37.234374-125.832031 94.910156-157.351562-15.554688-1.980469-31.230469-2.867188-46.910156-2.648438-123.714844 0-224.0000005 100.289062-224.0000005 224 0 123.714844 100.2851565 224 224.0000005 224zm0 0" />
 </svg>
 </button>
 </li>
 </ul>
 );
 return showMenu && screenWidth < 628 ? (
 <SideBar>
-<div className='backdrop' />
+<div className="backdrop" />
 <NavStyle>{navItems}</NavStyle>
 </SideBar>
 ) : (
 <NavStyle ref={navRef}>
 {screenWidth > 628 ? (
 navItems
 ) : (
-<button className='menu-btn' onClick={() => handleMenu(true)}>
-<img src='/image/menu.svg' alt='menu' />
+<button className="menu-btn" onClick={() => handleMenu(true)}>
+<img src="/image/menu.svg" alt="menu" />
 </button>
 )}
 </NavStyle>