Add basic solution creation process

Author: stpoa

client/src/App.tsx

@@ -150,11 +150,11 @@ class App extends Component<AppProps, {}> {
                     component={NotImplmented}
                   />
                   <Route exact path="/" component={Pages.Home} />
-                  <Route path="/task/:id" component={Pages.Task} />
                   <Route
                     path="/task/:id/add-solution"
                     component={Pages.AddSolution}
                   />
+                  <Route path="/task/:id" component={Pages.Task} />
                   <Route path="*" render={redirectToHome} />
                 </Switch>
               </div>

client/src/generic/Photos.tsx

@@ -19,6 +19,7 @@ const Photos: FunctionComponent<PhotosProps> = ({
   filesLength,
   fullWidth,
   onFilesUpdate,
+  photosPlaceholderText = 'Dodaj zdjęcia zadania',
 }) => {
   const [previewPhotoId, updatePreviewPhotoId] = useState('')
 
@@ -57,7 +58,7 @@ const Photos: FunctionComponent<PhotosProps> = ({
         >
           {fullWidth && (
             <p className={classes.browsePhotoParagraph}>
-              Dodaj zdjęcia zadania
+              {photosPlaceholderText}
             </p>
           )}
           <AddPhotoIcon className={classes.photoIcon} />
@@ -209,6 +210,7 @@ interface PhotosProps extends WithStyles<typeof styles> {
   filesLength: number
   fullWidth?: boolean
   onFilesUpdate: (files: ExtendedFile[]) => void
+  photosPlaceholderText?: string
 }
 
 export interface ExtendedFile extends File {

client/src/generic/Stepper/Step.tsx

@@ -19,6 +19,7 @@ const Step: FunctionComponent<StepProps> = props => {
     goToNextStep,
     submit,
     isValid,
+    submitButtonName,
   } = props
 
   if (isActive === false) return null
@@ -61,7 +62,7 @@ const Step: FunctionComponent<StepProps> = props => {
               onClick={submit}
               disabled={!isValid}
             >
-              Utwórz
+              {submitButtonName}
             </Button>
           )}
         </div>
@@ -119,6 +120,7 @@ interface StepProps extends WithStyles<typeof styles> {
   goToPreviousStep?: () => void
   goToNextStep?: () => void
   submit?: () => void
+  submitButtonName?: string
 }
 
 export interface StepItem {

client/src/generic/Stepper/StepList.tsx

@@ -8,6 +8,7 @@ const StepList: FC<StepListProps> = ({
   onSubmitClick,
   classes,
   children,
+  submitButtonName,
 }) => {
   const goToPreviousStep = () => {
     updateStep(step - 1)
@@ -31,6 +32,7 @@ const StepList: FC<StepListProps> = ({
       goToPreviousStep,
       goToNextStep,
       submit: onSubmitClick,
+      submitButtonName,
     })
   })
 
@@ -94,6 +96,7 @@ interface StepListProps extends WithStyles<typeof styles> {
   onSubmitClick: () => void
   updateStep: (step: number) => void
   step: number
+  submitButtonName: string
 }
 
 export default withStyles(styles)(StepList)

client/src/generic/Stepper/index.ts

@@ -0,0 +1,4 @@
+import Step from './Step'
+import StepList from './StepList'
+
+export { Step, StepList }

client/src/generic/Task/components/TaskForGuest.tsx

@@ -5,16 +5,20 @@ import {
 } from '@material-ui/icons'
 import { WithStyles } from '@material-ui/styles'
 import React, { useState } from 'react'
+import { RouteComponentProps, withRouter } from 'react-router'
 import Button from '~generic/Buttons/Button'
 import ButtonContainer from '~generic/Buttons/ButtonsContainer'
 import InfoDialog from '~generic/InfoDialog'
 import { Task as TaskData } from '~interfaces'
 import { getTaskStatus, TaskStatus } from '../utils'
 import TaskBase from './TaskBase'
 
-const Task = ({ task, classes }: TaskProps) => {
+const Task = ({ task, classes, history }: TaskProps) => {
   const [isModalOpened, setModalOpened] = useState(false)
-  const handleModalClose = () => setModalOpened(false)
+  const handleModalClose = () => {
+    history.push('/task/' + task.id + '/add-solution')
+    setModalOpened(false)
+  }
   const handleOpenClick = () => setModalOpened(true)
 
   const title = 'Dodaj rozwiązania!'
@@ -63,8 +67,8 @@ const styles: StyleRulesCallback = _ => ({
   },
 })
 
-interface TaskProps extends WithStyles<typeof styles> {
+interface TaskProps extends WithStyles<typeof styles>, RouteComponentProps<{}> {
   task: TaskData
 }
 
-export default withStyles(styles)(Task)
+export default withStyles(styles)(withRouter(Task))

client/src/pages/AddSolution/components/SolutionDescriptionEdit.tsx

@@ -0,0 +1,62 @@
+import {
+  CardContent,
+  StyleRulesCallback,
+  TextField,
+  Typography,
+  WithStyles,
+  withStyles,
+} from '@material-ui/core'
+import React, { FunctionComponent } from 'react'
+import LineSeparator from '~generic/LineSeparator'
+
+const SolutionDescriptionEdit: FunctionComponent<TaskDescriptionEditProps> = ({
+  classes,
+  description,
+  onDescriptionUpdate,
+}) => {
+  return (
+    <CardContent className={classes.cardContent}>
+      <Typography variant="h3" component="h3">
+        Opis
+        <LineSeparator />
+      </Typography>
+
+      <form className={classes.form} noValidate autoComplete="off">
+        <TextField
+          fullWidth
+          id="multiline-static"
+          margin="normal"
+          label="Wskazówki do treści rozwiązania"
+          multiline
+          value={description}
+          onChange={onDescriptionUpdate}
+        />
+      </form>
+    </CardContent>
+  )
+}
+
+const styles: StyleRulesCallback = theme => ({
+  title: {
+    textAlign: 'center',
+    color: theme.palette.secondary.main,
+  },
+  cardContent: {
+    height: '100%',
+    display: 'grid',
+    gridTemplateRows: 'max-content minmax(200px, 50vh)',
+  },
+  form: {
+    padding: '2rem',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    overflowScrolling: 'touch',
+  },
+})
+
+interface TaskDescriptionEditProps extends WithStyles<typeof styles> {
+  description: string
+  onDescriptionUpdate: (e: any) => void
+}
+
+export default withStyles(styles)(SolutionDescriptionEdit)

client/src/pages/AddSolution/components/SolutionPhotoEdit.tsx

@@ -0,0 +1,138 @@
+import {
+  CardContent,
+  StyleRulesCallback,
+  Theme,
+  Typography,
+  WithStyles,
+  withStyles,
+} from '@material-ui/core'
+import React, { FunctionComponent } from 'react'
+import Photos from '~generic/Photos'
+import { OnClick } from '~typings/react'
+
+const TaskPhotoEdit: FunctionComponent<TaskPhotoEditProps> = ({
+  classes,
+  files,
+  onFilesUpdate,
+}) => {
+  return (
+    <CardContent className={classes.cardContent}>
+      <Typography variant="h3" component="h3">
+        Zdjęcia
+        <hr className={classes.underline} />
+      </Typography>
+      <div
+        className={
+          !files.length ? classes.contentWithAddPhotoLater : classes.content
+        }
+      >
+        <div className={classes.photosWrapper}>
+          <Photos
+            photosPlaceholderText="Dodaj zdjęcie rozwiązania"
+            filesLength={1}
+            fullWidth
+            {...{ files, onFilesUpdate }}
+          />
+        </div>
+      </div>
+    </CardContent>
+  )
+}
+
+const styles: StyleRulesCallback = (theme: Theme) => ({
+  cardContent: {
+    height: '100%',
+    paddingBottom: '0 !important',
+    display: 'grid',
+    gridTemplateRows: 'max-content',
+  },
+  contentWithAddPhotoLater: {
+    height: '100%',
+    display: 'grid',
+    gridTemplateRows: '6fr 5fr',
+  },
+  content: {
+    display: 'grid',
+    gridTemplateRows: '1fr',
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: '8px',
+    color: theme.palette.secondary.main,
+    backgroundColor: 'white',
+    borderRadius: '100%',
+    zIndex: 1,
+    marginTop: '-9px',
+    cursor: 'pointer',
+  },
+  paper: {
+    maxHeight: '100%',
+    margin: '0.5rem 0 0.5rem',
+    cursor: 'pointer',
+  },
+  photosWrapper: {
+    display: 'grid',
+    gridGap: '1rem',
+    marginTop: '2rem',
+  },
+  photoPaper: {
+    display: 'grid',
+    gridTemplateColumns: '2fr 1fr',
+    margin: '0.5rem 0 0.5rem',
+  },
+  photoIcon: {
+    fontSize: '6rem',
+  },
+  photoNameContainer: {
+    display: 'flex',
+    margin: '0 5px 0 5px',
+    alignItems: 'center',
+  },
+  photoName: {
+    width: '100%',
+    wordBreak: 'break-all',
+  },
+  browsePhotoContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    cursor: 'pointer',
+  },
+  browsePhotoTitle: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  browsePhotoParagraph: {
+    margin: '0 0 2rem',
+  },
+  fileInput: {
+    display: 'none',
+  },
+  filePicture: {
+    backgroundColor: 'black',
+    borderRadius: '5px',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+  },
+  underline: {
+    height: '1px',
+    border: 'none',
+    backgroundColor: theme.palette.grey[300],
+  },
+})
+
+interface TaskPhotoEditProps extends WithStyles<typeof styles> {
+  files: ExtendedFile[]
+  onFilesUpdate: (files: ExtendedFile[]) => void
+  onFilesLater: OnClick
+}
+
+export interface ExtendedFile extends File {
+  id: string
+  url: string
+}
+
+export default withStyles(styles)(TaskPhotoEdit)