Skip to content

Commit 72ca886

Browse files
Sanchitbajaj02Sanchitbajaj02
authored
perf: optimize flows with verification card fix (#230)
* chore: security file remove and yarn.lock update * refactor: ui of verify page for auth/unauth * feat: add save user dispatcher at the navbar
1 parent 829788b commit 72ca886

File tree

12 files changed

+259
-226
lines changed

12 files changed

+259
-226
lines changed

‎SECURITY.md‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/app/(auth)/verify/page.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
2-
import React from "react";
2+
import { Suspense } from "react";
3+
import Loader from "@/app/loading";
34
import VerificationComponent from "@/components/pages/auth/verification";
45
import Footer from "@/components/core/footer";
56
import Image from "next/image";
@@ -14,27 +15,29 @@ export default function VerifyPage({ searchParams }: VerifyProps) {
1415
if (userId === undefined && secret === undefined) {
1516
return (
1617
<>
17-
<div className="h-screen w-full overflow-hidden">
18-
<section className="h-fit w-full max-w-2xl mx-auto mt-40 rounded-3xl p-6 flex flex-col justify-center items-center gap-8 bg-white/20 backdrop-blur-md ">
19-
<div className="flex flex-col gap-3 items-center">
20-
<Image src={"/assets/logo.png"} alt="logo" height={60} width={60} />
21-
<h3 className="text-center font-semibold text-xl">
22-
Please check your inbox and{" "}
18+
<section className="max-w-screen-md mx-auto h-screen flex justify-center items-center">
19+
<div className="card">
20+
<div className="flex flex-col gap-4 items-center ">
21+
<Image src={"/assets/logo.png"} alt="logo" height={80} width={80} />
22+
<h1 className="text-xl md:text-2xl mb-4 text-center font-bold text-secondary dark:text-white">
23+
Please check your inbox/spam and{" "}
2324
<span className="text-primary-light">verify your account</span>.
24-
</h3>
25+
</h1>
26+
<ButtonLong href="https://mail.google.com/mail/" size="normal" newTab>
27+
Open your email
28+
</ButtonLong>
2529
</div>
26-
<ButtonLong href="https://mail.google.com/mail/" size="small">
27-
Open Mail
28-
</ButtonLong>
29-
</section>
30-
</div>
30+
</div>
31+
</section>
3132
<Footer isFixed />
3233
</>
3334
);
3435
}
3536
return (
3637
<>
37-
<VerificationComponent userId={String(userId)} secret={String(secret)} />
38+
<Suspense fallback={<Loader />}>
39+
<VerificationComponent userId={String(userId)} secret={String(secret)} />
40+
</Suspense>
3841
<Footer isFixed />
3942
</>
4043
);

‎src/components/core/comment/index.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ThumbsUp, ThumbsDown, Repeat } from "react-feather"
2-
import Image from "next/image"
1+
import { ThumbsUp, ThumbsDown, Repeat } from "react-feather";
2+
import Image from "next/image";
33

44
type propType = {
5-
comment: string
6-
}
5+
comment: string;
6+
};
77

88
export default function Comment(props: propType) {
99
return (
@@ -27,9 +27,7 @@ export default function Comment(props: propType) {
2727
<p className="text-md mb-4">{props.comment}</p>
2828
</a>
2929
<div className="flex justify-around">
30-
<article
31-
className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary"
32-
>
30+
<article className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary">
3331
<ThumbsUp size={22} />
3432
</article>
3533

@@ -38,11 +36,9 @@ export default function Comment(props: propType) {
3836
</article>
3937

4038
<article className="flex flex-row gap-3 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-white hover:text-primary">
41-
<Repeat size={22} orientation={'vertical'} />
39+
<Repeat size={22} orientation={"vertical"} />
4240
</article>
43-
44-
4541
</div>
4642
</div>
47-
)
48-
}
43+
);
44+
}

‎src/components/core/navbar/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import ThemeButton from "@/components/core/themeButton";
99

1010
import { parseCookies } from "nookies";
1111

12-
import { logoutUser } from "@/backend/auth.api";
12+
import { logoutUser, getCurrentUser } from "@/backend/auth.api";
1313
import { getAllPosts } from "@/backend/posts.api";
1414
import { getBookmarks } from "@/backend/bookmarks.api";
1515

16-
import { logUserOut } from "@/redux/reducers/authReducer";
16+
import { logUserOut, saveUser } from "@/redux/reducers/authReducer";
1717
import { getPosts } from "@/redux/reducers/postsReducer";
1818
import { saveBookmarkToStore } from "@/redux/reducers/bookmarkReducer";
1919

@@ -36,6 +36,13 @@ const Navbar = () => {
3636
};
3737

