Can create and save new event

.env

@@ -1 +1,2 @@
-REACT_APP_KEYCLOAK_URL=http://localhost:9090
+REACT_APP_KEYCLOAK_URL=http://localhost:9090
+REACT_APP_SERVER_URL=http://localhost:8080

cypress/e2e/create-new-event.cy.ts

@@ -0,0 +1,38 @@
+const KEYCLOAK_ORIGIN =
+  (Cypress.env('KEYCLOAK_URL') as string) || 'http://localhost:9090'
+
+describe('Create new event', () => {
+  before(() => {
+    cy.visit('/')
+
+    cy.get('[data-cypress="login"]').should('not.be.disabled')
+    cy.get('[data-cypress="login"]').click()
+    cy.origin(KEYCLOAK_ORIGIN, () => {
+      cy.get('#username').type('test_user')
+      cy.get('#password').type('test_user')
+      cy.get('#kc-login').click()
+    })
+  })
+
+  it('can create and save new event', () => {
+    cy.get('[data-cypress="create-new-event"]').click()
+
+    cy.get('[data-cypress="event-form-basic-accordion"]').click()
+    cy.get('[data-cypress="event-name"]').type('test name')
+    cy.get('[data-cypress="event-place"]').type('test-place')
+    cy.get('[data-cypress="event-description"]').type('test-description')
+    cy.get('[data-cypress="event-price"]').type('69')
+    cy.get('.event-startDate').click()
+    cy.get('.react-datepicker__day--today').click()
+    cy.get('[data-cypress="event-save-basic-button"]').click()
+    cy.get('[data-cypress="event-form-basic-accordion"]').click()
+
+    cy.get('[data-cypress="event-form-form-accordion"]').click()
+    cy.get('li[draggable="true"]').eq(0).click()
+    cy.get('[data-cypress="event-save-form-button"]').click()
+    cy.get('[data-cypress="event-form-form-accordion"]').click()
+
+    cy.get('[data-cypress="create-event-button"]').click()
+    cy.get('[data-cypress="event-success-message"]')
+  })
+})

src/auth/client.ts

@@ -1,5 +1,7 @@
 import axios from 'axios'
 
-const axiosInstance = axios.create({ baseURL: 'http://localhost:8080/api' })
+const SERVER_URL = process.env.REACT_APP_SERVER_URL || 'http://localhost:8080'
+
+const axiosInstance = axios.create({ baseURL: `${SERVER_URL}/api` })
 
 export { axiosInstance }

src/components/BasicInformationForm.tsx

@@ -5,8 +5,9 @@ import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import { QuotaModal } from './QuotaModal'
 import { EventBasicInformation } from '../types/types'
+import { axiosInstance } from '../auth/client'
 import '../assets/styles.css'
