init submit section

src/api/challengeSubmissionPost.js

@@ -0,0 +1,29 @@
+import KeyCloakService from '../services/KeyCloakService';
+import {API} from '../utils/globals';
+
+async function postData(url = '', data = {}) {
+    const response = await fetch(url, {
+        method: 'POST',
+        mode: 'no-cors',
+        cache: 'no-cache',
+        credentials: 'same-origin',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${KeyCloakService.getToken()}`
+        },
+        redirect: 'follow',
+        referrerPolicy: 'no-referrer',
+        body: JSON.stringify(data)
+    });
+    return response.json();
+}
+
+const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
+    postData(`${API}/challenge-submission/${challengeName}`,
+        {f1: description, f3: repoUrl, f4: repoBranch})
+        .then((data) => {
+            console.log(data);
+        });
+};
+
+export default challengeSubmission;

src/components/elements/SubmitInput.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {FlexColumn} from '../../utils/containers';
+import {Medium} from '../../utils/fonts';
+import theme from '../../utils/theme';
+
+const SubmitInput = (props) => {
+    return (
+        <FlexColumn gap='8px' width='100%' alignmentX='flex-start'>
+            <Medium as='label' htmlFor={props.label}>
+                {props.label}
+            </Medium>
+            <FlexColumn as='input' id={props.label} name={props.label} borderRadius='4px' width='100%'
+                        height='36px' border={`1px solid ${theme.colors.dark}`} shadow={theme.shadow}
+                        onChange={(e) => props.handler(e)} padding='4px'/>
+        </FlexColumn>
+    );
+};
+
+export default SubmitInput;

src/components/sections/Submit.js

@@ -1,13 +1,48 @@
 import React from 'react';
 import {FlexColumn} from '../../utils/containers';
-import {H2} from '../../utils/fonts';
+import {H2, Menu} from '../../utils/fonts';
+import SubmitInput from '../elements/SubmitInput';
+import Button from '../elements/Button';
+import theme from '../../utils/theme';
+import challengeSubmission from '../../api/challengeSubmissionPost';
+
+const Submit = (props) => {
+    const [description, setDescription] = React.useState('');
+    const [repoUrl, setRepoUrl] = React.useState('');
+    const [repoBranch, setRepoBranch] = React.useState('');
+
+    const descriptionHandler = (e) => {
+        setDescription(e.target.value);
+    };
+
+    const repoUrlHandler = (e) => {
+        setRepoUrl(e.target.value);
+    };
+
+    const repoBranchHandler = (e) => {
+        setRepoBranch(e.target.value);
+    };
+
+    const challengeSubmissionSubmit = () => {
+        challengeSubmission(props.challengeName, repoUrl, repoBranch, description);
+    };
 
-const Submit = () => {
     return (
-        <FlexColumn padding='24px' as='section'>
-            <H2 as='h2'>
-                Submit
+        <FlexColumn margin='40px 0 0 0' padding='24px' as='section' gap='64px' maxWidth='624px' width='100%'
+                    alignmentX='flex-start'>
+            <H2 as='h2' width='100%' textAlign='center'>
+                Submit a solution to the challenge
             </H2>
+            <FlexColumn width='100%' gap='32px'>
+                <SubmitInput label='Submission description' handler={descriptionHandler}/>
+                <SubmitInput label='Submission repo URL' handler={repoUrlHandler}/>
+                <SubmitInput label='Submission repo branch' handler={repoBranchHandler}/>
+            </FlexColumn>
+            <Button width='122px' height='44px' handler={challengeSubmissionSubmit}>
+                <Menu color={theme.colors.white}>
+                    Submit
+                </Menu>
+            </Button>
         </FlexColumn>
     );
 };