3838
useEffect(() => {
39+
getCurrentUser()
40+
.then((currUser) => {
41+
console.log(currUser);
42+
dispatch(saveUser(currUser));
43+
})
44+
.catch((err) => console.log(err));
45+
3946
const timeoutId = setTimeout(() => {
4047
getAllPosts()
4148
.then((posts) => {

‎src/components/core/posts/SinglePost.tsx‎

Lines changed: 63 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { saveBookmarkToStore } from "@/redux/reducers/bookmarkReducer";
1111
import { toastify } from "@/helper/toastify";
1212
import { addComment } from "@/backend/posts.api";
1313
import { getUserDetails } from "@/backend/auth.api";
14-
import { useCallback, useEffect, useState,MouseEvent } from "react";
14+
import { useCallback, useEffect, useState, MouseEvent } from "react";
1515
import { UserBookMarkType, FormatOnType } from "@/types/index";
1616
import isCtrlEnter from "@/helper/isCtrlEnter";
1717

@@ -148,35 +148,38 @@ export default function SinglePost({
148148
fetchUserDetails();
149149
}, [fetchUserDetails]);
150150

151-
const handleClick = (e:MouseEvent<HTMLDivElement | HTMLSpanElement>)=>{
151+
const handleClick = (e: MouseEvent<HTMLDivElement | HTMLSpanElement>) => {
152152
const element = e.target as HTMLDivElement | HTMLSpanElement;
153-
const spanElement = element.querySelector('span');
154-
let currentSelectedElement:HTMLSpanElement | HTMLDivElement | null = null;
155-
if(spanElement){
153+
const spanElement = element.querySelector("span");
154+
let currentSelectedElement: HTMLSpanElement | HTMLDivElement | null = null;
155+
if (spanElement) {
156156
currentSelectedElement = spanElement;
157-
}else{
157+
} else {
158158
currentSelectedElement = element;
159159
}
160-
if(currentSelectedElement && currentSelectedElement.textContent){
160+
if (currentSelectedElement && currentSelectedElement.textContent) {
161161
const prevValue = currentSelectedElement.textContent;
162-
navigator.clipboard.writeText(currentSelectedElement.textContent).then(()=>{
163-
if(currentSelectedElement){
164-
currentSelectedElement.textContent = 'Copied';
165-
currentSelectedElement.classList.remove('bg-slate-950/[0.4]');
166-
currentSelectedElement.classList.add('bg-black');
167-
setTimeout(()=>{
168-
if(currentSelectedElement){
169-
currentSelectedElement.textContent = prevValue;
170-
currentSelectedElement.classList.remove('bg-black');
171-
currentSelectedElement.classList.add('bg-slate-950/[0.4]');
172-
}
173-
},1000);
174-
}
175-
}).catch(console.log)
162+
navigator.clipboard
163+
.writeText(currentSelectedElement.textContent)
164+
.then(() => {
165+
if (currentSelectedElement) {
166+
currentSelectedElement.textContent = "Copied";
167+
currentSelectedElement.classList.remove("bg-slate-950/[0.4]");
168+
currentSelectedElement.classList.add("bg-black");
169+
setTimeout(() => {
170+
if (currentSelectedElement) {
171+
currentSelectedElement.textContent = prevValue;
172+
currentSelectedElement.classList.remove("bg-black");
173+
currentSelectedElement.classList.add("bg-slate-950/[0.4]");
174+
}
175+
}, 1000);
176+
}
177+
})
178+
.catch(console.log);
176179
}
177-
178-
}
179-
const colors = singlePost?.colors && typeof singlePost?.colors ==='string' && JSON.parse(singlePost.colors)
180+
};
181+
const colors =
182+
singlePost?.colors && typeof singlePost?.colors === "string" && JSON.parse(singlePost.colors);
180183

181184
return (
182185
<div
@@ -224,7 +227,7 @@ export default function SinglePost({
224227
) : null}
225228
</Link>
226229

227-
{colors && Object.keys(colors).length>0? (
230+
{colors && Object.keys(colors).length > 0 ? (
228231
<div className="my-2 flex flex-row justify-between items-center w-full">
229232
{/* {JSON.parse(singlePost.colors).map((color: string, index: number) => {
230233
return (
@@ -240,32 +243,51 @@ export default function SinglePost({
240243
})} */}
241244
<div className="w-full h-[200px] bg-tranparent mx-auto flex mb-3.5 gap-1">
242245
<div
243-
className="cursor-pointer w-full flex justify-center items-center group"
244-
style={{backgroundColor:typeof colors.color01 === 'string' && colors.color01 || ''}}
245-
onClick={handleClick}
246+
className="cursor-pointer w-full flex justify-center items-center group"
247+
style={{
248+
backgroundColor: (typeof colors.color01 === "string" && colors.color01) || "",
249+
}}
250+
onClick={handleClick}
246251
>
247-
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110" onClick={handleClick}>{colors.color01}</span>
252+
<span
253+
className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110"
254+
onClick={handleClick}
255+
>
256+
{colors.color01}
257+
</span>
248258
</div>
249259
<div
250-
className="cursor-pointer w-full flex justify-center items-center group "
251-
style={{backgroundColor:typeof colors.color02 === 'string' && colors.color02 || ''}}
252-
onClick={handleClick}
260+
className="cursor-pointer w-full flex justify-center items-center group "
261+
style={{
262+
backgroundColor: (typeof colors.color02 === "string" && colors.color02) || "",
263+
}}
264+
onClick={handleClick}
253265
>
254-
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color02}</span>
266+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">
267+
{colors.color02}
268+
</span>
255269
</div>
256270
<div
257-
className="cursor-pointer w-full flex justify-center items-center group gap-2"
258-
style={{backgroundColor:typeof colors.color03 === 'string' && colors.color03 || ''}}
259-
onClick={handleClick}
271+
className="cursor-pointer w-full flex justify-center items-center group gap-2"
272+
style={{
273+
backgroundColor: (typeof colors.color03 === "string" && colors.color03) || "",
274+
}}
275+
onClick={handleClick}
260276
>
261-
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color03}</span>
277+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">
278+
{colors.color03}
279+
</span>
262280
</div>
263281
<div
264-
className="cursor-pointer w-full flex justify-center items-center group"
265-
style={{backgroundColor:typeof colors.color04 === 'string' && colors.color04 || ''}}
266-
onClick={handleClick}
282+
className="cursor-pointer w-full flex justify-center items-center group"
283+
style={{
284+
backgroundColor: (typeof colors.color04 === "string" && colors.color04) || "",
285+
}}
286+
onClick={handleClick}
267287
>
268-
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">{colors.color04}</span>
288+
<span className="bg-slate-950/[0.4] text-xs px-0.5 opacity-0 transition ease-out duration-300 group-hover:opacity-100 group-hover:ease-in group-hover:scale-110">
289+
{colors.color04}
290+
</span>
269291
</div>
270292
</div>
271293
</div>

‎src/components/core/posts/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { addLikesToAPost } from "@/redux/reducers/postsReducer";
88

99
import { PostInstanceType } from "@/types/index.d";
1010

11-
import PostSkeleton from "../../pages/feed/loading"
11+
import PostSkeleton from "../../pages/feed/loading";
1212

1313
// Api
1414
// import { getAllPosts, likeTweet } from "@/backend/posts.api";
@@ -55,7 +55,11 @@ export default function Posts() {
5555
}
5656

5757
if (postState.loading) {
58-
return <h1 className="text-white text-2xl text-center"><PostSkeleton /></h1>;
58+
return (
59+
<h1 className="text-white text-2xl text-center">
60+
<PostSkeleton />
61+
</h1>
62+
);
5963
}
6064

6165
if (postState.error) {

‎src/components/pages/auth/verification/index.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { toastify } from "@/helper/toastify";
66
import { ButtonLong } from "@/components/core/buttons";
77
import Loader from "@/app/loading";
88
import { setCookie } from "nookies";
9+
import Image from "next/image";
910

1011
interface Verification {
1112
userId: string;
@@ -21,7 +22,7 @@ export default function VerificationComponent({ userId, secret }: Verification)
2122
.then((resp) => {
2223
if (resp.status) {
2324
setVerified(resp.status);
24-
setCookie(null,'isVerified', 'true')
25+
setCookie(null, "isVerified", "true");
2526
}
2627
})
2728
.catch((err) => {
@@ -33,17 +34,15 @@ export default function VerificationComponent({ userId, secret }: Verification)
3334

3435
return (
3536
<>
36-
<section className="max-w-screen-sm mx-auto h-screen flex justify-center items-center">
37+
<section className="max-w-screen-md mx-auto h-screen flex justify-center items-center">
3738
<div className="card">
38-
<h1 className="text-xl md:text-3xl mb-8 text-center font-bold text-secondary dark:text-white">
39-
You are verified 👏
40-
</h1>
41-
{/* <p className="text-base md:text-xl text-center font-normal text-secondary-light dark:text-gray-50">
42-
Register and be a part of the amazing community
43-
</p> */}
44-
<div className="text-center">
39+
<div className="flex flex-col gap-4 items-center ">
40+
<Image src={"/assets/logo.png"} alt="logo" height={80} width={80} />
41+
<h1 className="text-xl md:text-2xl mb-4 text-center font-bold text-secondary dark:text-white">
42+
Congratulation!! You are verified 👏
43+
</h1>
4544
{isVerified ? (
46-
<ButtonLong href="/feed" size="big">
45+
<ButtonLong href="/feed" size="normal">
4746
Click to join community
4847
</ButtonLong>
4948
) : (

‎src/components/pages/feed/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import { getCurrentUser } from "@/backend/auth.api";
1414
import { useRouter } from "next/navigation";
1515

1616
const Feed = () => {
17-
const router = useRouter()
17+
const router = useRouter();
1818
const [user, setUser] = useState({
19-
emailVerification: undefined
19+
emailVerification: undefined,
2020
});
2121
const cookies = parseCookies();
2222
const userIdFromCookies: string = cookies["accountId"];
@@ -28,8 +28,8 @@ const Feed = () => {
2828
})
2929
.catch(console.log);
3030
}, []);
31-
if(user.emailVerification === false){
32-
router.push('/verify')
31+
if (user.emailVerification === false) {
32+
router.push("/verify");
3333
}
3434

3535
return (

0 commit comments

Comments
 (0)