Add poll service

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>
     </>

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>
   )
 }

src/models/poll.model.ts

+export interface IPoll {
+  year: number
+  month: number
+  question: string
+  link: string
+}

src/services/monthlyNews.service.ts

 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)
     }
   }
 }