Implement editor tabs

octo-technology · Jul 7, 2020 · 9b76d78 · 9b76d78
1 parent 84b5762
commit 9b76d78
Show file tree

Hide file tree

Showing 90 changed files with 386 additions and 301 deletions.
diff --git a/src/frontend/src/pages/Chapter/Chapter.controller.tsx b/src/frontend/src/pages/Chapter/Chapter.controller.tsx
@@ -11,18 +11,30 @@ import { Footer } from './Chapter.components/Footer/Footer.controller'
 import { chapterData } from './Chapter.data'
 import { ChapterView } from './Chapter.view'
 
+interface Data {
+  course: string | undefined
+  exercise: string | undefined
+  solution: string | undefined
+  supports: Record<string, string | undefined>
+}
+
 export const Chapter = () => {
   const [validatorState, setValidatorState] = useState(PENDING)
   const [showDiff, setShowDiff] = useState(false)
   const { pathname } = useLocation()
-  const [data, setData] = useState({ course: undefined, exercise: undefined, solution: undefined })
+  const [data, setData] = useState<Data>({ course: undefined, exercise: undefined, solution: undefined, supports: {} })
   const dispatch = useDispatch()
   const user = useSelector((state: State) => state.auth.user)
 
   useEffect(() => {
     chapterData.forEach((chapter) => {
       if (pathname === chapter.pathname)
-        setData({ course: chapter.data.course, exercise: chapter.data.exercise, solution: chapter.data.solution })
+        setData({
+          course: chapter.data.course,
+          exercise: chapter.data.exercise,
+          solution: chapter.data.solution,
+          supports: chapter.data.supports,
+        })
     })
   }, [pathname])
 
@@ -61,6 +73,7 @@ export const Chapter = () => {
         proposedSolutionCallback={proposedSolutionCallback}
         showDiff={showDiff}
         course={data.course}
+        supports={data.supports}
       />
       <Footer />
     </>

diff --git a/src/frontend/src/pages/Chapter/Chapter.data.tsx b/src/frontend/src/pages/Chapter/Chapter.data.tsx
diff --git a/src/frontend/src/pages/Chapter/Chapter.view.tsx b/src/frontend/src/pages/Chapter/Chapter.view.tsx
@@ -2,10 +2,12 @@ import Editor, { ControlledEditor, DiffEditor } from '@monaco-editor/react'
 import Markdown from 'markdown-to-jsx'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
+import { useState } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import { PENDING, RIGHT, WRONG } from '../ChapterAbout/ChapterAbout.constants'
 //prettier-ignore
-import { Button, ButtonBorder, ButtonText, ChapterCourse, ChapterGrid, ChapterH1, ChapterH2, ChapterItalic, ChapterMonaco, ChapterStyled, ChapterValidator, ChapterValidatorContent, ChapterValidatorContentWrapper, ChapterValidatorInside, ChapterValidatorTitle } from "../ChapterAbout/ChapterAbout.style";
+import { Button, ButtonBorder, ButtonText, ChapterCourse, ChapterGrid, ChapterH1, ChapterH2, ChapterItalic, ChapterMonaco, ChapterStyled, ChapterTab, ChapterValidator, ChapterValidatorContent, ChapterValidatorContentWrapper, ChapterValidatorInside, ChapterValidatorTitle } from "../ChapterAbout/ChapterAbout.style";
 import { CardBottomCorners, CardTopCorners } from './Chapter.components/Card/Card.style'
 import { Dialog } from './Chapter.components/Dialog/Dialog.controller'
 import { Light } from './Chapter.components/Light/Light.view'
@@ -34,6 +36,29 @@ const MonacoReadOnly = ({ children }: any) => {
   )
 }
 
+const MonacoEditorSupport = ({ support }: any) => {
+  return (
+    <div>
+      <Editor
+        height="500px"
+        value={support}
+        language="pascaligo"
+        theme="myCustomTheme"
+        options={{
+          lineNumbers: true,
+          scrollBeyondLastLine: true,
+          minimap: { enabled: false },
+          scrollbar: { vertical: 'hidden', verticalScrollbarSize: 0 },
+          folding: true,
+          readOnly: true,
+          fontSize: 14,
+          fontFamily: 'Proxima Nova',
+        }}
+      />
+    </div>
+  )
+}
+
 const MonacoEditor = ({ proposedSolution, proposedSolutionCallback }: any) => {
   return (
     <div>
@@ -156,6 +181,7 @@ type ChapterViewProps = {
   proposedSolutionCallback: (e: string) => void
   showDiff: boolean
   course?: string
+  supports: Record<string, string | undefined>
 }
 
 export const ChapterView = ({
@@ -166,20 +192,47 @@ export const ChapterView = ({
   proposedSolutionCallback,
   showDiff,
   course,
+  supports,
 }: ChapterViewProps) => {
+  const [display, setDisplay] = useState('solution')
+  const { pathname } = useLocation()
+
+  let extension = ''
+  if (pathname.match(/pascal/i)) extension = 'ligo'
+  if (pathname.match(/camel/i)) extension = 'mligo'
+  if (pathname.match(/reason/i)) extension = 'religo'
+
   return (
     <ChapterStyled>
       <ChapterCourse>
         <Content course={course || ''} />
       </ChapterCourse>
-      <ChapterGrid>
-        <ChapterMonaco>
-          {showDiff ? (
-            <MonacoDiff solution={solution} proposedSolution={proposedSolution} />
-          ) : (
-            <MonacoEditor proposedSolution={proposedSolution} proposedSolutionCallback={proposedSolutionCallback} />
-          )}
-        </ChapterMonaco>
+      <ChapterGrid hasTabs={Object.keys(supports).length > 0}>
+        {Object.keys(supports).length > 0 && (
+          <div>
+            <ChapterTab isSelected={display === 'solution'} onClick={() => setDisplay('solution')}>
+              Exercice
+            </ChapterTab>
+            {Object.keys(supports).map((key, index) => (
+              <ChapterTab isSelected={display === key} onClick={() => setDisplay(key)}>
+                {`${key}.${extension}`}
+              </ChapterTab>
+            ))}
+          </div>
+        )}
+        {display === 'solution' ? (
+          <ChapterMonaco>
+            {showDiff ? (
+              <MonacoDiff solution={solution} proposedSolution={proposedSolution} />
+            ) : (
+              <MonacoEditor proposedSolution={proposedSolution} proposedSolutionCallback={proposedSolutionCallback} />
+            )}
+          </ChapterMonaco>
+        ) : (
+          <ChapterMonaco>
+            <MonacoEditorSupport support={supports[display]} />
+          </ChapterMonaco>
+        )}
         <Validator validatorState={validatorState} validateCallback={validateCallback} />
       </ChapterGrid>
     </ChapterStyled>
@@ -194,6 +247,7 @@ ChapterView.propTypes = {
   showDiff: PropTypes.bool.isRequired,
   proposedSolutionCallback: PropTypes.func.isRequired,
   course: PropTypes.string,
+  supports: PropTypes.array.isRequired,
 }
 
 ChapterView.defaultProps = {

diff --git a/src/frontend/src/pages/ChapterAbout/ChapterAbout.style.tsx b/src/frontend/src/pages/ChapterAbout/ChapterAbout.style.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components/macro'
 export const ChapterStyled = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 20px;
+  grid-gap: 10px;
   height: calc(100vh - 130px);
   margin: 74px 20px 0;
 
@@ -14,15 +14,15 @@ export const ChapterStyled = styled.div`
   }
 `
 
-export const ChapterGrid = styled.div`
+export const ChapterGrid = styled.div<{ hasTabs?: boolean }>`
   display: grid;
-  grid-template-rows: 500px auto;
-  grid-gap: 20px;
+  grid-template-rows: ${(props) => (props.hasTabs ? 'auto 500px auto' : '500px auto')};
+  grid-gap: 0;
   overflow-y: scroll;
 
   @media (max-width: 900px) {
     overflow-y: initial;
-    grid-template-rows: auto auto;
+    grid-template-rows: ${(props) => (props.hasTabs ? 'auto auto auto' : 'auto auto')};
     margin-bottom: 20px;
   }
 `
@@ -62,6 +62,7 @@ export const ChapterH2 = styled.div`
 export const ChapterValidator = styled.div`
   border: 1px solid #0a5688;
   position: relative;
+  margin-top: 10px;
 
   &.ok {
     border-color: #12650a;
@@ -148,3 +149,16 @@ export const ChapterItalic = styled.em`
   text-transform: none;
   font-style: normal;
 `
+
+export const ChapterTab = styled.div<{ isSelected?: boolean }>`
+  height: 30px;
+  line-height: 20px;
+  margin-right: 10px;
+  padding: 5px 10px;
+  display: inline-block;
+  cursor: pointer;
+  border-top: 1px solid #0a5688;
+  border-right: 1px solid #0a5688;
+  border-left: 1px solid #0a5688;
+  background-color: ${(props) => (props.isSelected ? '#0a5688' : 'initial')};
+`
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterAddresses/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterAddresses/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterBuiltIns/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterBuiltIns/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterConditionals/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterConditionals/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterDeployContract/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterDeployContract/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterFA12/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterFA12/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterFA20/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterFA20/index.ts
@@ -1,17 +1,17 @@
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import course from "!raw-loader!./course.md";
+import caller from '!raw-loader!./caller.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import exercise from "!raw-loader!./exercise.mligo";
+import course from '!raw-loader!./course.md'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import solution from "!raw-loader!./solution.mligo";
+import exercise from '!raw-loader!./exercise.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support1 from "!raw-loader!./fungible_token.mligo";
+import fungible_token from '!raw-loader!./fungible_token.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support2 from "!raw-loader!./caller.mligo";
+import solution from '!raw-loader!./solution.mligo'
 
-export const data = { course, exercise, solution, support1, support2 };
+export const data = { course, exercise, solution, supports: {fungible_token, caller} }
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterFA20Hook/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterFA20Hook/index.ts
@@ -1,30 +1,34 @@
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import course from "!raw-loader!./course.md";
+import course from '!raw-loader!./course.md'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import exercise from "!raw-loader!./exercise.mligo";
+import exercise from '!raw-loader!./exercise.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import solution from "!raw-loader!./solution.mligo";
+import fa2_core from '!raw-loader!./fa2_core.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support1 from "!raw-loader!./tzip-12/lib/fa2_convertors.mligo";
+import solution from '!raw-loader!./solution.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support2 from "!raw-loader!./tzip-12/lib/fa2_operator_lib.mligo";
+import fa2_errors from '!raw-loader!./tzip-12/fa2_errors.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support3 from "!raw-loader!./tzip-12/lib/fa2_owner_hooks_lib.mligo";
+import fa2_interface from '!raw-loader!./tzip-12/fa2_interface.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support4 from "!raw-loader!./tzip-12/fa2_interface.mligo";
+import fa2_convertors from '!raw-loader!./tzip-12/lib/fa2_convertors.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support5 from "!raw-loader!./tzip-12/fa2_errors.mligo";
-
+import fa2_operator_lib from '!raw-loader!./tzip-12/lib/fa2_operator_lib.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support6 from "!raw-loader!./fa2_core.mligo";
+import fa2_owner_hooks_lib from '!raw-loader!./tzip-12/lib/fa2_owner_hooks_lib.mligo'
 
-export const data = { course, exercise, solution, support1, support2, support3, support4, support5, support6 };
+export const data = {
+  course,
+  exercise,
+  solution,
+  supports: {fa2_convertors, fa2_operator_lib, fa2_owner_hooks_lib, fa2_interface, fa2_errors, fa2_core},
+}
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterFA20Operator/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterFA20Operator/index.ts
@@ -1,27 +1,31 @@
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import course from "!raw-loader!./course.md";
+import course from '!raw-loader!./course.md'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import exercise from "!raw-loader!./exercise.cmd";
+import exercise from '!raw-loader!./exercise.cmd'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import solution from "!raw-loader!./solution.cmd";
+import solution from '!raw-loader!./solution.cmd'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support1 from "!raw-loader!./tzip-12/lib/fa2_convertors.mligo";
+import tqtz_nft from '!raw-loader!./tqtz_nft.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support2 from "!raw-loader!./tzip-12/lib/fa2_operator_lib.mligo";
+import fa2_errors from '!raw-loader!./tzip-12/fa2_errors.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support4 from "!raw-loader!./tzip-12/fa2_interface.mligo";
+import fa2_interface from '!raw-loader!./tzip-12/fa2_interface.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support5 from "!raw-loader!./tzip-12/fa2_errors.mligo";
-
+import fa2_convertors from '!raw-loader!./tzip-12/lib/fa2_convertors.mligo'
 /* eslint import/no-webpack-loader-syntax: off */
 // @ts-ignore
-import support6 from "!raw-loader!./tqtz_nft.mligo";
+import fa2_operator_lib from '!raw-loader!./tzip-12/lib/fa2_operator_lib.mligo'
 
-export const data = { course, exercise, solution, support1, support2, support4, support5, support6 };
+export const data = {
+  course,
+  exercise,
+  solution,
+  supports: {fa2_convertors, fa2_operator_lib, fa2_interface, fa2_errors, tqtz_nft},
+}
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterFunctions/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterFunctions/index.ts
@@ -8,4 +8,4 @@ import solution from "!raw-loader!./solution.ligo";
 // @ts-ignore
 import course from "!raw-loader!./course.md";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterInteractions/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterInteractions/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterInterop/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterInterop/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.mligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.mligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterLambda/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterLambda/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterLists/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterLists/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterLoops/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterLoops/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };
diff --git a/src/frontend/src/pages/Chapters/Camel/ChapterMainFunction/index.ts b/src/frontend/src/pages/Chapters/Camel/ChapterMainFunction/index.ts
@@ -8,4 +8,4 @@ import exercise from "!raw-loader!./exercise.ligo";
 // @ts-ignore
 import solution from "!raw-loader!./solution.ligo";
 
-export const data = { course, exercise, solution };
+export const data = { course, exercise, solution, supports: {} };