Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

update notificate

Browse Source
This commit is contained in:
Alex Santos 2022-06-15 15:58:49 -03:00
parent 19dc97d06f
commit 352c622460
4 changed files with 118 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/NotificationQuestionsCard/NotificationQuestionsCard.tsx Normal file
View File

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

45
src/components/NotificationQuestionsCard/NotificationQuestionsCardView.ts Normal file
View File

@ -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;
}
}
`

1
src/components/faqQuestionsCard/FaqQuestionsCard.tsx
View File

@ -6,6 +6,7 @@ import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView }
interface CommonsQuestionsCardInterface {
question: string,
answer: string,
}
export default function CommonsQuestionsCard({question, answer}: CommonsQuestionsCardInterface) {

55
src/pages/notifications.tsx
View File

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