Skip to content

Commit cb89ac2

Browse files
author
Lauren Pothuru
committed
Implement frontend newsletter admin page
1 parent 6e5fb90 commit cb89ac2

2 files changed

Lines changed: 249 additions & 3 deletions

File tree

‎frontend/src/components/Admin/AdminNewsletter.tsx‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
import React from 'react';
2+
import {
3+
Button,
4+
TextField,
5+
Accordion,
6+
AccordionSummary,
7+
AccordionDetails,
8+
} from '@material-ui/core';
9+
10+
/**
11+
* AdminNewsletter - Displays a form to fill out and send a newsletter.
12+
*
13+
* @param
14+
*
15+
* @returns {ReactElement} - A Material-UI Card component displaying the contact form details
16+
*/
17+
const AdminNewsletter = () => {
18+
return (
19+
<>
20+
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
21+
<h2>Newsletter Generation</h2>
22+
<TextField
23+
label="Introduction"
24+
variant="outlined"
25+
style={{ marginBottom: '20px', width: '400px' }}
26+
/>
27+
<TextField
28+
label="Header Url"
29+
variant="outlined"
30+
style={{ marginBottom: '20px', width: '400px' }}
31+
/>
32+
<TextField
33+
label="Subject"
34+
variant="outlined"
35+
style={{ marginBottom: '20px', width: '400px' }}
36+
/>
37+
<Accordion>
38+
<AccordionSummary>Recently Released Section</AccordionSummary>
39+
40+
<AccordionDetails>
41+
<TextField
42+
label="Close to Campus Properties IDs"
43+
variant="outlined"
44+
style={{ marginBottom: '20px', width: '400px' }}
45+
/>
46+
<TextField
47+
label="Budget Friendly Properties IDs"
48+
variant="outlined"
49+
style={{ marginBottom: '20px', width: '400px' }}
50+
/>
51+
</AccordionDetails>
52+
</Accordion>
53+
54+
<Accordion>
55+
<AccordionSummary>Top Loved Properties Section</AccordionSummary>
56+
57+
<AccordionDetails>
58+
<TextField
59+
label="Highest Rated Properties IDs"
60+
variant="outlined"
61+
style={{ marginBottom: '20px', width: '400px' }}
62+
/>
63+
<TextField
64+
label="Most Reviewed Properties IDs"
65+
variant="outlined"
66+
style={{ marginBottom: '20px', width: '400px' }}
67+
/>
68+
<TextField
69+
label="Property Testimony"
70+
variant="outlined"
71+
style={{ marginBottom: '20px', width: '400px' }}
72+
/>
73+
</AccordionDetails>
74+
</Accordion>
75+
76+
<Accordion>
77+
<AccordionSummary>Advice from Upperclassmen</AccordionSummary>
78+
79+
<AccordionDetails>
80+
<TextField
81+
label="Advice from Upperclassmen"
82+
variant="outlined"
83+
style={{ marginBottom: '20px', width: '400px' }}
84+
/>
85+
<TextField
86+
label="Upperclassman Info"
87+
variant="outlined"
88+
style={{ marginBottom: '20px', width: '400px' }}
89+
/>
90+
</AccordionDetails>
91+
</Accordion>
92+
93+
<Accordion>
94+
<AccordionSummary>New Feature Spotlight</AccordionSummary>
95+
96+
<AccordionDetails>
97+
<TextField
98+
label="Image URL"
99+
variant="outlined"
100+
style={{ marginBottom: '20px', width: '400px' }}
101+
/>
102+
<TextField
103+
label="Feature Title"
104+
variant="outlined"
105+
style={{ marginBottom: '20px', width: '400px' }}
106+
/>
107+
<TextField
108+
label="Feature Description"
109+
variant="outlined"
110+
style={{ marginBottom: '20px', width: '400px' }}
111+
/>
112+
</AccordionDetails>
113+
</Accordion>
114+
115+
<Accordion>
116+
<AccordionSummary>Neighborhood Comparison Section</AccordionSummary>
117+
118+
<AccordionDetails>
119+
<TextField
120+
label="Neighborhood 1 image URL"
121+
variant="outlined"
122+
style={{ marginBottom: '20px', width: '400px' }}
123+
/>
124+
<TextField
125+
label="Neighborhood 2 image URL"
126+
variant="outlined"
127+
style={{ marginBottom: '20px', width: '400px' }}
128+
/>
129+
<TextField
130+
label="Neighborhood 1 Name"
131+
variant="outlined"
132+
style={{ marginBottom: '20px', width: '400px' }}
133+
/>
134+
<TextField
135+
label="Neighborhood 2 Name"
136+
variant="outlined"
137+
style={{ marginBottom: '20px', width: '400px' }}
138+
/>
139+
<TextField
140+
label="Neighborhood 1 Description"
141+
variant="outlined"
142+
style={{ marginBottom: '20px', width: '400px' }}
143+
/>
144+
<TextField
145+
label="Neighborhood 2 Description"
146+
variant="outlined"
147+
style={{ marginBottom: '20px', width: '400px' }}
148+
/>
149+
</AccordionDetails>
150+
</Accordion>
151+
152+
<Accordion>
153+
<AccordionSummary>Area Spotlight Section</AccordionSummary>
154+
155+
<AccordionDetails>
156+
<TextField
157+
label="Area Name"
158+
variant="outlined"
159+
style={{ marginBottom: '20px', width: '400px' }}
160+
/>
161+
<TextField
162+
label="Area Description"
163+
variant="outlined"
164+
style={{ marginBottom: '20px', width: '400px' }}
165+
/>
166+
<TextField
167+
label="Image URL"
168+
variant="outlined"
169+
style={{ marginBottom: '20px', width: '400px' }}
170+
/>
171+
<TextField
172+
label="Recently Released Property IDs"
173+
variant="outlined"
174+
style={{ marginBottom: '20px', width: '400px' }}
175+
/>
176+
<TextField
177+
label="Things to Do"
178+
variant="outlined"
179+
style={{ marginBottom: '20px', width: '400px' }}
180+
/>
181+
</AccordionDetails>
182+
</Accordion>
183+
184+
<Accordion>
185+
<AccordionSummary>Sublease Spotlight Section</AccordionSummary>
186+
<AccordionDetails>
187+
<TextField
188+
label="Image URL"
189+
variant="outlined"
190+
style={{ marginBottom: '20px', width: '400px' }}
191+
/>
192+
193+
<TextField
194+
label="Sublease Description"
195+
variant="outlined"
196+
style={{ marginBottom: '20px', width: '400px' }}
197+
/>
198+
<TextField
199+
label="Sublease Link"
200+
variant="outlined"
201+
style={{ marginBottom: '20px', width: '400px' }}
202+
/>
203+
</AccordionDetails>
204+
</Accordion>
205+
206+
<Accordion>
207+
<AccordionSummary>Reels Section</AccordionSummary>
208+
<AccordionDetails>
209+
<TextField
210+
label="Reel GIF URL"
211+
variant="outlined"
212+
style={{ marginBottom: '20px', width: '400px' }}
213+
/>
214+
<TextField
215+
label="Reel Description"
216+
variant="outlined"
217+
style={{ marginBottom: '20px', width: '400px' }}
218+
/>
219+
</AccordionDetails>
220+
</Accordion>
221+
222+
<TextField
223+
label="Single Email Address"
224+
variant="outlined"
225+
style={{ marginBottom: '20px', width: '400px' }}
226+
/>
227+
<div style={{ display: 'flex', gap: '10px' }}>
228+
<Button variant="contained" color="primary">
229+
Send to single email
230+
</Button>
231+
<Button variant="contained" color="primary">
232+
Send to all subscribers
233+
</Button>
234+
</div>
235+
</div>
236+
</>
237+
);
238+
};
239+
240+
export default AdminNewsletter;

