diff --git a/public/favicon.ico b/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..9de53fc215d7c5f6237dc683a227df9bef053ced 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx index aebd7a3a7be7fdaa150e2c46a7452831350c4013..0cce0223d61f50d48434be1c05685fa190a51b76 100644 --- a/src/components/DateSelector/DateSelector.tsx +++ b/src/components/DateSelector/DateSelector.tsx @@ -6,21 +6,23 @@ import rightChevron from '../../assets/icons/right-chevron.svg' interface DateSelectorProps { date: Date setDate: React.Dispatch<React.SetStateAction<Date>> + isEmpty: () => boolean } const DateSelector: React.FC<DateSelectorProps> = ({ date, setDate, + isEmpty, }: DateSelectorProps) => { const handleNextMonth = () => { const incremented: Date = new Date(date.setMonth(date.getMonth() + 1)) console.log('incremented', incremented) - setDate(incremented) + if (isEmpty()) setDate(incremented) } const handlePrevMonth = () => { const decremented: Date = new Date(date.setMonth(date.getMonth() - 1)) - setDate(decremented) + if (isEmpty()) setDate(decremented) } return ( <div className="date-selector"> @@ -31,9 +33,7 @@ const DateSelector: React.FC<DateSelectorProps> = ({ className="arrow" /> <div className="text"> - <span> - {date.toLocaleString('default', { month: 'long', year: 'numeric' })} - </span> + {date.toLocaleString('default', { month: 'long', year: 'numeric' })} </div> <img src={rightChevron} diff --git a/src/components/DateSelector/dateSelector.scss b/src/components/DateSelector/dateSelector.scss index 81c753132870aefb1acb3ab3eae450e5f935b6d5..bbc98d03da5daa9e6a1d146d2297d34945cae33e 100644 --- a/src/components/DateSelector/dateSelector.scss +++ b/src/components/DateSelector/dateSelector.scss @@ -8,12 +8,13 @@ margin: auto; max-width: 250px; .text { - span { - @include text-large(); - color: white; - font-weight: 600; - margin: 0 0.4rem; - } + @include text-large(); + color: white; + font-weight: 600; + margin: 0 0.4rem; + min-width: 150px; + text-align: center; + margin: auto; } .arrow { cursor: pointer; diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx index 17ed3747df5a06226e946b0f4dfbde5847155ce8..901ddd6a5c75fd88415123a4f3766c32b0082bba 100644 --- a/src/components/Editing/Editing.tsx +++ b/src/components/Editing/Editing.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useCallback, useState } from 'react' import 'react-datepicker/dist/react-datepicker.css' import { Editor } from '@tinymce/tinymce-react' import DateSelector from '../DateSelector/DateSelector' @@ -14,6 +14,15 @@ const Editing: React.FC = () => { const editorService = new EditorService() await editorService.sendQuotation(date, header, quote) } + const handleCancel = useCallback(() => { + setQuote('') + setHeader('') + }, []) + const isEmpty = (): boolean => { + if (quote !== '' || header !== '') { + return false + } else return true + } return ( <> @@ -23,7 +32,7 @@ const Editing: React.FC = () => { </p> </div> <div className="content"> - <DateSelector date={date} setDate={setDate} /> + <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} /> <div className="subtitle"> <p className="title">Informations du mois</p> </div> @@ -49,9 +58,12 @@ const Editing: React.FC = () => { toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | code', }} + value={quote} onEditorChange={(newQuote, editor) => setQuote(newQuote)} /> - <button className="btnCancel">Annuler</button> + <button className="btnCancel" onClick={handleCancel}> + Annuler + </button> <button className="btnValid" onClick={handleSave}> Sauvegarder </button> diff --git a/src/services/editor.service.ts b/src/services/editor.service.ts index 245c8e04c33f7a99cf88ab8b16f8f98bf58c72a5..7ea868809757207adb6c62221a3ac462bf2cbd46 100644 --- a/src/services/editor.service.ts +++ b/src/services/editor.service.ts @@ -1,6 +1,6 @@ export class EditorService { /** - * Createsa quotation and header for selected month + * Creates a quotation and header for selected month * @param date * @param header * @param quote @@ -33,4 +33,26 @@ export class EditorService { console.log(e) } } + + /** + * Gets a quotation and header for selected month + */ + public getQuotation = async (): Promise<any> => { + try { + const response = await fetch( + 'https://localhost:1443/api/admin/monthlyNews', + { + method: 'GET', + } + ) + if (response.status !== 201) { + throw new Error( + `Erreur lors de la récupération (code ${response.status})` + ) + } + return response.json() + } catch (e) { + console.log(e) + } + } }