Skip to content

Commit 53a4023

Browse files
author
kiran1415
committed
initial commmit
1 parent 474a7a1 commit 53a4023

File tree

9 files changed

+1479
-42
lines changed

9 files changed

+1479
-42
lines changed

‎package-lock.json

Lines changed: 956 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.0",
67
"@testing-library/jest-dom": "^4.2.4",
78
"@testing-library/react": "^9.5.0",
89
"@testing-library/user-event": "^7.2.1",
10+
"firebase": "^7.23.0",
911
"react": "^16.13.1",
1012
"react-dom": "^16.13.1",
13+
"react-instagram-embed": "^1.5.0",
1114
"react-scripts": "3.4.3"
1215
},
1316
"scripts": {

‎src/App.css

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
1-
.App {
2-
text-align: center;
1+
* {
2+
margin: 0;
3+
}
4+
.app {
5+
background-color: #fafafa;
6+
37
}
48

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
99

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
10+
.app__header{
11+
position: sticky;
12+
top: 0;
13+
z-index: 1;
14+
object-fit: contain;
15+
background-color: white;
16+
padding: 20px;
17+
display: flex;
18+
margin-bottom: 30px;
19+
justify-content: space-between;
20+
border-bottom: 1px solid lightgray;
1421
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
22+
.app_signup{
1923
display: flex;
2024
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
2525
}
2626

27-
.App-link {
28-
color: #61dafb;
27+
.app__headerImage{
28+
object-fit: contain;
2929
}
30+
.app__posts{
31+
padding: 20px;
32+
display: flex;
33+
width: 100%;
34+
justify-content: center;
3035

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
3836
}
37+
38+
.app__postsRight{
39+
margin-left: 20px;
40+
}

‎src/App.js

Lines changed: 215 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,224 @@
11
import React from 'react';
22
import logo from './logo.svg';
33
import './App.css';
4+
import Post from './Post'
5+
import { useState,useEffect } from 'react';
6+
import { makeStyles } from '@material-ui/core/styles';
7+
import Modal from '@material-ui/core/Modal';
8+
import { Button, Input } from '@material-ui/core';
9+
import {auth, db} from './firebase'
10+
import ImageUpload from './ImageUpload';
11+
import InstagramEmbed from 'react-instagram-embed';
412

13+
function getModalStyle() {
14+
const top = 50;
15+
const left = 50;
16+
17+
return {
18+
top: `${top}%`,
19+
left: `${left}%`,
20+
transform: `translate(-${top}%, -${left}%)`,
21+
};
22+
}
23+
24+
const useStyles = makeStyles((theme) => ({
25+
paper: {
26+
position: 'absolute',
27+
width: 400,
28+
backgroundColor: theme.palette.background.paper,
29+
border: '2px solid #000',
30+
boxShadow: theme.shadows[5],
31+
padding: theme.spacing(2, 4, 3),
32+
},
33+
}));
534
function App() {
35+
const[openSignIn,setOpenSignIn]=useState(false);
36+
const [posts, setPosts] = useState([]);
37+
const [open,setOpen]=useState(false);
38+
const classes=useStyles();
39+
const[modalStyle]=useState(getModalStyle);
40+
const [username,setUsername]=useState('');
41+
const [email,setEmail]=useState('');
42+
const [password,setPassword]=useState('');
43+
const [user,setUser]=useState('');
44+
45+
useEffect(()=>{
46+
47+
const unSubscribe=auth.onAuthStateChanged((authUser)=>{
48+
if(authUser){
49+
console.log(authUser);
50+
setUser(authUser);
51+
}else{
52+
setUser(null);
53+
}
54+
55+
})
56+
return()=>{
57+
unSubscribe();
58+
}
59+
},[user,username]);
60+
61+
62+
useEffect(()=>{
63+
64+
db.collection('post').orderBy('timestamp','desc').onSnapshot(snapshot =>{
65+
setPosts(snapshot.docs.map(doc=>({
66+
id:doc.id,
67+
// username:doc.username,
68+
post:doc.data()
69+
})));
70+
71+
})
72+
73+
74+
},[]);
75+
76+
const signup=(event)=>{
77+
event.preventDefault();
78+
auth.createUserWithEmailAndPassword(email,password).then((authUser)=>{
79+
return authUser.user.updateProfile({
80+
displayName:username
81+
})
82+
})
83+
.catch((error)=>alert(error.messages));
84+
setOpen(false);
85+
}
86+
87+
88+
const signin=(event)=>{
89+
event.preventDefault();
90+
auth.signInWithEmailAndPassword(email,password).catch((error)=>alert(error.messages))
91+
92+
setOpenSignIn(false);
93+
}
94+
695
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
96+
<div className="app">
97+
98+
99+
100+
<Modal
101+
open={open}
102+
onClose={() => setOpen(false)}
103+
>
104+
<div style={modalStyle} className={classes.paper}>
105+
<form className="app_signup">
106+
<center>
107+
<img alt="Instagram" className="app__headerImage" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" />
108+
</center>
109+
<Input
110+
placeholder="username"
111+
type="text"
112+
value={username}
113+
onChange={(e)=>setUsername(e.target.value)}
114+
/>
115+
<Input
116+
placeholder="email"
117+
type="text"
118+
value={email}
119+
onChange={(e)=>setEmail(e.target.value)}
120+
/>
121+
<Input
122+
placeholder="password"
123+
type="password"
124+
value={password}
125+
onChange={(e)=>setPassword(e.target.value)}
126+
/>
127+
<Button onClick={signup}>Sign Up</Button>
128+
</form>
129+
</div>
130+
</Modal>
131+
132+
133+
134+
<Modal
135+
open={openSignIn}
136+
onClose={() => setOpenSignIn(false)}
137+
>
138+
<div style={modalStyle} className={classes.paper}>
139+
<form className="app_signup">
140+
<center>
141+
<img alt="Instagram" className="app__headerImage" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" />
142+
</center>
143+
144+
<Input
145+
placeholder="email"
146+
type="text"
147+
value={email}
148+
onChange={(e)=>setEmail(e.target.value)}
149+
/>
150+
<Input
151+
placeholder="password"
152+
type="password"
153+
value={password}
154+
onChange={(e)=>setPassword(e.target.value)}
155+
/>
156+
<Button onClick={signin}>Sign Up</Button>
157+
</form>
158+
</div>
159+
</Modal>
160+
161+
<div className="app__header">
162+
<img alt="Instagram" className="app__headerImage" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" />
163+
164+
{user ?(
165+
<Button onClick={()=>auth.signOut()}>Logout</Button>
166+
):(
167+
<div className="app_loginContainer">
168+
<Button onClick={() => setOpen(true)}>Sign Up</Button>
169+
<Button onClick={() => setOpenSignIn(true)}>Sign In</Button>
170+
</div>
171+
)}
172+
173+
174+
175+
</div>
176+
177+
<div className="app__posts">
178+
179+
<div className="app__postsLeft">
180+
{
181+
posts.map(({id,post}) => (
182+
<Post key={id} postId={id} user={user} username={post.username} caption={post.caption} imageUrl={post.imageUrl} />
183+
))
184+
}
185+
</div>
186+
<div className="app__postsRight">
187+
<InstagramEmbed
188+
url='https://instagr.am/p/Zw9o4/'
189+
maxWidth={320}
190+
hideCaption={false}
191+
containerTagName='div'
192+
protocol=''
193+
injectScript
194+
onLoading={() => {}}
195+
onSuccess={() => {}}
196+
onAfterRender={() => {}}
197+
onFailure={() => {}}
198+
/>
199+
</div>
200+
201+
202+
203+
</div>
204+
205+
206+
207+
208+
209+
210+
211+
{user?.displayName ?(
212+
<ImageUpload username={user.displayName} />
213+
):(
214+
<h3>Sorry You need to login</h3>
215+
)}
216+
217+
218+
219+
220+
221+
22222
</div>
23223
);
24224
}

‎src/ImageUpload.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.imageupload{
2+
display: flex;
3+
flex-direction: column;
4+
width: 60%;
5+
margin-left: auto;
6+
margin-right: auto;
7+
margin-top: 30px;
8+
margin-bottom: 10px;
9+
}
10+
11+
.imageupload__progress{
12+
width: 100%;
13+
}

0 commit comments

Comments
 (0)