‎frontend/src/pages/AdminPage.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import {
44
makeStyles,
55
Grid,
66
Container,
7-
List,
8-
ListItem,
9-
ListItemText,
107
AppBar,
118
Toolbar,
129
Tabs,
@@ -20,6 +17,7 @@ import {
2017
} from '../../../common/types/db-types';
2118
import { get } from '../utils/call';
2219
import AdminReviewComponent from '../components/Admin/AdminReview';
20+
import AdminNewsletter from '../components/Admin/AdminNewsletter';
2321
import { useTitle } from '../utils';
2422
import { Chart } from 'react-google-charts';
2523
import { sortReviews } from '../utils/sortReviews';
@@ -346,6 +344,12 @@ const AdminPage = (): ReactElement => {
346344
</Container>
347345
);
348346

347+
const newsletter = (
348+
<Container className={container}>
349+
<AdminNewsletter />
350+
</Container>
351+
);
352+
349353
return (
350354
<div>
351355
<AppBar position="static" elevation={0}>
@@ -358,12 +362,14 @@ const AdminPage = (): ReactElement => {
358362
>
359363
<Tab label="Reviews" value="Reviews" />
360364
<Tab label="Contact" value="Contact" />
365+
<Tab label="Newsletter" value="Newsletter" />
361366
</Tabs>
362367
</Toolbar>
363368
</AppBar>
364369

365370
{selectedTab === 'Reviews' && reviews}
366371
{selectedTab === 'Contact' && contact}
372+
{selectedTab === 'Newsletter' && newsletter}
367373
{Modals}
368374
</div>
369375
);

0 commit comments

Comments
 (0)