Skip to content

Commit 469b78c

Browse files
committed
likes are visible now
still need to rerender on like
1 parent aa18df3 commit 469b78c

File tree

4 files changed

+58
-32
lines changed

4 files changed

+58
-32
lines changed

firebase-project/src/assets/css/App.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
.post-text {
131131
text-align: left;
132132
margin-top: 1px;
133-
width: 300px;
133+
width: 320px;
134134
}
135135

136136
.post-date {

firebase-project/src/config/firebase.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@ import { getFirestore } from 'firebase/firestore'
77

88
// Your web app's Firebase configuration
99
const config = {
10-
apiKey: import.meta.env.VITE_API_KEY,
10+
apiKey: "AIzaSyBWj13euEzPrlI5C5N5wNe7K6gU9OCvFZI",
1111

12-
authDomain: import.meta.env.VITE_AUTH_DOMAIN,
12+
authDomain: "swagproject-a234b.firebaseapp.com",
1313

14-
projectId: import.meta.env.VITE_PROJECT_ID,
14+
projectId: "swagproject-a234b",
1515

16-
storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
16+
storageBucket: "swagproject-a234b.appspot.com",
1717

18-
messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
18+
messagingSenderId: "527479092457",
1919

20-
appId: import.meta.env.VITE_APP_ID,
20+
appId: "1:527479092457:web:b5ba9ae3e3804d9964ec78"
2121

22-
measurementId: import.meta.env.VITE_MEASUREMENT_ID,
22+
23+
// measurementId: import.meta.env.VITE_MEASUREMENT_ID,
2324
};
2425

2526
// Initialize Firebase

firebase-project/src/pages/Home.tsx

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { db } from '../config/firebase'
33
import { app_context_type, AppContext } from '../App'
44
import { getDocs, addDoc, collection } from 'firebase/firestore'
55
import { useForm, FieldValues } from 'react-hook-form'
6+
import { useNavigate } from 'react-router-dom'
67

78
interface i_post_data {
89
uid: string;
910
pid: string;
1011
post: string;
1112
user: string;
13+
likes: number;
1214
}
1315

1416
const Home = () => {
@@ -17,9 +19,6 @@ const Home = () => {
1719
const [ posts_state, set_posts_state ] = useState<i_post_data[] | null>(null);
1820
const [ made_post, set_made_post ] = useState('');
1921

20-
const posts = collection(db, 'posts');
21-
const likes = collection(db, 'likes');
22-
2322
/*
2423
const do_db = () => {
2524
const docs = getDocs(posts);
@@ -59,18 +58,25 @@ const Home = () => {
5958
return `${curr_uid}${built_pid}`;
6059
}
6160
*/
61+
const nav = useNavigate();
6262
const handle_click = async (data: FieldValues) => {
63-
await addDoc(posts, {
64-
uid: user?.uid,
65-
pid: user?.uid,
66-
post: data?.post,
67-
user: user?.displayName,
68-
});
69-
70-
set_made_post(data?.post);
63+
if(!user) {
64+
nav('/login');
65+
} else {
66+
const posts = collection(db, 'posts');
67+
await addDoc(posts, {
68+
uid: user?.uid,
69+
pid: user?.uid,
70+
post: data?.post,
71+
user: user?.displayName,
72+
});
73+
74+
set_made_post(data?.post);
75+
}
7176
};
7277

7378
const handle_like = (pid: string) => {
79+
const likes = collection(db, 'likes');
7480
addDoc(likes, {
7581
user_id: user?.uid,
7682
post_id: pid,
@@ -79,24 +85,39 @@ const Home = () => {
7985

8086
const { register, handleSubmit } = useForm({});
8187

82-
8388
useEffect(() => {
84-
//set_posts_state(null); //take this out so it doesn't visbly refresh
85-
//do_db();
89+
const likes = collection(db, 'likes');
90+
const get_like_cnt = async (tmp_pid: string): Promise<number> => {
91+
let cnt = 0;
92+
93+
const likes_docs = await getDocs(likes);
94+
likes_docs.docs.forEach((value) => {
95+
if(value.get('post_id') === tmp_pid) {
96+
//console.log('it hit');
97+
cnt++;
98+
}
99+
});
100+
101+
return cnt
102+
};
86103

104+
const posts = collection(db, 'posts');
105+
console.log('IS READING!');
87106
const docs = getDocs(posts);
88107

89108
const holder: i_post_data[] = [];
90109
docs.then((data) => {
91110
data.docs.forEach((val) => {
92-
holder.push({post: val.get('post'), user: val.get('user'), uid: val.get('uid'), pid: val.get('pid')});
93-
});
111+
const tmp_pid = val.get('pid');
112+
get_like_cnt(tmp_pid).then((cnt) => {
113+
holder.push({post: val.get('post'), user: val.get('user'), uid: val.get('uid'), pid: val.get('pid'), likes: cnt});
114+
set_posts_state(holder);
115+
});
116+
});
94117
}).catch((err) => {
95118
console.log(err);
96-
}).finally(() => {
97-
set_posts_state(holder);
98-
});
99-
}, [made_post, posts]);
119+
})
120+
}, [made_post]);
100121

101122
return (
102123
<>
@@ -114,7 +135,7 @@ const Home = () => {
114135
<div className="post-block" key={Math.random()}>
115136
<h3 className="post-user">@{val.user}</h3>
116137
<p className="post-date">(11/04/23)</p>
117-
<button onClick={() => handle_like(val.pid)} className="post-like-btn">🔥</button>
138+
<button onClick={() => handle_like(val.pid)} className="post-like-btn">🔥{val.likes}</button>
118139
<button className="post-dislike-btn">💩</button>
119140
<p key={Math.random()} className="post-text">{val.post}</p>
120141

@@ -154,11 +175,12 @@ const Home = () => {
154175

155176
<div className="post-form-container">
156177
<form onSubmit={handleSubmit(handle_click)}>
157-
<input className="post-form-input" type="text" placeholder="What's on your mind?" {...register('post')} />
178+
<input className="post-form-input" type="text" placeholder="What's on your mind?" {...register('post')} onKeyDown={(e) => {
179+
if(e.key === 'Enter')
180+
e.currentTarget.value = '';
181+
}} />
158182
<button className="post-form-submit" type="submit">post</button>
159183
</form>
160-
161-
162184
</div>
163185
</>
164186
)

firebase-project/src/pages/Profile.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import { useContext } from 'react'
22
import { signOut } from 'firebase/auth'
33
import { app_context_type, AppContext } from '../App'
44
import { auth } from '../config/firebase'
5+
import { useNavigate } from 'react-router-dom'
56

67
const Profile = () => {
78
const { user } = useContext(AppContext) as app_context_type;
9+
const nav = useNavigate();
810

911
const sign_out = async () => {
1012
await signOut(auth);
13+
nav('/');
1114
};
1215

1316
if(!user) {

0 commit comments

Comments
 (0)