Skip to content
Snippets Groups Projects
Commit 9508f951 authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

Refacto

parent 0575b656
No related branches found
No related tags found
2 merge requests!7feat: add front office,!2Feat/setup auth
Hide whitespace changes
Inline Side-by-side
src/components/Editing/Editing.tsx
+ 37
− 102
View file @ 9508f951
import React, { useCallback, useContext, useEffect, useState } from 'react' import React, { useCallback, useContext, useEffect, useState } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import DateSelector from '../DateSelector/DateSelector' import DateSelector from '../DateSelector/DateSelector'
import './editing.scss' import './editing.scss'
import { MonthlyNewsService } from '../../services/monthlyNews.service' import { MonthlyNewsService } from '../../services/monthlyNews.service'
import { UserContext, UserContextProps } from '../../hooks/userContext' import { UserContext, UserContextProps } from '../../hooks/userContext'
import { MonthlyNews } from '../../models/monthlyNews.model' import { IMonthlyNews } from '../../models/monthlyNews.model'
import Poll from '../Poll/Poll' import Poll from '../Poll/Poll'
import MonthlyNews from '../MonthlyNews/MonthlyNews'
const Editing: React.FC = () => { const Editing: React.FC = () => {
const [date, setDate] = useState<Date>(new Date()) const [date, setDate] = useState<Date>(new Date())
const [header, setHeader] = useState<string>('') const [header, setHeader] = useState<string>('')
const [quote, setQuote] = useState<string>('') const [quote, setQuote] = useState<string>('')
const [question, setQuestion] = useState<string>('')
const [link, setLink] = useState<string>('')
const [isTouched, setIsTouched] = useState<boolean>(false) const [isTouched, setIsTouched] = useState<boolean>(false)
const { user }: Partial<UserContextProps> = useContext(UserContext) const { user }: Partial<UserContextProps> = useContext(UserContext)
const handleSave = async (): Promise<void> => { const handleSaveMonthlyNews = async (): Promise<void> => {
if (user) { if (user) {
const monthlyNewsService = new MonthlyNewsService() const monthlyNewsService = new MonthlyNewsService()
await monthlyNewsService.createMonthlyReport( await monthlyNewsService.createMonthlyReport(
...@@ -24,9 +25,10 @@ const Editing: React.FC = () => { ...@@ -24,9 +25,10 @@ const Editing: React.FC = () => {
quote, quote,
user.xsrftoken user.xsrftoken
) )
console.log('saved')
} }
} }
const handleCancel = useCallback(() => { const handleCancelMonthlyNews = useCallback(() => {
setQuote('') setQuote('')
setHeader('') setHeader('')
}, []) }, [])
...@@ -39,22 +41,36 @@ const Editing: React.FC = () => { ...@@ -39,22 +41,36 @@ const Editing: React.FC = () => {
const handleEditorChange = ( const handleEditorChange = (
value: string, value: string,
type: 'header' | 'quote' type: 'header' | 'quote' | 'question' | 'link'
): void => { ): void => {
setIsTouched(true) setIsTouched(true)
if (type === 'header') { if (type === 'header') {
setHeader(value) setHeader(value)
} else { }
if (type === 'quote') {
setQuote(value) setQuote(value)
} }
if (type === 'question') {
setQuestion(value)
}
if (type === 'link') {
setLink(value)
}
} }
const resetFields = useCallback(() => {
setQuote('')
setHeader('')
setLink('')
setQuestion('')
}, [])
useEffect(() => { useEffect(() => {
let subscribed = true let subscribed = true
resetFields()
async function getCurrentMonthlyNews() { async function getCurrentMonthlyNews() {
if (user) { if (user) {
const monthlyNewsService = new MonthlyNewsService() const monthlyNewsService = new MonthlyNewsService()
const news: MonthlyNews = const news: IMonthlyNews =
await monthlyNewsService.getSingleMonthlyReport( await monthlyNewsService.getSingleMonthlyReport(
date.getFullYear(), date.getFullYear(),
date.getMonth(), date.getMonth(),
...@@ -84,101 +100,20 @@ const Editing: React.FC = () => { ...@@ -84,101 +100,20 @@ const Editing: React.FC = () => {
</div> </div>
<div className="content"> <div className="content">
<DateSelector date={date} setDate={setDate} isEmpty={isEmpty} /> <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
<div className="subtitle"> <MonthlyNews
<p className="title">Informations du mois</p> header={header}
</div> quote={quote}
<div> onSave={handleSaveMonthlyNews}
<Editor onCancel={handleCancelMonthlyNews}
initialValue={header} handleChange={handleEditorChange}
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>
<Editor <hr />
initialValue={quote} <Poll
init={{ question={question}
menubar: false, link={link}
toolbar: handleChange={handleEditorChange}
'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(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
)
},
},
{
type: 'menuitem',
text: 'challenges',
onAction: function () {
editor.insertContent(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
)
},
},
{
type: 'menuitem',
text: 'ecogestures',
onAction: function () {
editor.insertContent(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
)
},
},
{
type: 'menuitem',
text: 'analysis',
onAction: function () {
editor.insertContent(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
)
},
},
{
type: 'menuitem',
text: 'options',
onAction: function () {
editor.insertContent(
'&nbsp;<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 />
</div> </div>
</> </>
) )
......
src/components/Editing/editing.scss
+ 3
− 0
View file @ 9508f951
...@@ -16,3 +16,6 @@ ...@@ -16,3 +16,6 @@
.subtitle { .subtitle {
margin: 1rem 0; margin: 1rem 0;
} }
hr {
margin: 2rem 1rem;
}
src/components/MonthlyNews/MonthlyNews.tsx 0 → 100644
+ 115
− 0
View file @ 9508f951
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(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
)
},
},
{
type: 'menuitem',
text: 'challenges',
onAction: function () {
editor.insertContent(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
)
},
},
{
type: 'menuitem',
text: 'ecogestures',
onAction: function () {
editor.insertContent(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
)
},
},
{
type: 'menuitem',
text: 'analysis',
onAction: function () {
editor.insertContent(
'&nbsp;<a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
)
},
},
{
type: 'menuitem',
text: 'options',
onAction: function () {
editor.insertContent(
'&nbsp;<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
src/components/Poll/Poll.tsx
+ 37
− 8
View file @ 9508f951
import React, { ChangeEvent, useState } from 'react' import { Editor } from '@tinymce/tinymce-react'
const Poll: React.FC = () => { import React, { ChangeEvent } from 'react'
const [poll, setPoll] = useState<string>('') import './poll.scss'
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
setPoll(e.target.value) 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 ( return (
<div className="poll"> <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 <input
type="text" type="text"
className="input-dark" className="input-dark"
value={poll} value={link}
onChange={handleChange} onChange={handleChangeLink}
/> />
</div> </div>
) )
......
src/components/Poll/poll.scss 0 → 100644
+ 10
− 0
View file @ 9508f951
.poll {
margin: 2rem 0;
.title {
margin: 1rem 0;
}
input {
min-width: 300px;
margin-left: 0;
}
}
src/models/monthlyNews.model.ts
+ 1
− 1
View file @ 9508f951
export interface MonthlyNews { export interface IMonthlyNews {
year: number year: number
month: number month: number
header: string header: string
......
src/services/monthlyNews.service.ts
+ 3
− 3
View file @ 9508f951
import axios from 'axios' import axios from 'axios'
import { MonthlyNews } from '../models/monthlyNews.model' import { IMonthlyNews } from '../models/monthlyNews.model'
export class MonthlyNewsService { export class MonthlyNewsService {
private readonly _apiUrl: string private readonly _apiUrl: string
constructor() { constructor() {
...@@ -44,7 +44,7 @@ export class MonthlyNewsService { ...@@ -44,7 +44,7 @@ export class MonthlyNewsService {
year: number, year: number,
month: number, month: number,
token: string token: string
): Promise<MonthlyNews | any> => { ): Promise<IMonthlyNews | any> => {
try { try {
const { data } = await axios.get( const { data } = await axios.get(
`${this._apiUrl}api/admin/monthlyNews/${year}/${month}`, `${this._apiUrl}api/admin/monthlyNews/${year}/${month}`,
...@@ -54,7 +54,7 @@ export class MonthlyNewsService { ...@@ -54,7 +54,7 @@ export class MonthlyNewsService {
}, },
} }
) )
return data as MonthlyNews return data as IMonthlyNews
} catch (e) { } catch (e) {
console.log('error', e) console.log('error', e)
return return
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment