Skip to content

Commit 0c6fd25

Browse files
elijahladdieelijahladdie
committed
adding community page
1 parent 31852e3 commit 0c6fd25

File tree

6 files changed

+127
-22
lines changed

6 files changed

+127
-22
lines changed

‎src/components/Buttons.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable */
2+
/* eslint-disable */
23
import React from 'react';
34

45
interface Props {

‎src/components/CommunityQuestions.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { useState } from 'react';
2+
3+
// Define types for the question and component props
4+
type Question = {
5+
id: string; // Use unique IDs for each question
6+
user: string;
7+
text: string;
8+
response: string;
9+
};
10+
11+
interface CommunityQuestionsProps {
12+
questions: Question[];
13+
}
14+
15+
// Using function declaration for the component
16+
function CommunityQuestions({ questions }: CommunityQuestionsProps) {
17+
const [openResponse, setOpenResponse] = useState<string | null>(null);
18+
19+
const toggleResponse = (id: string) => {
20+
setOpenResponse(openResponse === id ? null : id);
21+
};
22+
23+
return (
24+
<div className="w-full lg:w-[40vw] p-4 bg-indigo-100 dark:bg-dark-bg rounded-md shadow-[0px_3px_4px_rgba(0,0,0,0.4)]">
25+
<h2 className="text-lg font-semibold text-center text-black dark:text-dark-text-fill">
26+
Community Questions
27+
</h2>
28+
<ul className="flex flex-col gap-4 mt-4">
29+
{questions.map((question) => (
30+
<li
31+
key={question.id}
32+
className="p-4 bg-white dark:bg-gray-700 rounded-md shadow-sm"
33+
>
34+
<div className="flex justify-between items-center">
35+
<span className="font-bold text-[.8rem] md:text-[.95rem]">
36+
{question.user}
37+
</span>
38+
<button
39+
type="button" // Set explicit button type
40+
className="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-300"
41+
onClick={() => toggleResponse(question.id)}
42+
>
43+
{openResponse === question.id ? 'Hide' : 'Show'} Response
44+
</button>
45+
</div>
46+
<p className="mt-2 text-sm text-gray-800 dark:text-gray-300">
47+
{question.text}
48+
</p>
49+
{openResponse === question.id && (
50+
<div className="mt-2 p-2 bg-indigo-50 dark:bg-gray-800 rounded">
51+
<p className="text-sm text-gray-700 dark:text-gray-300">
52+
{question.response}
53+
</p>
54+
</div>
55+
)}
56+
</li>
57+
))}
58+
</ul>
59+
</div>
60+
);
61+
}
62+
63+
export default CommunityQuestions;

‎src/components/Footer.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
FaPlayCircle,
1010
} from 'react-icons/fa';
1111
import i18next from 'i18next';
12+
import { Link } from 'react-router-dom';
1213
import LogoFooter from '../assets/logo.svg';
1314
import getLanguage from '../utils/getLanguage';
1415
import LogoIcon from './logoIcon';
@@ -76,7 +77,9 @@ function Footer({ styles }: any) {
7677
<div className="w-full sm:w-1/2 md:w-1/4 p-4 text-center lg:text-left">
7778
<h3 className="font-bold mb-2">{t('Resources')}</h3>
7879
<ul>
79-
<li className="mb-1">{t('Community')}</li>
80+
<li className="mb-1">
81+
<Link to="/community">{t('Community')} </Link>
82+
</li>
8083
<li className="mb-1">{t('Help Center')}</li>
8184
</ul>
8285
</div>

‎src/components/ProgramUsersModal.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { gql, useQuery } from '@apollo/client';
3-
import DataTable from './DataTable';
43
import Dialog from '@mui/material/Dialog';
54
import DialogContent from '@mui/material/DialogContent';
65
import DialogTitle from '@mui/material/DialogTitle';
76
import { styled } from '@mui/material/styles';
7+
import DataTable from './DataTable';
88

99
interface User {
1010
email: string;
@@ -70,7 +70,7 @@ export function ProgramUsersModal({
7070
isOpen,
7171
onClose,
7272
// defaultProgram = 'default',
73-
programName
73+
programName,
7474
}: ProgramUsersModalProps) {
7575
const { data, loading, error } = useQuery(GET_ALL_USERS, {
7676
variables: {
@@ -79,10 +79,11 @@ export function ProgramUsersModal({
7979
skip: !isOpen,
8080
});
8181

82-
const programUsers = data?.getAllUsers.filter(
83-
(user: User) => user.team?.cohort?.program?.name === programName
82+
const programUsers =
83+
data?.getAllUsers.filter(
84+
(user: User) => user.team?.cohort?.program?.name === programName,
8485
// || (user.team === null && programName === defaultProgram)
85-
) || [];
86+
) || [];
8687

8788
const columns = [
8889
{
@@ -91,7 +92,11 @@ export function ProgramUsersModal({
9192
Cell: ({ value }: CellProps) => (
9293
<div className="flex items-center">
9394
<span className="hidden ml-2 md:inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700">
94-
<svg className="h-full w-full text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24">
95+
<svg
96+
className="h-full w-full text-gray-300 dark:text-gray-500"
97+
fill="currentColor"
98+
viewBox="0 0 24 24"
99+
>
95100
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
96101
</svg>
97102
</span>
@@ -119,7 +124,7 @@ export function ProgramUsersModal({
119124
if (loading) {
120125
return (
121126
<div className="flex justify-center items-center h-48">
122-
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
127+
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
123128
</div>
124129
);
125130
}
@@ -152,12 +157,7 @@ export function ProgramUsersModal({
152157
};
153158

154159
return (
155-
<StyledDialog
156-
open={isOpen}
157-
onClose={onClose}
158-
maxWidth="md"
159-
fullWidth
160-
>
160+
<StyledDialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
161161
<div className="bg-white dark:bg-gray-800 rounded-t-lg">
162162
<StyledDialogTitle className="text-gray-900 dark:text-white border-b dark:border-gray-700">
163163
{programName} - Users
@@ -168,4 +168,4 @@ export function ProgramUsersModal({
168168
</div>
169169
</StyledDialog>
170170
);
171-
}
171+
}

‎src/containers/Routes.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const Adminlogin = React.lazy(() => import('../pages/Organization/AdminLogin'));
2222
const Pricing = React.lazy(() => import('../pages/Pricing'));
2323
/* istanbul ignore next */
2424
const About = React.lazy(() => import('../pages/Comingsoon'));
25+
const Community = React.lazy(() => import('../pages/Community'));
2526
/* istanbul ignore next */
2627
const Product = React.lazy(() => import('../pages/Comingsoon'));
2728
/* istanbul ignore next */
@@ -39,7 +40,7 @@ import Noredirect from '../pages/Noredirect';
3940
import RedirectHandler from '../pages/RedirectHandler';
4041
import ProtectedRoutes from '../ProtectedRoute';
4142
import RemoveTokenPage from '../utils/RemoveTokenPage';
42-
import PrivateRoute from '../utils/PrivateRoute'
43+
import PrivateRoute from '../utils/PrivateRoute';
4344
import CalendarConfirmation from '../components/CalendarConfirmation';
4445
import NotFound from '../components/NotFoundPage';
4546

@@ -48,6 +49,7 @@ function MainRoutes() {
4849
<div className="min-h-screen page-layout">
4950
<Suspense>
5051
<Routes>
52+
{/* <Route path="/community" element={<h1>Hello my son</h1>} /> */}
5153
<Route path="/*" element={<DashRoutes />} />
5254
<Route
5355
path="/"
@@ -144,6 +146,14 @@ function MainRoutes() {
144146
</Suspense>
145147
}
146148
/>
149+
<Route
150+
path="/community"
151+
element={
152+
<Suspense fallback={<Skeleton />}>
153+
<Community title={"What' happening now in community"} />
154+
</Suspense>
155+
}
156+
/>
147157
<Route
148158
path="/product"
149159
element={
@@ -164,12 +174,14 @@ function MainRoutes() {
164174
/>
165175
<Route path="/noredirect" element={<Noredirect />} />
166176
<Route path="/redirect" element={<RedirectHandler />} />
167-
<Route path="/calendar/confirm" element={
168-
<PrivateRoute>
169-
<CalendarConfirmation/>
170-
</PrivateRoute>
171-
}>
172-
</Route>
177+
<Route
178+
path="/calendar/confirm"
179+
element={
180+
<PrivateRoute>
181+
<CalendarConfirmation />
182+
</PrivateRoute>
183+
}
184+
></Route>
173185
</Route>
174186
<Route path="*" element={<NotFound />} />
175187
</Routes>

‎src/pages/Community.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import CommunityQuestions from '../components/CommunityQuestions';
3+
4+
const questionsData: any[] = [
5+
{
6+
user: 'John Doe',
7+
text: 'How do I center a div?',
8+
response: 'Use flexbox with justify-center and align-center.',
9+
},
10+
{
11+
user: 'Jane Smith',
12+
text: 'What is a hook in React?',
13+
response:
14+
'Hooks are functions that let you use state and other React features.',
15+
},
16+
];
17+
export default function Community() {
18+
return (
19+
<div className="font-serif dark:bg-dark-frame-bg flex flex-col py-8 px-5 items-center justify-evenly md:justify-evenly grow h-full w-full">
20+
<p className="text-center text-gray-400 text-sm">
21+
The System Community page is under development !!
22+
</p>
23+
<CommunityQuestions questions={questionsData} />
24+
</div>
25+
);
26+
}

0 commit comments

Comments
 (0)