Skip to content

Commit 2b12da0

Browse files
pranjals149pranjals149
committed
Final
1 parent 2b452fe commit 2b12da0

33 files changed

+55954
-10436
lines changed

‎package-lock.json

+42,815
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,18 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.3",
7+
"@material-ui/icons": "^4.11.2",
68
"@testing-library/jest-dom": "^5.11.4",
79
"@testing-library/react": "^11.1.0",
810
"@testing-library/user-event": "^12.1.10",
11+
"clsx": "^1.1.1",
12+
"firebase": "^8.3.0",
913
"react": "^17.0.1",
1014
"react-dom": "^17.0.1",
15+
"react-router-dom": "^5.2.0",
1116
"react-scripts": "4.0.2",
17+
"uuid": "^3.4.0",
1218
"web-vitals": "^1.0.1"
1319
},
1420
"scripts": {

‎src/App.css

-38
Original file line numberDiff line numberDiff line change
@@ -1,38 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎src/App.js

+77-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,85 @@
1-
import logo from './logo.svg';
21
import './App.css';
2+
import { Drawer, JoinedClasses, Login, Main } from './Components';
3+
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
4+
import { IsUserRedirect, ProtectedRoute } from './Components/routes/Routes';
5+
import { useLocalContext } from './context/context';
6+
import { useState } from 'react';
7+
import { useEffect } from 'react';
8+
import db from './lib/firebase';
39

410
function App() {
11+
const { loggedInMail } = useLocalContext()
12+
13+
const [createdRooms, setCreatedRooms] = useState([])
14+
const [joinedRooms, setJoinedRooms] = useState([])
15+
16+
useEffect(() => {
17+
if (loggedInMail) {
18+
let unsubscribe = db.collection('CreatedRooms').doc(loggedInMail).collection('rooms').onSnapshot((snapshot) => {
19+
setCreatedRooms(snapshot.docs.map((doc) => doc.data()))
20+
})
21+
return () => unsubscribe()
22+
}
23+
}, [loggedInMail])
24+
25+
useEffect(() => {
26+
if (loggedInMail) {
27+
let unsubscribe = db.collection('JoinedRooms').doc(loggedInMail).collection('rooms').onSnapshot((snapshot) => {
28+
setJoinedRooms(snapshot.docs.map((doc) => doc.data().joinedData))
29+
})
30+
31+
return () => unsubscribe();
32+
}
33+
}, [loggedInMail])
34+
535
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
36+
<Router>
37+
<Switch>
38+
{
39+
createdRooms.map((item, index) => (
40+
<Route key={index} exact path={`/${item.id}`}>
41+
<Drawer />
42+
<Main classData={item} />
43+
</Route>
44+
))
45+
}
46+
47+
{
48+
joinedRooms.map((item, index) => (
49+
<Route key={index} exact path={`/${item.id}`}>
50+
<Drawer />
51+
<Main classData={item} />
52+
</Route>
53+
))
54+
}
55+
56+
<IsUserRedirect
57+
user={loggedInMail}
58+
loggedInPath='/'
59+
path='/signin' exact
60+
>
61+
<Login />
62+
</IsUserRedirect>
63+
64+
<ProtectedRoute
65+
user={loggedInMail}
66+
path='/' exact
1767
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
68+
<Drawer />
69+
70+
<ol className='joined'>
71+
{createdRooms.map((item) => (
72+
<JoinedClasses classData={item} />
73+
))}
74+
75+
{joinedRooms.map((item) => (
76+
<JoinedClasses classData={item} />
77+
))}
78+
</ol>
79+
80+
</ProtectedRoute>
81+
</Switch>
82+
</Router>
2283
);
2384
}
2485

‎src/App.test.js

-8
This file was deleted.

‎src/Components/Announcement/Announcement.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.amt {
2+
background-color: #fff;
3+
border: 0.0625rem solid #dadce0;
4+
-webkit-border-radius: 0.5rem;
5+
border-radius: 0.5rem;
6+
overflow: hidden;
7+
margin-bottom: 1.5rem;
8+
}
9+
.amt__top {
10+
display: flex;
11+
align-items: center;
12+
}
13+
.amt__top > * {
14+
margin-left: 10px;
15+
}
16+
.amt__Cnt {
17+
padding: 0.5rem 0;
18+
}
19+
.amt__txt {
20+
margin: 10px 15px;
21+
font-size: 18px;
22+
font-weight: 600;
23+
}
24+
.amt__img {
25+
height: 200px;
26+
border-radius: 10px;
27+
margin-left: 10px;
28+
}
29+
30+
.amt__content {
31+
margin: 10px 15px;
32+
font-size: 14px;
33+
text-decoration: underline;
34+
}

