diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 8c43e358d59b58ef25c0fb28c10aa2a86e7e352b..116fb8471a2db8d1f4d3a50929f8bacbf8ae01bb 100644
--- a/src/components/Editing/Editing.tsx
+++ b/src/components/Editing/Editing.tsx
@@ -1,21 +1,22 @@
import React, { useCallback, useContext, useEffect, useState } from 'react'
-import { Editor } from '@tinymce/tinymce-react'
-
import DateSelector from '../DateSelector/DateSelector'
import './editing.scss'
import { MonthlyNewsService } from '../../services/monthlyNews.service'
import { UserContext, UserContextProps } from '../../hooks/userContext'
-import { MonthlyNews } from '../../models/monthlyNews.model'
+import { IMonthlyNews } from '../../models/monthlyNews.model'
import Poll from '../Poll/Poll'
+import MonthlyNews from '../MonthlyNews/MonthlyNews'
const Editing: React.FC = () => {
const [date, setDate] = useState<Date>(new Date())
const [header, setHeader] = useState<string>('')
const [quote, setQuote] = useState<string>('')
+ const [question, setQuestion] = useState<string>('')
+ const [link, setLink] = useState<string>('')
const [isTouched, setIsTouched] = useState<boolean>(false)
const { user }: Partial<UserContextProps> = useContext(UserContext)
- const handleSave = async (): Promise<void> => {
+ const handleSaveMonthlyNews = async (): Promise<void> => {
if (user) {
const monthlyNewsService = new MonthlyNewsService()
await monthlyNewsService.createMonthlyReport(
@@ -24,9 +25,10 @@ const Editing: React.FC = () => {
quote,
user.xsrftoken
)
+ console.log('saved')
}
}
- const handleCancel = useCallback(() => {
+ const handleCancelMonthlyNews = useCallback(() => {
setQuote('')
setHeader('')
}, [])
@@ -39,22 +41,36 @@ const Editing: React.FC = () => {
const handleEditorChange = (
value: string,
- type: 'header' | 'quote'
+ type: 'header' | 'quote' | 'question' | 'link'
): void => {
setIsTouched(true)
if (type === 'header') {
setHeader(value)
- } else {
+ }
+ if (type === 'quote') {
setQuote(value)
}
+ if (type === 'question') {
+ setQuestion(value)
+ }
+ if (type === 'link') {
+ setLink(value)
+ }
}
+ const resetFields = useCallback(() => {
+ setQuote('')
+ setHeader('')
+ setLink('')
+ setQuestion('')
+ }, [])
useEffect(() => {
let subscribed = true
+ resetFields()
async function getCurrentMonthlyNews() {
if (user) {
const monthlyNewsService = new MonthlyNewsService()
- const news: MonthlyNews =
+ const news: IMonthlyNews =
await monthlyNewsService.getSingleMonthlyReport(
date.getFullYear(),
date.getMonth(),
@@ -84,101 +100,20 @@ const Editing: React.FC = () => {
</div>
<div className="content">
<DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
- <div className="subtitle">
- <p className="title">Informations du mois</p>
- </div>
- <div>
- <Editor
- initialValue={header}
- init={{
- menubar: false,
- toolbar:
- 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
- }}
- value={header}
- onEditorChange={(newHeader, editor) =>
- handleEditorChange(newHeader, 'header')
- }
- />
- <div className="subtitle">
- <p className="title">Citation du mois</p>
- </div>
+ <MonthlyNews
+ header={header}
+ quote={quote}
+ onSave={handleSaveMonthlyNews}
+ onCancel={handleCancelMonthlyNews}
+ handleChange={handleEditorChange}
+ />
- <Editor
- initialValue={quote}
- init={{
- menubar: false,
- toolbar:
- 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
- setup: function (editor) {
- editor.ui.registry.addMenuButton('ecolyoLink', {
- text: 'Lien Ecolyo',
- fetch: function (callback) {
- var items: any = [
- {
- type: 'menuitem',
- text: 'consumption',
- onAction: function () {
- editor.insertContent(
- ' <a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
- )
- },
- },
- {
- type: 'menuitem',
- text: 'challenges',
- onAction: function () {
- editor.insertContent(
- ' <a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
- )
- },
- },
- {
- type: 'menuitem',
- text: 'ecogestures',
- onAction: function () {
- editor.insertContent(
- ' <a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
- )
- },
- },
- {
- type: 'menuitem',
- text: 'analysis',
- onAction: function () {
- editor.insertContent(
- ' <a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
- )
- },
- },
- {
- type: 'menuitem',
- text: 'options',
- onAction: function () {
- editor.insertContent(
- ' <a href="https://ecolyo.{cozyUrl}/options">Page options</a>'
- )
- },
- },
- ]
- callback(items)
- },
- })
- },
- }}
- value={quote}
- onEditorChange={(newQuote, editor) =>
- handleEditorChange(newQuote, 'quote')
- }
- />
- <button className="btnCancel" onClick={handleCancel}>
- Annuler
- </button>
- <button className="btnValid" onClick={handleSave}>
- Sauvegarder
- </button>
- </div>
- <Poll />
+ <hr />
+ <Poll
+ question={question}
+ link={link}
+ handleChange={handleEditorChange}
+ />
</div>
</>
)
diff --git a/src/components/Editing/editing.scss b/src/components/Editing/editing.scss
index 1343a1b050d5361ffb00488a6641c59feaf148b7..9d1a17d1708ae9d7f060bde29e46c8ef025a76d4 100644
--- a/src/components/Editing/editing.scss
+++ b/src/components/Editing/editing.scss
@@ -16,3 +16,6 @@
.subtitle {
margin: 1rem 0;
}
+hr {
+ margin: 2rem 1rem;
+}
diff --git a/src/components/MonthlyNews/MonthlyNews.tsx b/src/components/MonthlyNews/MonthlyNews.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..26d5a3012faf92bb7fd9d0bca73a4c2dc1fd1f7c
--- /dev/null
+++ b/src/components/MonthlyNews/MonthlyNews.tsx
@@ -0,0 +1,115 @@
+import { Editor } from '@tinymce/tinymce-react'
+import React from 'react'
+
+interface MonthlyNewsProps {
+ onSave: () => void
+ onCancel: () => void
+ header: string
+ quote: string
+ handleChange: (
+ value: string,
+ type: 'header' | 'quote' | 'question' | 'link'
+ ) => void
+}
+const MonthlyNews: React.FC<MonthlyNewsProps> = ({
+ onSave,
+ onCancel,
+ header,
+ quote,
+ handleChange,
+}: MonthlyNewsProps) => {
+ return (
+ <>
+ <div className="subtitle">
+ <p className="title">Informations du mois</p>
+ </div>
+ <div>
+ <Editor
+ init={{
+ menubar: false,
+ toolbar:
+ 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
+ }}
+ value={header}
+ onEditorChange={(newHeader) => handleChange(newHeader, 'header')}
+ />
+ <div className="subtitle">
+ <p className="title">Citation du mois</p>
+ </div>
+
+ <Editor
+ init={{
+ menubar: false,
+ toolbar:
+ 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
+ setup: function (editor) {
+ editor.ui.registry.addMenuButton('ecolyoLink', {
+ text: 'Lien Ecolyo',
+ fetch: function (callback) {
+ var items: any = [
+ {
+ type: 'menuitem',
+ text: 'consumption',
+ onAction: function () {
+ editor.insertContent(
+ ' <a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
+ )
+ },
+ },
+ {
+ type: 'menuitem',
+ text: 'challenges',
+ onAction: function () {
+ editor.insertContent(
+ ' <a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
+ )
+ },
+ },
+ {
+ type: 'menuitem',
+ text: 'ecogestures',
+ onAction: function () {
+ editor.insertContent(
+ ' <a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
+ )
+ },
+ },
+ {
+ type: 'menuitem',
+ text: 'analysis',
+ onAction: function () {
+ editor.insertContent(
+ ' <a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
+ )
+ },
+ },
+ {
+ type: 'menuitem',
+ text: 'options',
+ onAction: function () {
+ editor.insertContent(
+ ' <a href="https://ecolyo.{cozyUrl}/options">Page options</a>'
+ )
+ },
+ },
+ ]
+ callback(items)
+ },
+ })
+ },
+ }}
+ value={quote}
+ onEditorChange={(newQuote) => handleChange(newQuote, 'quote')}
+ />
+ <button className="btnCancel" onClick={onCancel}>
+ Annuler
+ </button>
+ <button className="btnValid" onClick={onSave}>
+ Sauvegarder
+ </button>
+ </div>
+ </>
+ )
+}
+
+export default MonthlyNews
diff --git a/src/components/Poll/Poll.tsx b/src/components/Poll/Poll.tsx
index c52e01130bc544471e3c23283fd9959b611dd049..afe251d5f72c4f32bf4f0856b20b141a183a83d2 100644
--- a/src/components/Poll/Poll.tsx
+++ b/src/components/Poll/Poll.tsx
@@ -1,17 +1,46 @@
-import React, { ChangeEvent, useState } from 'react'
-const Poll: React.FC = () => {
- const [poll, setPoll] = useState<string>('')
- const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
- setPoll(e.target.value)
+import { Editor } from '@tinymce/tinymce-react'
+import React, { ChangeEvent } from 'react'
+import './poll.scss'
+
+interface PollProps {
+ question: string
+ link: string
+ handleChange: (
+ value: string,
+ type: 'header' | 'quote' | 'question' | 'link'
+ ) => void
+}
+const Poll: React.FC<PollProps> = ({
+ question,
+ link,
+ handleChange,
+}: PollProps) => {
+ const handleChangeLink = (e: ChangeEvent<HTMLInputElement>) => {
+ handleChange(e.target.value, 'link')
}
+
return (
<div className="poll">
- <h2>Sélectionner un formulaire</h2>
+ <h2>Ajouter un sondage</h2>
+ <p className="title">Question</p>
+
+ <Editor
+ init={{
+ menubar: false,
+ toolbar:
+ 'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
+ }}
+ value={question}
+ onEditorChange={(newQuestion, editor) =>
+ handleChange(newQuestion, 'question')
+ }
+ />
+ <p className="title">Lien</p>
<input
type="text"
className="input-dark"
- value={poll}
- onChange={handleChange}
+ value={link}
+ onChange={handleChangeLink}
/>
</div>
)
diff --git a/src/components/Poll/poll.scss b/src/components/Poll/poll.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8c606f9ce7b29b0330dbb05e8e4ae1ab99063a2c
--- /dev/null
+++ b/src/components/Poll/poll.scss
@@ -0,0 +1,10 @@
+.poll {
+ margin: 2rem 0;
+ .title {
+ margin: 1rem 0;
+ }
+ input {
+ min-width: 300px;
+ margin-left: 0;
+ }
+}
diff --git a/src/models/monthlyNews.model.ts b/src/models/monthlyNews.model.ts
index a85ec819beba977b1280c269303a2fd585f6818f..251ab0ceeb3e6c41b811ae17c85dc6c92ea8998b 100644
--- a/src/models/monthlyNews.model.ts
+++ b/src/models/monthlyNews.model.ts
@@ -1,4 +1,4 @@
-export interface MonthlyNews {
+export interface IMonthlyNews {
year: number
month: number
header: string
diff --git a/src/services/monthlyNews.service.ts b/src/services/monthlyNews.service.ts
index 0c6cbf853993464be7b4b5fb2ab7b6a1cbfcb98b..a7be985d08797545bc146d55f7358833e0e7f849 100644
--- a/src/services/monthlyNews.service.ts
+++ b/src/services/monthlyNews.service.ts
@@ -1,5 +1,5 @@
import axios from 'axios'
-import { MonthlyNews } from '../models/monthlyNews.model'
+import { IMonthlyNews } from '../models/monthlyNews.model'
export class MonthlyNewsService {
private readonly _apiUrl: string
constructor() {
@@ -44,7 +44,7 @@ export class MonthlyNewsService {
year: number,
month: number,
token: string
- ): Promise<MonthlyNews | any> => {
+ ): Promise<IMonthlyNews | any> => {
try {
const { data } = await axios.get(
`${this._apiUrl}api/admin/monthlyNews/${year}/${month}`,
@@ -54,7 +54,7 @@ export class MonthlyNewsService {
},
}
)
- return data as MonthlyNews
+ return data as IMonthlyNews
} catch (e) {
console.log('error', e)
return