feat: added embedded code

src/components/editor/index.js

@@ -10,11 +10,11 @@ function Editor(props) {
 <EditorWrapper>
 {loading ? <h2>Loading....</h2> : null}
 <iframe
-title='editor'
-frameborder='0'
-width='100%'
-height='500px'
-src='https://repl.it/@amasad/PitifulLastingWhoopingcrane?lite=true'
+title="editor"
+frameBorder="0"
+width="100%"
+height="500px"
+src={props.src}
 onLoad={handleOnLoad}
 ></iframe>
 </EditorWrapper>

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/nav/index.js

@@ -64,8 +64,10 @@ function Nav(props) {
 }
 function handleClick(data) {
 showMenu && handleMenu(false);
-handleSelect(data);
-props.history.push(`/${data.value}`);
+if (data.value !== arrayMethod.value) {
+handleSelect(data);
+props.history.push(`/${data.value}`);
+}
 }
 const navItems = (
 <ul>

src/container/Filter/index.js

@@ -5,7 +5,8 @@ import { arrayMethod } from '../../utils/data';
 import { FilterStyle } from './filter.style';
 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';
 
 function Filter() {
 const filterFn = useRef(null);
@@ -122,23 +123,24 @@ function Filter() {
 handleClick={animateFilter}
 className={play && 'disable-animate-btn'}
 >
-<Block fontSize={9} paddingLeft='6px'>
+<Block fontSize={9} paddingLeft="6px">
 {box(dataA)}
 </Block>
-<Block fontSize={9} paddingLeft='6px' marginTop='-50px'>
+<Block fontSize={9} paddingLeft="6px" marginTop="-50px">
 {box(dataA, refBlockA)}
 </Block>
-<div className='filterFn-container'>
-<div ref={filterFn} className='filterFn rotate-zero'>
+<div className="filterFn-container">
+<div ref={filterFn} className="filterFn rotate-zero">
 <span>Filter Function</span>
 </div>
 </div>
 {boxHide && (
-<Block fontSize={9} paddingLeft='6px'>
+<Block fontSize={9} paddingLeft="6px">
 {box(dataB, refBlockB)}
 </Block>
 )}
 </AnimationBox>
+<Editor src={embeddLink.find(item => item.method === 'filter').link} />
 </FilterStyle>
 );
 }

src/container/Map/index.js

@@ -1,11 +1,12 @@
 import React, { useRef, useState } from 'react';
 import { TweenMax, Power0, TimelineMax } from 'gsap';
 import CodePanel from '../../components/codepanel';
-import { arrayMethod } from '../../utils/data';
-import { createData } from '../../utils/common';
 import { Block, Box } from '../../components/Blocks';
-import { MapStyle } from './map.style';
 import AnimationBox from '../../components/animationBox';
+import Editor from '../../components/editor';
+import { arrayMethod } from '../../utils/data';
+import { createData, embeddLink } from '../../utils/common';
+import { MapStyle } from './map.style';
 
 function Map() {
 const mapFn = useRef(null);
@@ -97,22 +98,23 @@ function Map() {
 handleClick={animateMap}
 className={play && 'disable-animate-btn'}
 >
-<Block fontSize={11} paddingLeft='3px'>
+<Block fontSize={11} paddingLeft="3px">
 {box(dataA)}
 </Block>
-<Block fontSize={11} paddingLeft='3px' marginTop='-50px'>
+<Block fontSize={11} paddingLeft="3px" marginTop="-50px">
 {box(dataA, refBlockA)}
 </Block>
-<div className='mapFn-container'>
-<div ref={mapFn} className='mapFn' />
+<div className="mapFn-container">
+<div ref={mapFn} className="mapFn" />
 <span>Map Function</span>
 </div>
 {boxHide && (
-<Block fontSize={11} paddingLeft='1px' marginTop='-50px'>
+<Block fontSize={11} paddingLeft="1px" marginTop="-50px">
 {box(dataB, refBlockB)}
 </Block>
 )}
 </AnimationBox>
+<Editor src={embeddLink.find(item => item.method === 'map').link} />
 </MapStyle>
 );
 }

src/container/Reduce/index.js

@@ -2,9 +2,10 @@ import React, { useRef, useState } from 'react';
 import { TweenMax, TimelineMax, Sine } from 'gsap';
 import CodePanel from '../../components/codepanel';
 import AnimationBox from '../../components/animationBox';
-import { arrayMethod } from '../../utils/data';
 import { Block, Box } from '../../components/Blocks';
-import { createData } from '../../utils/common';
+import Editor from '../../components/editor';
+import { createData, embeddLink } from '../../utils/common';
+import { arrayMethod } from '../../utils/data';
 import { ReduceStyle } from './reduce.style';
 
 function Reduce() {
@@ -134,23 +135,24 @@ function Reduce() {
 handleClick={animateReduce}
 className={play && 'disable-animate-btn'}
 >
-<Block fontSize={9} paddingLeft='4px'>
+<Block fontSize={9} paddingLeft="4px">
 {box(dataA)}
 </Block>
-<Block fontSize={9} marginTop='-50px' paddingLeft='4px'>
+<Block fontSize={9} marginTop="-50px" paddingLeft="4px">
 {box(dataA, refBlockA)}
 </Block>
-<div className='reduceFn-container'>
-<div ref={reduceFn} className='reduceFn'>
+<div className="reduceFn-container">
+<div ref={reduceFn} className="reduceFn">
 <span>Reduce Function</span>
 </div>
 </div>
 {boxHide && (
-<Block fontSize={9} paddingLeft='4px' className='result-container'>
+<Block fontSize={9} paddingLeft="4px" className="result-container">
 {box(dataB, refBlockB, 'absolute')}
 </Block>
 )}
 </AnimationBox>
+<Editor src={embeddLink.find(item => item.method === 'reduce').link} />
 </ReduceStyle>
 );
 }

src/container/Sort/index.js

@@ -4,10 +4,11 @@ import theme from 'styled-theming';
 import defaultTheme from '../../style/themes';
 import CodePanel from '../../components/codepanel';
 import AnimationBox from '../../components/animationBox';
+import { Block, Box } from '../../components/Blocks';
+import Editor from '../../components/editor';
 import { arrayMethod } from '../../utils/data';
-import { colorArray } from '../../utils/common';
+import { colorArray, embeddLink } from '../../utils/common';
 import { SortStyle } from './sort.style';
-import { Block, Box } from '../../components/Blocks';
 
 function Sort() {
 const block1 = useRef(null);
@@ -100,7 +101,7 @@ function Sort() {
 <CodePanel>
 <div dangerouslySetInnerHTML={{ __html: arrayMethod.sortA.data }} />
 <div dangerouslySetInnerHTML={{ __html: arrayMethod.sortA.function }} />
-<div className='or'>----OR----</div>
+<div className="or">----OR----</div>
 <div
 dangerouslySetInnerHTML={{
 __html: arrayMethod.sortA.alternative_function
@@ -123,7 +124,7 @@ function Sort() {
 <CodePanel>
 <div dangerouslySetInnerHTML={{ __html: arrayMethod.sortD.data }} />
 <div dangerouslySetInnerHTML={{ __html: arrayMethod.sortD.function }} />
-<div className='or'>----OR----</div>
+<div className="or">----OR----</div>
 <div
 dangerouslySetInnerHTML={{
 __html: arrayMethod.sortD.alternative_function
@@ -141,6 +142,7 @@ function Sort() {
 </Block>
 )}
 </AnimationBox>
+<Editor src={embeddLink.find(item => item.method === 'sort').link} />
 </SortStyle>
 );
 }

src/utils/common.js

@@ -46,3 +46,17 @@ export const createData = (data, ele) => {
 return arr;
 }, []);
 };
+
+export const embeddLink = [
+{ method: 'map', link: 'https://repl.it/@manisha1896/myMap?lite=true' },
+{ method: 'find', link: 'https://repl.it/@manisha1896/myFind?lite=true' },
+{
+method: 'findIndex',
+link: 'https://repl.it/@manisha1896/myFindIndex?lite=true'
+},
+{ method: 'filter', link: 'https://repl.it/@manisha1896/myFilter?lite=true' },
+{ method: 'reduce', link: 'https://repl.it/@manisha1896/myReduce?lite=true' },
+{ method: 'some', link: 'https://repl.it/@manisha1896/mySome?lite=true' },
+{ method: 'every', link: 'https://repl.it/@manisha1896/myEvery?lite=true' },
+{ method: 'sort', link: 'https://repl.it/@manisha1896/mySort?lite=true' }
+];