From 116ab544cbbfbda21afefeaecd5ed9da19ab496e Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Tue, 3 Aug 2021 17:19:11 +0200
Subject: [PATCH] Add poll service
---
src/components/Editing/Editing.tsx | 42 +++++++++++++++---
src/components/Poll/Poll.tsx | 37 +++++++++++-----
src/models/poll.model.ts | 6 +++
src/services/monthlyNews.service.ts | 68 ++++++++++++++++++++++++++++-
4 files changed, 134 insertions(+), 19 deletions(-)
create mode 100644 src/models/poll.model.ts
diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 116fb847..3c38ae10 100644
--- a/src/components/Editing/Editing.tsx
+++ b/src/components/Editing/Editing.tsx
@@ -6,6 +6,7 @@ import { UserContext, UserContextProps } from '../../hooks/userContext'
import { IMonthlyNews } from '../../models/monthlyNews.model'
import Poll from '../Poll/Poll'
import MonthlyNews from '../MonthlyNews/MonthlyNews'
+import { IPoll } from '../../models/poll.model'
const Editing: React.FC = () => {
const [date, setDate] = useState<Date>(new Date())
@@ -14,6 +15,9 @@ const Editing: React.FC = () => {
const [question, setQuestion] = useState<string>('')
const [link, setLink] = useState<string>('')
const [isTouched, setIsTouched] = useState<boolean>(false)
+ const [isMontlyNewsUpdating, setisMontlyNewsUpdating] =
+ useState<boolean>(false)
+ const [isPollUpdating, setisPollUpdating] = useState<boolean>(false)
const { user }: Partial<UserContextProps> = useContext(UserContext)
const handleSaveMonthlyNews = async (): Promise<void> => {
@@ -26,6 +30,15 @@ const Editing: React.FC = () => {
user.xsrftoken
)
console.log('saved')
+ setIsTouched(false)
+ }
+ }
+ const handleSavePoll = async (): Promise<void> => {
+ if (user) {
+ const monthlyNewsService = new MonthlyNewsService()
+ await monthlyNewsService.createPoll(date, question, link, user.xsrftoken)
+ console.log('saved')
+ setIsTouched(false)
}
}
const handleCancelMonthlyNews = useCallback(() => {
@@ -33,6 +46,11 @@ const Editing: React.FC = () => {
setHeader('')
}, [])
+ const handleCancelPoll = useCallback(() => {
+ setLink('')
+ setQuestion('')
+ }, [])
+
const isEmpty = (): boolean => {
if ((quote !== '' || header !== '') && isTouched) {
return false
@@ -70,21 +88,34 @@ const Editing: React.FC = () => {
async function getCurrentMonthlyNews() {
if (user) {
const monthlyNewsService = new MonthlyNewsService()
- const news: IMonthlyNews =
+ const montlhyNews: IMonthlyNews | null =
await monthlyNewsService.getSingleMonthlyReport(
date.getFullYear(),
date.getMonth(),
user.xsrftoken
)
- if (news) {
- setHeader(news.header)
- setQuote(news.quote)
+ const poll: IPoll | null = await monthlyNewsService.getSinglePoll(
+ date.getFullYear(),
+ date.getMonth(),
+ user.xsrftoken
+ )
+ if (montlhyNews) {
+ setHeader(montlhyNews.header)
+ setQuote(montlhyNews.quote)
setIsTouched(false)
+ setisMontlyNewsUpdating(true)
+ }
+ if (poll) {
+ setLink(poll.link)
+ setQuestion(poll.question)
+ setIsTouched(false)
+ setisPollUpdating(true)
}
}
}
if (subscribed) {
getCurrentMonthlyNews()
+ console.log('updating?', isMontlyNewsUpdating)
}
return () => {
subscribed = false
@@ -107,12 +138,13 @@ const Editing: React.FC = () => {
onCancel={handleCancelMonthlyNews}
handleChange={handleEditorChange}
/>
-
<hr />
<Poll
question={question}
link={link}
handleChange={handleEditorChange}
+ onSave={handleSavePoll}
+ onCancel={handleCancelPoll}
/>
</div>
</>
diff --git a/src/components/Poll/Poll.tsx b/src/components/Poll/Poll.tsx
index afe251d5..075f1121 100644
--- a/src/components/Poll/Poll.tsx
+++ b/src/components/Poll/Poll.tsx
@@ -9,11 +9,15 @@ interface PollProps {
value: string,
type: 'header' | 'quote' | 'question' | 'link'
) => void
+ onSave: () => void
+ onCancel: () => void
}
const Poll: React.FC<PollProps> = ({
question,
link,
handleChange,
+ onSave,
+ onCancel,
}: PollProps) => {
const handleChangeLink = (e: ChangeEvent<HTMLInputElement>) => {
handleChange(e.target.value, 'link')
@@ -22,19 +26,7 @@ const Poll: React.FC<PollProps> = ({
return (
<div className="poll">
<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"
@@ -42,6 +34,27 @@ const Poll: React.FC<PollProps> = ({
value={link}
onChange={handleChangeLink}
/>
+ <div>
+ <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')
+ }
+ />
+ <button className="btnCancel" onClick={onCancel}>
+ Annuler
+ </button>
+ <button className="btnValid" onClick={onSave}>
+ Sauvegarder
+ </button>
+ </div>
</div>
)
}
diff --git a/src/models/poll.model.ts b/src/models/poll.model.ts
new file mode 100644
index 00000000..2ec81405
--- /dev/null
+++ b/src/models/poll.model.ts
@@ -0,0 +1,6 @@
+export interface IPoll {
+ year: number
+ month: number
+ question: string
+ link: string
+}
diff --git a/src/services/monthlyNews.service.ts b/src/services/monthlyNews.service.ts
index a7be985d..5bc55139 100644
--- a/src/services/monthlyNews.service.ts
+++ b/src/services/monthlyNews.service.ts
@@ -1,5 +1,6 @@
import axios from 'axios'
import { IMonthlyNews } from '../models/monthlyNews.model'
+import { IPoll } from '../models/poll.model'
export class MonthlyNewsService {
private readonly _apiUrl: string
constructor() {
@@ -44,7 +45,7 @@ export class MonthlyNewsService {
year: number,
month: number,
token: string
- ): Promise<IMonthlyNews | any> => {
+ ): Promise<IMonthlyNews | null> => {
try {
const { data } = await axios.get(
`${this._apiUrl}api/admin/monthlyNews/${year}/${month}`,
@@ -54,10 +55,73 @@ export class MonthlyNewsService {
},
}
)
+ console.log('monthlyFetched', data)
+ if (data == {}) {
+ return null
+ }
return data as IMonthlyNews
} catch (e) {
console.log('error', e)
- return
+ return null
+ }
+ }
+
+ /**
+ * Gets a poll with question and link for selected month
+ */
+ public getSinglePoll = async (
+ year: number,
+ month: number,
+ token: string
+ ): Promise<IPoll | null> => {
+ try {
+ const { data } = await axios.get(
+ `${this._apiUrl}api/admin/poll/${year}/${month}`,
+ {
+ headers: {
+ 'XSRF-TOKEN': token,
+ },
+ }
+ )
+ if (data === {}) {
+ return null
+ }
+ return data as IPoll
+ } catch (e) {
+ console.log('error', e)
+ return null
+ }
+ }
+
+ /**
+ * Creates a poll with question and link for selected month
+ * @param date
+ * @param question
+ * @param link
+ */
+ public createPoll = async (
+ date: Date,
+ question: string,
+ link: string,
+ token: string
+ ): Promise<void> => {
+ try {
+ await axios.post(
+ `${this._apiUrl}api/admin/poll`,
+ {
+ month: date.getMonth(),
+ year: date.getFullYear(),
+ link: link,
+ question: question,
+ },
+ {
+ headers: {
+ 'XSRF-TOKEN': token,
+ },
+ }
+ )
+ } catch (e) {
+ console.log(e)
}
}
}
--
GitLab