diff --git a/.eslintrc.js b/.eslintrc.js index e835c434..72e32bbd 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -30,5 +30,6 @@ module.exports = { quotes: ['error', 'single'], semi: ['error', 'always'], '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off' }, }; diff --git a/src/Components/AnswerHeader/index.tsx b/src/Components/AnswerHeader/index.tsx index 79fb270f..a62a2915 100644 --- a/src/Components/AnswerHeader/index.tsx +++ b/src/Components/AnswerHeader/index.tsx @@ -1,35 +1,22 @@ -import React from 'react'; - interface AnswerHeaderProps { totalVotes: number; - medianOfScore: string; startTime: string; - endTime: string; } -function AnswerHeader({ - totalVotes, - medianOfScore, - startTime, - endTime, -}: AnswerHeaderProps & React.HTMLProps) { +function AnswerHeader({ totalVotes, startTime }: AnswerHeaderProps) { return (
- - - - + + - - - - + +
Total VotesMedian of scoreStart TimeEnd TimeTotal VotesStart Time
{totalVotes}{medianOfScore}{startTime}{endTime}{totalVotes}{startTime}
diff --git a/src/Components/AnswerTable/index.tsx b/src/Components/AnswerTable/index.tsx index ad6f3f6f..afa5ee62 100644 --- a/src/Components/AnswerTable/index.tsx +++ b/src/Components/AnswerTable/index.tsx @@ -1,6 +1,4 @@ -import { DownloadIcon } from '@heroicons/react/outline'; import React from 'react'; -import IconButton, { IconButtonVariant } from '../../Components/IconButton'; function AnswerTable({ children }: React.HTMLProps) { return ( @@ -8,16 +6,9 @@ function AnswerTable({ children }: React.HTMLProps) { - - - + {children} diff --git a/src/Components/AnswerTableRow/index.tsx b/src/Components/AnswerTableRow/index.tsx index ff279221..7b680836 100644 --- a/src/Components/AnswerTableRow/index.tsx +++ b/src/Components/AnswerTableRow/index.tsx @@ -1,25 +1,15 @@ -import React from 'react'; - interface AnswerTableRowProps { - ID: number; time: string; - score: string; + selectedIcon: string; text: string; } -function AnswerTableRow({ - ID, - time, - score, - text, -}: AnswerTableRowProps & React.HTMLProps) { +function AnswerTableRow({ time, selectedIcon, text }: AnswerTableRowProps) { return ( - - + - ); } diff --git a/src/Components/ProtectedRoute/index.tsx b/src/Components/ProtectedRoute/index.tsx index 0ee47cf0..dae8815d 100644 --- a/src/Components/ProtectedRoute/index.tsx +++ b/src/Components/ProtectedRoute/index.tsx @@ -8,9 +8,10 @@ type ProtectedRouteProps = { const ProtectedRoute = ({ children }: ProtectedRouteProps) => { const [user, loading, error] = useAuthState(auth); - const isLoggedIn = user && !loading && !error; + const isLoggedIn = user && !error; const location = useLocation(); + if (loading) return null; if (!isLoggedIn) { return ; } else { @@ -18,4 +19,4 @@ const ProtectedRoute = ({ children }: ProtectedRouteProps) => { } }; -export default ProtectedRoute; \ No newline at end of file +export default ProtectedRoute; diff --git a/src/Pages/PageWrapper.tsx b/src/Pages/PageWrapper.tsx index c0b0790b..c61322db 100644 --- a/src/Pages/PageWrapper.tsx +++ b/src/Pages/PageWrapper.tsx @@ -1,5 +1,5 @@ import { lazy, Suspense } from 'react'; -import { Routes, Route, BrowserRouter, Navigate } from 'react-router-dom'; +import { Routes, Route, BrowserRouter } from 'react-router-dom'; import ProtectedRoute from '../Components/ProtectedRoute'; import Navigation from '../Layouts/Navigation'; import HomePage from './HomePage'; @@ -45,15 +45,13 @@ function PageWrapper() { } /> } /> - - } /> @@ -61,4 +59,4 @@ function PageWrapper() { ); } -export default PageWrapper; \ No newline at end of file +export default PageWrapper; diff --git a/src/Pages/SurveyAnswerPage/index.tsx b/src/Pages/SurveyAnswerPage/index.tsx index 245e6f2c..27ecc127 100644 --- a/src/Pages/SurveyAnswerPage/index.tsx +++ b/src/Pages/SurveyAnswerPage/index.tsx @@ -3,18 +3,83 @@ import AnswerHeader from '../../Components/AnswerHeader'; import AnswerTableRow from '../../Components/AnswerTableRow'; import IconButton, { IconButtonVariant } from '../../Components/IconButton'; import { LinkIcon } from '@heroicons/react/outline'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { useDocumentTitle } from '../../Hooks/useDocumentTitle'; +import { useEffect, useState } from 'react'; +import { db } from '../../firebase'; +import { + collection, + doc, + getDoc, + getDocs, + Timestamp, +} from 'firebase/firestore'; + +interface AnswerData { + id: string; + answerDate: string; + selectedIcon: string; + answer: string; +} function SurveyAnswerPage() { useDocumentTitle('Survey Answers'); - const { answerId } = useParams(); + const { surveyId } = useParams(); + const navigate = useNavigate(); + + const [votes, setVotes] = useState(0); + const [title, setTitle] = useState(''); + const [startTime, setStartTime] = useState('-'); + const [answersData, setAnswersData] = useState([]); + + useEffect(() => { + if (!surveyId) { + navigate('/'); + return; + } + + getSurveyData(); + }, [surveyId]); + + const getSurveyData = async () => { + const surveyData = await getDoc(doc(db, 'surveys', surveyId!)); + if (!surveyData.exists()) { + navigate('/'); + return; + } + + const answersData = await getDocs( + collection(db, 'surveys', surveyId!, 'answers') + ); + setVotes(answersData.docs.length); + + setStartTime( + formatFirebaseDate(surveyData.data()?.createdDate as Timestamp) + ); + setTitle(surveyData.data()?.title); + const data = answersData.docs.map((doc) => ({ + ...doc.data(), + answerDate: formatFirebaseDate(doc.data().answerDate as Timestamp), + })) as AnswerData[]; + + setAnswersData(data); + }; + + const formatFirebaseDate = (date: Timestamp) => { + return date.toDate().toLocaleString('pl-PL', { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); + }; return (

- Answers for {answerId} + Answers for "{title}"

} />
- - - - - - + + {answersData.length > 0 ? ( + + {answersData.map((answer) => ( + + ))} + + ) : ( +
No answers yet
+ )}
); } diff --git a/src/Pages/SurveyListPage/index.tsx b/src/Pages/SurveyListPage/index.tsx index 66ff3d92..fe2f4c3f 100644 --- a/src/Pages/SurveyListPage/index.tsx +++ b/src/Pages/SurveyListPage/index.tsx @@ -27,7 +27,7 @@ function SurveyListPage() { }; const handleOnMoreButton = (id: string) => () => { - navigate(`/survey/${id}`); + navigate(`/survey/answer/${id}`); }; return ( diff --git a/src/Pages/SurveyPage/index.tsx b/src/Pages/SurveyPage/index.tsx index 6794b128..28847246 100644 --- a/src/Pages/SurveyPage/index.tsx +++ b/src/Pages/SurveyPage/index.tsx @@ -29,11 +29,7 @@ function SurveyPage() { }, [surveyId]); const getSurveyData = async () => { - if (!surveyId) { - navigate('/'); - return; - } - const surveyData = await getDoc(doc(db, 'surveys', surveyId)); + const surveyData = await getDoc(doc(db, 'surveys', surveyId!)); if (!surveyData.exists()) { navigate('/'); return;
ID Time ScoreText - } - > - Text
{ID} {time}{score}{selectedIcon} {text}