‎src/Components/Announcement/Announcement.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Avatar } from '@material-ui/core'
2+
import React, { useEffect, useState } from 'react'
3+
import { useLocalContext } from '../../context/context'
4+
import db from '../../lib/firebase'
5+
import firebase from 'firebase'
6+
7+
import './Announcement.css'
8+
9+
const Announcement = ({ classData }) => {
10+
11+
const { loggedInUser } = useLocalContext()
12+
13+
const [announcement, setAnnouncement] = useState([])
14+
15+
useEffect(() => {
16+
if (classData) {
17+
let unsubscribe = db
18+
.collection('announcements')
19+
.doc('rooms')
20+
.collection(classData.id)
21+
.onSnapshot((snapshot) => {
22+
setAnnouncement(snapshot.docs.map((doc) => doc.data()))
23+
})
24+
return () => unsubscribe()
25+
}
26+
}, [classData])
27+
28+
return (
29+
<div>
30+
{
31+
announcement.map((item) => (
32+
<div className='amt'>
33+
{console.log(item.timstamp)}
34+
<div className="amt__Cnt">
35+
<div className="amt__top">
36+
<Avatar src="https://image.freepik.com/free-vector/public-approval-concept-with-character_23-2148395692.jpg" />
37+
38+
<div style={{
39+
fontSize: "15px",
40+
fontWeight: "600"
41+
}}>
42+
{item.sender}
43+
</div>
44+
45+
</div>
46+
<p className="amt__txt">
47+
{item.text}
48+
</p>
49+
50+
<p className='amt__content'>
51+
Content -
52+
</p>
53+
54+
<img src={item?.imageUrl} alt={item.text} className="amt__img" />
55+
56+
</div>
57+
</div>
58+
))
59+
}
60+
</div>
61+
)
62+
}
63+
64+
export default Announcement

‎src/Components/CreateClass/CreateClass.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
2+
.class__title {
3+
font-family: "Open Sans", Roboto, Arial, sans-serif;
4+
font-size: 16px;
5+
font-weight: 700;
6+
letter-spacing: 0.1px;
7+
line-height: 24px;
8+
flex-grow: 1;
9+
flex-shrink: 1;
10+
margin: 18px 24px 16px 24px;
11+
min-width: 0;
12+
}
13+
.class__content {
14+
padding-top: 0;
15+
margin-top: 0;
16+
font-family: "Roboto";
17+
margin-left: 10px;
18+
}
19+
.class__link {
20+
color: #4285f4;
21+
text-decoration: none;
22+
cursor: pointer;
23+
margin-right: 3px;
24+
}
25+
.class__text {
26+
/* display: flex; */
27+
margin-bottom: 10px;
28+
}
29+
.class__link2 {
30+
color: #4285f4;
31+
text-decoration: none;
32+
cursor: pointer;
33+
margin-left: 3px;
34+
}
35+
36+
.class__checkboxWrapper {
37+
background-color: #f5f5f5;
38+
display: flex;
39+
margin-top: 1.5rem;
40+
overflow: hidden;
41+
padding: 1rem;
42+
}
43+
.class__checkboxWrapper > p {
44+
font-family: "Roboto";
45+
margin-left: 10px;
46+
}
47+
.form__input {
48+
margin-bottom: 10px !important;
49+
width: 70vw;
50+
}
51+
.form__inputs:last-of-type {
52+
margin-bottom: 40px;
53+
}
54+
.form__inputs {
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: center;
58+
align-items: center;
59+
margin: 20px;
60+
}
61+
62+
.MuiFilledInput-root {
63+
background-color: rgba(0, 0, 0, 0.04) !important;
64+
}
65+
66+
@media only screen and (min-width: 842px) {
67+
.form__input {
68+
width: 50vw !important;
69+
}
70+
}
71+
72+
.class__p {
73+
margin: 18px 24px 16px 24px;
74+
color: red;
75+
}

0 commit comments

Comments
 (0)