From 352c6224601ae5bf484bed8615e905538dd8b0e6 Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Wed, 15 Jun 2022 15:58:49 -0300
Subject: [PATCH] update notificate

---
 .../NotificationQuestionsCard.tsx             | 29 ++++++++++
 .../NotificationQuestionsCardView.ts          | 45 +++++++++++++++
 .../faqQuestionsCard/FaqQuestionsCard.tsx     |  1 +
 src/pages/notifications.tsx                   | 55 +++++++++++++++----
 4 files changed, 118 insertions(+), 12 deletions(-)
 create mode 100644 src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx
 create mode 100644 src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts

diff --git a/src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx b/src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx
new file mode 100644
index 0000000..b2e4438
--- /dev/null
+++ b/src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import Image from 'next/image'
+import getAPIClient from '../../services/ssrApi';
+import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './NotificationQuestionsCardView'
+
+interface CommonsQuestionsCardInterface {
+  title: string,
+  body: string,
+
+}
+
+export default function NotificationQuestionsCard({title, body}: CommonsQuestionsCardInterface) {
+  const [ showCardBody, setShowCardBody ] = useState<boolean>(false)
+  return (
+
+    <CommonQuestionsCardView>
+      <FaqQuestionsCardHeader>
+        <h4>{title}</h4>
+        <Image src={showCardBody? '/assets/less-icon.svg' : '/assets/plus-icon.svg' } width={32} height={32} onClick={() => setShowCardBody(!showCardBody)} />
+      </FaqQuestionsCardHeader>
+
+      <FaqQuestionsCardBody showCardBody={showCardBody} >
+        <p>
+          {body}
+        </p>
+      </FaqQuestionsCardBody>
+    </CommonQuestionsCardView>
+  )
+}
diff --git a/src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts b/src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts
new file mode 100644
index 0000000..91d16dd
--- /dev/null
+++ b/src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const CommonQuestionsCardView = styled.article`
+`
+
+export const FaqQuestionsCardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-direction: row;
+
+  margin-top: 53px;
+
+  width: 100%;
+
+  img {
+    cursor: pointer;
+  }
+`
+interface CardBodyInterface {
+  showCardBody: boolean;
+}
+export const FaqQuestionsCardBody = styled.div<CardBodyInterface>`
+  display: ${props => props.showCardBody? 'flex' : 'none'};
+
+  margin-bottom: 20px;
+
+  p {
+    font-weight: 400;
+    font-size: 99%;
+
+    letter-spacing: 0.5px;
+
+    color: rgba(0, 0, 0, 0.6);
+
+    text-align: left;
+  }
+
+  @media (max-width: 1008px) {
+    p {
+      text-align: left;
+    }
+  }
+`
diff --git a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx
index 730fd19..5ceda20 100644
--- a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx
+++ b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx
@@ -6,6 +6,7 @@ import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView }
 interface CommonsQuestionsCardInterface {
   question: string,
   answer: string,
+
 }
 
 export default function CommonsQuestionsCard({question, answer}: CommonsQuestionsCardInterface) {
diff --git a/src/pages/notifications.tsx b/src/pages/notifications.tsx
index 64c81d6..2c1e8f7 100644
--- a/src/pages/notifications.tsx
+++ b/src/pages/notifications.tsx
@@ -1,11 +1,15 @@
+import { GetServerSideProps } from 'next'
 import Head from 'next/head'
+import { parseCookies } from 'nookies'
 import React from 'react'
-import CommonQuestionsCard from '../components/faqQuestionsCard/FaqQuestionsCard'
+import NotificationQuestionsCard from '../components/NotificationQuestionsCard/NotificationQuestionsCard'
 import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
+import { api } from '../services/api'
+import getAPIClient from '../services/ssrApi'
 import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
 
-export default function Notifications() {
+export default function Notifications({notificationData}: any) {
   return (
     <FaqView>
       <Head>
@@ -15,17 +19,44 @@ export default function Notifications() {
       <PageTitle title='Notifications' subtitle='' />
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       <section className='CommonQuestionsSection' >
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
+      {
+        notificationData.map((value, index ) => {
+          return <>
+            <NotificationQuestionsCard key={index} title={value.title} body={value.body}/>
+            <hr />
+          </>
+        })
+      }
       </section>
     </FaqView>
   )
 }
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const apiClient = getAPIClient(ctx)
+  const { ['@smartAuth-token']: token } = parseCookies(ctx)
+  console.log('teste')
+  let notificationData = [];
+
+
+await apiClient.get('/notification').then(res => {
+  notificationData = res.data
+}).catch(res => {
+  console.log(res)
+})
+  console.table(notificationData);
+
+  if (!token) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: false
+      }
+    }
+  }
+
+  return {
+    props: {
+      notificationData
+    }
+  }
+}