-
+import { convertLocalDateToUTCISOString } from './Utilities'
 export const BasicInformationForm = ({
   onSubmit,
 }: {
@@ -24,7 +25,7 @@ export const BasicInformationForm = ({
   const [endDate, setEndDate] = useState<Date>()
   const [signupStarts, setSignupStarts] = useState<Date>()
   const [signupEnds, setSignupEnds] = useState<Date>()
-  const [image, setImage] = useState<File | null>(null)
+  const [image, setImage] = useState<string | null>(null)
   const [maxParticipants, setMaxParticipants] = useState('')
   const [hasParticipantLimit, setHasParticipantLimit] = useState(false)
   const [hasQuotas, setHasQuotas] = useState(false)
@@ -41,11 +42,11 @@ export const BasicInformationForm = ({
         place,
         description,
         price: Number(price) || undefined,
-        startDate: parseDate(startDate) || '',
-        endDate: parseDate(endDate),
-        signupStarts: parseDate(signupStarts),
-        signupEnds: parseDate(signupEnds),
-        bannerImg: image?.name || undefined,
+        startDate: startDate?.toISOString() || '',
+        endDate: endDate?.toISOString() || '',
+        signupStarts: signupStarts?.toISOString() || '',
+        signupEnds: signupEnds?.toISOString() || '',
+        bannerImg: image || undefined,
         minParticipants: 0,
         maxParticipants: Number(maxParticipants) || undefined,
       })
@@ -62,6 +63,7 @@ export const BasicInformationForm = ({
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
+          data-cypress="event-name"
         />
       </Form.Group>
 
@@ -72,6 +74,7 @@ export const BasicInformationForm = ({
           type="text"
           value={place}
           onChange={(e) => setPlace(e.target.value)}
+          data-cypress="event-place"
         />
       </Form.Group>
       <Form.Group className="mb-3">
@@ -82,6 +85,7 @@ export const BasicInformationForm = ({
           type="text"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
+          data-cypress="event-description"
         />
       </Form.Group>
       <Form.Group className="mb-3">
@@ -94,6 +98,7 @@ export const BasicInformationForm = ({
             console.log(e)
             setPrice(e.target.value)
           }}
+          data-cypress="event-price"
         />
       </Form.Group>
       <Form.Group className="mb-3">
@@ -112,6 +117,7 @@ export const BasicInformationForm = ({
               showTimeSelect
               timeFormat="HH:mm"
               dateFormat="dd.M.yyyy HH:mm"
+              className="event-startDate"
             />
           </Col>
           <Col md={6}>
@@ -170,7 +176,20 @@ export const BasicInformationForm = ({
         <Form.Control
           type="file"
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            if (e.target.files) setImage(e.target.files[0])
+            if (e.target.files) {
+              const image = e.target.files[0]
+
+              axiosInstance<{ fileName: string }>({
+                // could get from generated types if not Map type
+                method: 'post',
+                url: '/event/banner/add',
+                data: image,
+                headers: { 'Content-Type': image.type },
+              })
+                .then((res) => res.data)
+                .then(({ fileName }) => setImage(fileName))
+                .catch((error) => console.log('error', error))
+            }
           }}
         />
       </Form.Group>
@@ -235,14 +254,13 @@ export const BasicInformationForm = ({
         </Row>
       </Form.Group>
 
-      <Button variant="primary" type="submit" style={{ marginRight: '10px' }}>
-        Jatka
-      </Button>
-      <Button variant="secondary" onClick={(e) => e}>
-        Tyhjennä
+      <Button
+        variant="primary"
+        type="submit"
+        data-cypress="event-save-basic-button"
+      >
+        Tallenna
       </Button>
     </Form>
   )
 }
-
-const parseDate = (date?: Date) => date?.toDateString() || undefined

src/components/FormBuilder.tsx

@@ -27,6 +27,7 @@ const FormBuilder = ({
             }
           }}
           disabled={data === null}
+          data-cypress="event-save-form-button"
         >
           Tallenna
         </Button>

src/components/HeaderComponent.tsx

@@ -38,8 +38,12 @@ const HeaderComponent = ({
         {loggedIn && (
           <Navbar.Collapse className="justify-content-center">
             <Nav>
-              <Link href="/management" label={t('header.ownEvents')} />
-              <Link href="/newEvent" label={t('header.newEvent')} />
+              <Nav.Item>
+                <Link href="/management" label={t('header.ownEvents')} />
+              </Nav.Item>
+              <Nav.Item data-cypress="create-new-event">
+                <Link href="/newEvent" label={t('header.newEvent')} />
+              </Nav.Item>
             </Nav>
           </Navbar.Collapse>
         )}

src/components/NewEvent.tsx

@@ -2,22 +2,48 @@ import React, { useState } from 'react'
 import { BasicInformationForm } from './BasicInformationForm'
 import { EventBasicInformation } from '../types/types'
 import { FormBuilder } from './FormBuilder'
-import { Accordion, Button } from 'react-bootstrap'
+import { Accordion, Button, Alert } from 'react-bootstrap'
 import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { FormBuilderPostData } from 'react-form-builder2'
+import { axiosInstance } from '../auth/client'
 
 const NewEvent = () => {
+  const [success, setSuccess] = useState('')
+  const [error, setError] = useState('')
+
   const [eventBasicInformation, setEventBasicInformation] =
     useState<EventBasicInformation | null>(null)
-
   const [formData, setFormData] = useState<FormBuilderPostData | null>(null)
 
+  const sendToServer = () => {
+    axiosInstance({
+      method: 'post',
+      url: '/event/create',
+      data: { ...eventBasicInformation, form: { formData } },
+    })
+      .then(() => {
+        setSuccess('Tapahtuman luonti onnistui')
+        setTimeout(() => setSuccess(''), 3000)
+      })
+      .catch((e) => {
+        console.error(e)
+        setError('Tapahtuman luonti epäonnistui')
+        setTimeout(() => setError(''), 3000)
+      })
+  }
+
   return (
     <>
+      {success && (
+        <Alert variant="success" data-cypress="event-success-message">
+          {success}
+        </Alert>
+      )}
+      {error && <Alert variant="error">{error}</Alert>}
       <Accordion>
         <Accordion.Item eventKey="basic">
-          <Accordion.Header>
+          <Accordion.Header data-cypress="event-form-basic-accordion">
             Perustiedot
             {eventBasicInformation !== null && (
               <FontAwesomeIcon
@@ -37,7 +63,7 @@ const NewEvent = () => {
           </Accordion.Body>
         </Accordion.Item>
         <Accordion.Item eventKey="form">
-          <Accordion.Header>
+          <Accordion.Header data-cypress="event-form-form-accordion">
             Rekisteröitymislomake
             {formData !== null && (
               <FontAwesomeIcon
@@ -56,21 +82,13 @@ const NewEvent = () => {
         style={{ marginTop: '10px' }}
         variant="primary"
         disabled={eventBasicInformation === null || formData === null}
+        onClick={sendToServer}
+        data-cypress="create-event-button"
       >
         Luo tapahtuma
       </Button>
     </>
   )
-
-  /*return status === 'basic' ? (
-    <BasicInformationForm
-      onSubmit={(e) => {
-        setEventBasicInformation(e)
-      }}
-    />
-  ) : status === 'form' ? (
-    <FormBuilder />
-  ) : null*/
 }
 
 export { NewEvent }