Make checkbox dialog

assets/js/regform.js

@@ -3,12 +3,16 @@ import axios from "axios";
 import {
     Button,
     Container,
+    Checkbox,
     CssBaseline,
     Dialog,
     DialogTitle,
     DialogContent,
     DialogActions,
     Grid,
+    FormControl,
+    FormControlLabel,
+    FormGroup,
     Paper,
     TextField,
     Typography,
@@ -17,7 +21,7 @@ import {makeStyles} from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
     fieldset: {
-        border: 'none',
+        //border: 'none',
         //borderBottom: '1px solid',
     },
     form: {
@@ -42,8 +46,8 @@ const RegForm = (props) => {
                 <Typography component={"h1"} variant={"h5"}>
                     Registrer ditt event
                 </Typography>
-                <form className={classes.form} noValidate>
-                    <fieldset className={classes.fieldset}>
+                <form className={classes.form}>
+                    <FormControl component={"fieldset"} className={classes.fieldset}>
                     <Grid container spacing={3}>
                         <Grid item xs={12}>
                             <TextField 
@@ -93,8 +97,8 @@ const RegForm = (props) => {
                             />
                         </Grid>
                     </Grid>
-                    </fieldset>
-                    <fieldset className={classes.fieldset}>
+                    </FormControl>
+                    <FormControl component={"fieldset"} className={classes.fieldset}>
                         <legend>Arrangement</legend>
                         <Grid container spacing={3}>
                             <Grid item xs={12} sm={8}>
@@ -126,7 +130,7 @@ const RegForm = (props) => {
                             <Grid item xs={12} sm={6}>
                             </Grid>
                         </Grid>
-                    </fieldset>
+                    </FormControl>
                 </form>
             </Paper>
         </Container>
@@ -161,9 +165,20 @@ const Categories = (props) => {
             dialogTitle={"Velg kategori(er)"}
         >
             {isLoading ? 
-                <p>Laster...</p>
+                <p>
+                    Laster...
+                </p>
                 :
-                <ul>{availableItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>
+                <FormGroup>
+                    {availableItems.map(item => <FormControlLabel 
+                        key={item.id}
+                        control={
+                            <Checkbox checked={false} value={item.id} />
+                        }
+                        label={item.name}
+                    />
+                    )}
+                </FormGroup>
             }
         </DialogCancelOk>
     )
@@ -201,9 +216,6 @@ const DialogCancelOk = (props) => {
                     {props.children}
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClickClose} color={"primary"}>
-                        Avbryt
-                    </Button>
                     <Button onClick={handleClickClose} color={"primary"}>
                         Ferdig
                     </Button>