Skip to content
Snippets Groups Projects
Commit 42b08a02 authored by Rémi PAILHAREY's avatar Rémi PAILHAREY :fork_knife_plate:
Browse files

feat(Editing): display next month after the 5th

parent 9f5b9de9
No related branches found
No related tags found
3 merge requests!24fix(typo): écogestes + optionnel poll,!22feat: Add partners issue info,!19feat(Editing): display next month after the 5th
Hide whitespace changes
Inline Side-by-side
src/components/Editing/Editing.tsx
+ 270
− 260
View file @ 42b08a02
import React, { useCallback, useContext, useEffect, useState } from 'react' import React, { useCallback, useContext, useEffect, useState } from 'react'
import DateSelector from '../DateSelector/DateSelector' import DateSelector from '../DateSelector/DateSelector'
import { NewsletterService } from '../../services/newsletter.service' import { NewsletterService } from '../../services/newsletter.service'
import { UserContext, UserContextProps } from '../../hooks/userContext' import { UserContext, UserContextProps } from '../../hooks/userContext'
import { IMonthlyNews } from '../../models/monthlyNews.model' import { IMonthlyNews } from '../../models/monthlyNews.model'
import { IMonthlyInfo } from '../../models/monthlyInfo.model' import { IMonthlyInfo } from '../../models/monthlyInfo.model'
import { IPoll } from '../../models/poll.model' import { IPoll } from '../../models/poll.model'
import Poll from '../Poll/Poll' import Poll from '../Poll/Poll'
import MonthlyInfo from '../MonthlyInfo/MonthlyInfo' import MonthlyInfo from '../MonthlyInfo/MonthlyInfo'
import MonthlyNews from '../MonthlyNews/MonthlyNews' import MonthlyNews from '../MonthlyNews/MonthlyNews'
import Loader from '../Loader/Loader' import Loader from '../Loader/Loader'
import Modal from '../Modal/Modal' import Modal from '../Modal/Modal'
import './editing.scss' import './editing.scss'
export type ContentItems = 'monthlyInfo' | 'monthlyNews' | 'poll' | '' export type ContentItems = 'monthlyInfo' | 'monthlyNews' | 'poll' | ''
const Editing: React.FC = () => { const Editing: React.FC = () => {
const [date, setDate] = useState<Date>(new Date()) // Fonctional rule :
const [info, setInfo] = useState<string>('') // Display next month after the 5th of the current month
const [title, setTitle] = useState<string>('') const getCurrentNewsletterDate = (): Date => {
const [imageURL, setImageURL] = useState<string>('') let newsletterDate = new Date()
const [content, setContent] = useState<string>('') if (newsletterDate.getDate() > 5) {
const [question, setQuestion] = useState<string>('') newsletterDate.setMonth(newsletterDate.getMonth() + 1)
const [link, setLink] = useState<string>('') }
const [isTouched, setIsTouched] = useState<boolean>(false) return newsletterDate
const [refreshData, setRefreshData] = useState(false) }
const [isLoading, setisLoading] = useState<boolean>(false)
const [warningModal, setwarningModal] = useState<boolean>(false) const [date, setDate] = useState<Date>(getCurrentNewsletterDate())
const [toDelete, settoDelete] = useState<ContentItems>('') const [info, setInfo] = useState<string>('')
const { user }: Partial<UserContextProps> = useContext(UserContext) const [title, setTitle] = useState<string>('')
const newsletterService = new NewsletterService() const [imageURL, setImageURL] = useState<string>('')
const [content, setContent] = useState<string>('')
const handleSaveMonthlyInfo = async (): Promise<void> => { const [question, setQuestion] = useState<string>('')
if (user) { const [link, setLink] = useState<string>('')
const newsletterService = new NewsletterService() const [isTouched, setIsTouched] = useState<boolean>(false)
await newsletterService.saveMonthlyInfo( const [refreshData, setRefreshData] = useState(false)
date, const [isLoading, setisLoading] = useState<boolean>(false)
info, const [warningModal, setwarningModal] = useState<boolean>(false)
imageURL, const [toDelete, settoDelete] = useState<ContentItems>('')
user.xsrftoken const { user }: Partial<UserContextProps> = useContext(UserContext)
) const newsletterService = new NewsletterService()
setIsTouched(false)
} const handleSaveMonthlyInfo = async (): Promise<void> => {
} if (user) {
const newsletterService = new NewsletterService()
const handleSaveMonthlyNews = async (): Promise<void> => { await newsletterService.saveMonthlyInfo(
if (user) { date,
const newsletterService = new NewsletterService() info,
await newsletterService.saveMonthlyNews( imageURL,
date, user.xsrftoken
title, )
content, setIsTouched(false)
user.xsrftoken }
) }
setIsTouched(false)
} const handleSaveMonthlyNews = async (): Promise<void> => {
} if (user) {
const handleSavePoll = async (): Promise<void> => { const newsletterService = new NewsletterService()
if (user) { await newsletterService.saveMonthlyNews(
await newsletterService.savePoll(date, question, link, user.xsrftoken) date,
setIsTouched(false) title,
} content,
} user.xsrftoken
const handleCancel = useCallback(() => { )
setRefreshData(true) setIsTouched(false)
}, []) }
}
const handleDeleteMonthlyInfo = async (): Promise<void> => { const handleSavePoll = async (): Promise<void> => {
if (user) { if (user) {
await newsletterService.deleteMonthlyInfo(date, user.xsrftoken) await newsletterService.savePoll(date, question, link, user.xsrftoken)
setRefreshData(true) setIsTouched(false)
} }
} }
const handleDeleteMonthlyNews = async (): Promise<void> => { const handleCancel = useCallback(() => {
if (user) { setRefreshData(true)
await newsletterService.deleteMonthlyNews(date, user.xsrftoken) }, [])
setRefreshData(true)
} const handleDeleteMonthlyInfo = async (): Promise<void> => {
} if (user) {
const handleDeletePoll = async (): Promise<void> => { await newsletterService.deleteMonthlyInfo(date, user.xsrftoken)
if (user) { setRefreshData(true)
await newsletterService.deletePoll(date, user.xsrftoken) }
setRefreshData(true) }
} const handleDeleteMonthlyNews = async (): Promise<void> => {
} if (user) {
const handleOpenDeleteModal = (target: ContentItems) => { await newsletterService.deleteMonthlyNews(date, user.xsrftoken)
settoDelete(target) setRefreshData(true)
setwarningModal(true) }
} }
const handleConfirmAlert = () => { const handleDeletePoll = async (): Promise<void> => {
if (toDelete === 'monthlyInfo') { if (user) {
handleDeleteMonthlyInfo() await newsletterService.deletePoll(date, user.xsrftoken)
} setRefreshData(true)
if (toDelete === 'monthlyNews') { }
handleDeleteMonthlyNews() }
} const handleOpenDeleteModal = (target: ContentItems) => {
if (toDelete === 'poll') { settoDelete(target)
handleDeletePoll() setwarningModal(true)
} }
setwarningModal(false) const handleConfirmAlert = () => {
} if (toDelete === 'monthlyInfo') {
handleDeleteMonthlyInfo()
const isEmpty = (): boolean => { }
if ( if (toDelete === 'monthlyNews') {
(info !== '' || handleDeleteMonthlyNews()
title !== '' || }
content !== '' || if (toDelete === 'poll') {
question !== '' || handleDeletePoll()
imageURL !== '' || }
link !== '') && setwarningModal(false)
isTouched }
) {
return false const isEmpty = (): boolean => {
} else return true if (
} (info !== '' ||
title !== '' ||
const handleEditorChange = ( content !== '' ||
value: string, question !== '' ||
type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image' imageURL !== '' ||
): void => { link !== '') &&
setIsTouched(true) isTouched
if (type === 'info') { ) {
setInfo(value) return false
} } else return true
if (type === 'title') { }
setTitle(value)
} const handleEditorChange = (
if (type === 'content') { value: string,
setContent(value) type: 'info' | 'title' | 'content' | 'question' | 'link' | 'image'
} ): void => {
if (type === 'question') { setIsTouched(true)
setQuestion(value) if (type === 'info') {
} setInfo(value)
if (type === 'link') { }
setLink(value) if (type === 'title') {
} setTitle(value)
if (type === 'image') { }
setImageURL(value) if (type === 'content') {
} setContent(value)
} }
const resetFields = useCallback(() => { if (type === 'question') {
setImageURL('') setQuestion(value)
setInfo('') }
setTitle('') if (type === 'link') {
setContent('') setLink(value)
setLink('') }
setQuestion('') if (type === 'image') {
}, []) setImageURL(value)
}
useEffect(() => { }
let subscribed = true const resetFields = useCallback(() => {
resetFields() setImageURL('')
setisLoading(true) setInfo('')
async function getCurrentMonthlyNews() { setTitle('')
if (user) { setContent('')
const newsletterService = new NewsletterService() setLink('')
const montlhyInfo: IMonthlyInfo | null = setQuestion('')
await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken) }, [])
const montlhyNews: IMonthlyNews | null =
await newsletterService.getSingleMonthlyNews(date, user.xsrftoken) useEffect(() => {
const poll: IPoll | null = await newsletterService.getSinglePoll( let subscribed = true
date, resetFields()
user.xsrftoken setisLoading(true)
) async function getCurrentMonthlyNews() {
if (montlhyInfo) { if (user) {
setInfo(montlhyInfo.info) const newsletterService = new NewsletterService()
setImageURL(montlhyInfo.image) const montlhyInfo: IMonthlyInfo | null =
setIsTouched(false) await newsletterService.getSingleMonthlyInfo(date, user.xsrftoken)
} const montlhyNews: IMonthlyNews | null =
if (montlhyNews) { await newsletterService.getSingleMonthlyNews(date, user.xsrftoken)
setTitle(montlhyNews.title) const poll: IPoll | null = await newsletterService.getSinglePoll(
setContent(montlhyNews.content) date,
setIsTouched(false) user.xsrftoken
} )
if (poll) { if (montlhyInfo) {
setLink(poll.link) setInfo(montlhyInfo.info)
setQuestion(poll.question) setImageURL(montlhyInfo.image)
setIsTouched(false) setIsTouched(false)
} }
} if (montlhyNews) {
setisLoading(false) setTitle(montlhyNews.title)
} setContent(montlhyNews.content)
if (subscribed) { setIsTouched(false)
getCurrentMonthlyNews() }
} if (poll) {
return () => { setLink(poll.link)
subscribed = false setQuestion(poll.question)
setRefreshData(false) setIsTouched(false)
} }
}, [date, user, refreshData, resetFields]) }
setisLoading(false)
return ( }
<> if (subscribed) {
<div className="header"> getCurrentMonthlyNews()
<p className="title pagetitle">Édition de la newsletter</p> }
<DateSelector date={date} setDate={setDate} isEmpty={isEmpty} /> return () => {
</div> subscribed = false
{isLoading ? ( setRefreshData(false)
<Loader /> }
) : ( }, [date, user, refreshData, resetFields])
<div className="content">
<MonthlyInfo return (
info={info} <>
onSave={handleSaveMonthlyInfo} <div className="header">
onCancel={handleCancel} <p className="title pagetitle">Édition de la newsletter</p>
handleChange={handleEditorChange} <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
onDelete={handleOpenDeleteModal} </div>
imageURL={imageURL} {isLoading ? (
/> <Loader />
<hr /> ) : (
<MonthlyNews <div className="content">
title={title} <MonthlyInfo
content={content} info={info}
onSave={handleSaveMonthlyNews} onSave={handleSaveMonthlyInfo}
onCancel={handleCancel} onCancel={handleCancel}
handleChange={handleEditorChange} handleChange={handleEditorChange}
onDelete={handleOpenDeleteModal} onDelete={handleOpenDeleteModal}
/> imageURL={imageURL}
<hr /> />
<Poll <hr />
question={question} <MonthlyNews
link={link} title={title}
onSave={handleSavePoll} content={content}
onCancel={handleCancel} onSave={handleSaveMonthlyNews}
handleChange={handleEditorChange} onCancel={handleCancel}
onDelete={handleOpenDeleteModal} handleChange={handleEditorChange}
/> onDelete={handleOpenDeleteModal}
</div> />
)} <hr />
{warningModal && ( <Poll
<Modal> question={question}
<> link={link}
<div className="modal-text"> onSave={handleSavePoll}
Etes-vous sûr de vouloir supprimer{' '} onCancel={handleCancel}
{toDelete === 'monthlyInfo' handleChange={handleEditorChange}
? 'cette info mensuelle ' onDelete={handleOpenDeleteModal}
: toDelete === 'monthlyNews' />
? 'cette news mensuelle' </div>
: 'ce sondage'}{' '} )}
? {warningModal && (
</div> <Modal>
<div className="buttons"> <>
<button <div className="modal-text">
className="btnCancel" Etes-vous sûr de vouloir supprimer{' '}
onClick={() => setwarningModal(false)} {toDelete === 'monthlyInfo'
> ? 'cette info mensuelle '
Annuler : toDelete === 'monthlyNews'
</button> ? 'cette news mensuelle'
<button className="btnValid" onClick={handleConfirmAlert}> : 'ce sondage'}{' '}
Continuer ?
</button> </div>
</div> <div className="buttons">
</> <button
</Modal> className="btnCancel"
)} onClick={() => setwarningModal(false)}
</> >
) Annuler
} </button>
<button className="btnValid" onClick={handleConfirmAlert}>
export default Editing Continuer
</button>
</div>
</>
</Modal>
)}
</>
)
}
export default Editing
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment