Skip to content

Commit 3d4c2c1

Browse files
Modred14Modred14
committed
redesign pages
1 parent cb95b00 commit 3d4c2c1

15 files changed

Lines changed: 192 additions & 437 deletions

‎src/ConfirmationModal.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// File: src/ConfirmationModal.tsx
1+
// Route: not routed - modal used inside /settings
22
import React from "react";
33
import "./landing.css";
44
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
@@ -10,6 +10,7 @@ type ConfirmProps = {
1010
userPassword?: string;
1111
isLoggedIn: boolean;
1212
onDelete: (password: string) => void;
13+
isSubmitting?: boolean;
1314
};
1415

1516
const ConfirmationModal: React.FC<ConfirmProps> = ({
@@ -19,6 +20,7 @@ const ConfirmationModal: React.FC<ConfirmProps> = ({
1920
userPassword,
2021
onClose,
2122
onDelete,
23+
isSubmitting = false,
2224
}) => {
2325
const [password, setPassword] = React.useState("");
2426
if (isLoggedIn && isOpen && userPassword === "") {
@@ -53,14 +55,19 @@ const ConfirmationModal: React.FC<ConfirmProps> = ({
5355
style={{ width: "100%" }}
5456
/>
5557
<div className="sl-modal-actions">
56-
<button onClick={onClose} className="sl-btn sl-btn--ghost sl-btn--sm">
58+
<button
59+
onClick={onClose}
60+
className="sl-btn sl-btn--ghost sl-btn--sm"
61+
disabled={isSubmitting}
62+
>
5763
Cancel
5864
</button>
5965
<button
6066
onClick={() => onDelete(password)}
6167
className="sl-btn sl-btn--danger sl-btn--sm"
68+
disabled={isSubmitting}
6269
>
63-
Delete
70+
{isSubmitting ? "Deleting…" : "Delete"}
6471
</button>
6572
</div>
6673
</div>

‎src/CreateLink.tsx‎

Lines changed: 16 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// Route: /create-link
12
import React, { useRef, useEffect, useState } from "react";
23
import axios from "axios";
34
import "./style.css";
@@ -69,11 +70,21 @@ const generateUniqueId = (): string => {
6970
return uuidv4();
7071
};
7172

73+
const getStoredUser = (): User | null => {
74+
try {
75+
const stored = localStorage.getItem("user");
76+
return stored ? JSON.parse(stored) : null;
77+
} catch (error) {
78+
console.error("Error reading stored user:", error);
79+
return null;
80+
}
81+
};
82+
7283
const CreateLink: React.FC = () => {
73-
const [isLoggedIn, setIsLoggedIn] = useState(false);
74-
const [user, setUser] = useState<User | null>(null);
84+
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(() => !!getStoredUser());
85+
const [user, setUser] = useState<User | null>(() => getStoredUser());
7586
const [customDomains, setCustomDomains] = useState<Domain[]>([]);
76-
const [loading, setLoading] = useState(true);
87+
const [loading, setLoading] = useState(false);
7788
const [smallLoading, setSmallLoading] = useState(true);
7889
const [links, setLinks] = useState<LinkProps[]>([]);
7990
const [longUrl, setLongUrl] = useState("");
@@ -169,18 +180,10 @@ const CreateLink: React.FC = () => {
169180
localStorage.getItem("links") || "[]"
170181
);
171182
setLinks(storedLinks);
172-
setLoading(false);
173183
};
174184

175185
useEffect(() => {
176-
const user = localStorage.getItem("user");
177-
if (user) {
178-
setIsLoggedIn(true);
179-
const userData = JSON.parse(user);
180-
console.log(userData);
181-
fetchUserData();
182-
} else {
183-
setLoading(false);
186+
if (!isLoggedIn) {
184187
fetchLinksFromLocalStorage();
185188
}
186189
}, []);
@@ -423,34 +426,6 @@ const CreateLink: React.FC = () => {
423426
}
424427
};
425428

426-
useEffect(() => {
427-
const user = localStorage.getItem("user");
428-
if (user) {
429-
setIsLoggedIn(true);
430-
fetchUserData();
431-
} else {
432-
setLoading(false);
433-
}
434-
}, []);
435-
436-
const fetchUserData = async () => {
437-
setLoading(true);
438-
try {
439-
const storedUserData = localStorage.getItem("user");
440-
441-
if (storedUserData) {
442-
const user = JSON.parse(storedUserData);
443-
setUser(user);
444-
} else {
445-
console.error("Failed to fetch user data or no user data found");
446-
}
447-
} catch (error) {
448-
console.error("Error fetching user data:", error);
449-
} finally {
450-
setLoading(false);
451-
}
452-
};
453-
454429
const handleSignOut = () => {
455430
localStorage.removeItem("user");
456431
setIsLoggedIn(false);
@@ -1043,4 +1018,4 @@ const Text = styled.span`
10431018
font-size: 12px;
10441019
color: #888;
10451020
`;
1046-
export default CreateLink;
1021+
export default CreateLink;

‎src/Dashboard.tsx‎

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
// File: src/Dashboard.tsx
2-
import React, { useEffect, useState } from "react";
1+
// Route: /dashboard
2+
import React, { useState } from "react";
33
import "./style.css";
44
import "./landing.css";
55
import {
@@ -22,7 +22,6 @@ import {
2222
ArrowUpRightIcon,
2323
} from "@heroicons/react/24/outline";
2424
import { Link } from "react-router-dom";
25-
import Loading from "./Loading";
2625
import Footer from "./Footer";
2726

2827
interface User {
@@ -102,38 +101,19 @@ const secondaryTiles: DashTile[] = [
102101
},
103102
];
104103

105-
const Dashboard: React.FC = () => {
106-
const [isLoggedIn, setIsLoggedIn] = useState(false);
107-
const [user, setUser] = useState<User | null>(null);
108-
const [loading, setLoading] = useState(true);
109-
110-
useEffect(() => {
111-
const user = localStorage.getItem("user");
112-
if (user) {
113-
setIsLoggedIn(true);
114-
fetchUserData();
115-
} else {
116-
setLoading(false);
117-
}
118-
}, []);
119-
120-
const fetchUserData = async () => {
121-
setLoading(true);
122-
try {
123-
const storedUserData = localStorage.getItem("user");
104+
const getStoredUser = (): User | null => {
105+
try {
106+
const stored = localStorage.getItem("user");
107+
return stored ? JSON.parse(stored) : null;
108+
} catch (error) {
109+
console.error("Error reading stored user:", error);
110+
return null;
111+
}
112+
};
124113

125-
if (storedUserData) {
126-
const user = JSON.parse(storedUserData);
127-
setUser(user);
128-
} else {
129-
console.error("Failed to fetch user data or no user data found");
130-
}
131-
} catch (error) {
132-
console.error("Error fetching user data:", error);
133-
} finally {
134-
setLoading(false);
135-
}
136-
};
114+
const Dashboard: React.FC = () => {
115+
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(() => !!getStoredUser());
116+
const [user, setUser] = useState<User | null>(() => getStoredUser());
137117

138118
const handleSignOut = () => {
139119
localStorage.removeItem("user");
@@ -142,10 +122,6 @@ const Dashboard: React.FC = () => {
142122
window.location.reload();
143123
};
144124

145-
if (loading) {
146-
return <Loading />;
147-
}
148-
149125
const avatarSrc =
150126
isLoggedIn && user && user.profileImg
151127
? user.profileImg

‎src/EditLink.tsx‎

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// Route: /edit-link/:id
12
import React, { useRef, useEffect, useState } from "react";
23
import axios from "axios";
34
import "./style.css";
@@ -66,9 +67,19 @@ function classNames(...classes: string[]) {
6667
return classes.filter(Boolean).join(" ");
6768
}
6869

70+
const getStoredUser = (): User | null => {
71+
try {
72+
const stored = localStorage.getItem("user");
73+
return stored ? JSON.parse(stored) : null;
74+
} catch (error) {
75+
console.error("Error reading stored user:", error);
76+
return null;
77+
}
78+
};
79+
6980
const EditLink: React.FC = () => {
70-
const [isLoggedIn, setIsLoggedIn] = useState(false);
71-
const [user, setUser] = useState<User | null>(null);
81+
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(() => !!getStoredUser());
82+
const [user, setUser] = useState<User | null>(() => getStoredUser());
7283
const [loading, setLoading] = useState(true);
7384
const { id } = useParams<{ id: string }>();
7485
const [link, setLink] = useState<Partial<Link> | null>(null);
@@ -102,24 +113,6 @@ const EditLink: React.FC = () => {
102113
const checkDomain = removePrefix(customLink);
103114
const invalidDomainLink = checkDomain.includes("/");
104115

105-
const fetchUserData = async () => {
106-
setLoading(true);
107-
try {
108-
const storedUserData = localStorage.getItem("user");
109-
110-
if (storedUserData) {
111-
const user = JSON.parse(storedUserData);
112-
setUser(user);
113-
} else {
114-
console.error("Failed to fetch user data or no user data found");
115-
}
116-
} catch (error) {
117-
console.error("Error fetching user data:", error);
118-
} finally {
119-
setLoading(false);
120-
}
121-
};
122-
123116
useEffect(() => {
124117
if (message) {
125118
const timer = setTimeout(() => {
@@ -226,6 +219,7 @@ const uniqueId = id
226219
setInitialLink(foundLink?.customLink || "");
227220
setColor(foundLink?.qrcodeColor || "#000000");
228221
setLogo(foundLink?.qrcodeLogo || null);
222+
setLoading(false);
229223
}
230224
};
231225

@@ -438,16 +432,6 @@ const uniqueId = id
438432
}
439433
};
440434

441-
useEffect(() => {
442-
const user = localStorage.getItem("user");
443-
if (user) {
444-
setIsLoggedIn(true);
445-
fetchUserData();
446-
} else {
447-
setLoading(false);
448-
}
449-
}, []);
450-
451435
const handleSignOut = () => {
452436
localStorage.removeItem("user");
453437
setIsLoggedIn(false);
@@ -1015,4 +999,4 @@ const Text = styled.span`
1015999
color: #888;
10161000
`;
10171001

1018-
export default EditLink;
1002+
export default EditLink;

‎src/LandingPage.tsx‎

Lines changed: 13 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// File: src/LandingPage.tsx
1+
// Route: /
22
import React, { useEffect, useRef, useState } from "react";
33
import "./style.css";
44
import "./landing.css";
@@ -27,7 +27,6 @@ import {
2727
SparklesIcon,
2828
} from "@heroicons/react/24/outline";
2929
import { Link } from "react-router-dom";
30-
import Loading from "./Loading";
3130
import Footer from "./Footer";
3231

3332
interface User {
@@ -302,49 +301,27 @@ const AnimatedStat: React.FC<{ target: number; suffix?: string; prefix?: string
302301
/* Landing page */
303302
/* ---------------------------------------------------------------------- */
304303

305-
const LandingPage: React.FC = () => {
306-
const [isLoggedIn, setIsLoggedIn] = useState(false);
307-
const [user, setUser] = useState<User | null>(null);
308-
const [loading, setLoading] = useState(true);
304+
const getStoredUser = (): User | null => {
305+
try {
306+
const stored = localStorage.getItem("user");
307+
return stored ? JSON.parse(stored) : null;
308+
} catch (error) {
309+
console.error("Error reading stored user:", error);
310+
return null;
311+
}
312+
};
309313

310-
useEffect(() => {
311-
const user = localStorage.getItem("user");
312-
if (user) {
313-
setIsLoggedIn(true);
314-
fetchUserData();
315-
} else {
316-
setLoading(false);
317-
}
318-
}, []);
314+
const LandingPage: React.FC = () => {
315+
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(() => !!getStoredUser());
316+
const [user, setUser] = useState<User | null>(() => getStoredUser());
319317

320-
const fetchUserData = async () => {
321-
setLoading(true);
322-
try {
323-
const storedUserData = localStorage.getItem("user");
324-
325-
if (storedUserData) {
326-
const user = JSON.parse(storedUserData);
327-
setUser(user);
328-
} else {
329-
console.error("Failed to fetch user data or no user data found");
330-
}
331-
} catch (error) {
332-
console.error("Error fetching user data:", error);
333-
} finally {
334-
setLoading(false);
335-
}
336-
};
337318
const handleSignOut = () => {
338319
localStorage.removeItem("user");
339320
setIsLoggedIn(false);
340321
setUser(null);
341322
window.location.reload();
342323
};
343324

344-
if (loading) {
345-
return <Loading />;
346-
}
347-
348325
const avatarSrc =
349326
isLoggedIn && user && user.profileImg
350327
? user.profileImg

0 commit comments

Comments
 (0)