Skip to content

Commit 8bb1377

Browse files
AnujaKalahara99AnujaKalahara99
committed
changed frontend
1 parent bd4df82 commit 8bb1377

File tree

4 files changed

+752
-874
lines changed

4 files changed

+752
-874
lines changed

‎Frontend/src/App/Dashboard/AcceptInvite.tsx‎

Lines changed: 61 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,3 @@
1-
// import React, { useState } from "react";
2-
// import { useNavigate, useParams } from "react-router";
3-
// import ThemeToggleButton from "../components/ThemeToggleBtn";
4-
// import { useTheme } from "../ThemeProvider";
5-
6-
// const getToken = () => {
7-
// const storageKey = `sb-${
8-
// import.meta.env.VITE_SUPABASE_PROJECT_ID
9-
// }-auth-token`;
10-
// const sessionDataString = localStorage.getItem(storageKey);
11-
// const sessionData = JSON.parse(sessionDataString || "null");
12-
// console.log("getToken sessionData:", sessionData);
13-
// return sessionData?.access_token || "";
14-
// };
15-
16-
// const CollaboratePage: React.FC = () => {
17-
// const navigate = useNavigate();
18-
// const { invitationId } = useParams<{ invitationId: string }>();
19-
// const { theme } = useTheme();
20-
// const [error, setError] = useState<string | null>(null);
21-
// const [isLoading, setIsLoading] = useState(false);
22-
23-
// // Debugging: Log the invitationId
24-
// console.log("Invitation ID:", invitationId);
25-
26-
// const handleProceed = async () => {
27-
// if (!invitationId) {
28-
// setError("No invitation ID found in URL");
29-
// console.error("No invitationId provided in URL");
30-
// return;
31-
// }
32-
33-
// setIsLoading(true);
34-
// setError(null);
35-
36-
// try {
37-
// const response = await fetch(
38-
// `http://localhost:4000/codespaces/accept-invitation/${invitationId}`,
39-
// {
40-
// method: "PUT",
41-
// headers: {
42-
// "Content-Type": "application/json",
43-
// Authorization: getToken(),
44-
// },
45-
// }
46-
// );
47-
48-
// if (!response.ok) {
49-
// const errorData = await response.json();
50-
// throw new Error(errorData.message || "Failed to accept invitation");
51-
// }
52-
53-
// const data = await response.json();
54-
// console.log("API response:", data);
55-
// console.log("API response22:", data.invitation.workspace_id);
56-
57-
// navigate(data.invitation.workspace_id ? `/codeeditor/${data.invitation.workspace_id}` : "/", {
58-
// state: { invitationId },
59-
// });
60-
// } catch (err) {
61-
// setError("An error occurred while processing your request");
62-
// console.error("Error during API call:", err);
63-
// } finally {
64-
// setIsLoading(false);
65-
// }
66-
// };
67-
68-
// return (
69-
// <div
70-
// className={`flex items-center justify-center h-screen p-6 ${theme.surface}`}
71-
// >
72-
// <div
73-
// className={`w-full max-w-md rounded-lg p-8 shadow-md text-center border ${theme.surfaceSecondary} ${theme.border}`}
74-
// >
75-
// <div className="flex items-center justify-between mb-6">
76-
// <h1 className={`text-2xl font-bold ${theme.text}`}>
77-
// Ready to Collaborate?
78-
// </h1>
79-
// <ThemeToggleButton size="small" />
80-
// </div>
81-
82-
// {error && <p className={`mb-4 text-red-500`}>{error}</p>}
83-
84-
// <p className={`mb-8 ${theme.textSecondary}`}>
85-
// Click the button below to start collaborating on the codespace.
86-
// </p>
87-
88-
// <button
89-
// onClick={handleProceed}
90-
// className={`w-full px-6 py-3 bg-blue-600 text-white rounded hover:bg-blue-700 transition font-medium ${
91-
// isLoading || !invitationId ? "opacity-50 cursor-not-allowed" : ""
92-
// }`}
93-
// disabled={isLoading || !invitationId}
94-
// >
95-
// {isLoading ? "Processing..." : "Proceed to Collaborate"}
96-
// </button>
97-
// </div>
98-
// </div>
99-
// );
100-
// };
101-
102-
// export default CollaboratePage;
1031
import React, { useState, useEffect } from "react";
1042
import { useNavigate, useParams } from "react-router";
1053
import ThemeToggleButton from "../../components/ThemeToggleBtn";
@@ -166,9 +64,14 @@ const CollaboratePage: React.FC = () => {
16664
console.log("API response:", data);
16765
console.log("API response22:", data.invitation.workspace_id);
16866

169-
navigate(data.invitation.workspace_id ? `/codeeditor/${data.invitation.workspace_id}` : "/", {
170-
state: { invitationId },
171-
});
67+
navigate(
68+
data.invitation.workspace_id
69+
? `/codeeditor/${data.invitation.workspace_id}`
70+
: "/",
71+
{
72+
state: { invitationId },
73+
}
74+
);
17275
} catch (err) {
17376
setError("An error occurred while processing your request");
17477
console.error("Error during API call:", err);
@@ -177,10 +80,10 @@ const CollaboratePage: React.FC = () => {
17780
}
17881
};
17982

180-
181-
18283
return (
183-
<div className={`min-h-screen flex items-center justify-center p-4 ${theme.surface} relative overflow-hidden`}>
84+
<div
85+
className={`min-h-screen flex items-center justify-center p-4 ${theme.surface} relative overflow-hidden`}
86+
>
18487
{/* Background decoration */}
18588
<div className="absolute inset-0 opacity-5">
18689
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
@@ -189,7 +92,7 @@ const CollaboratePage: React.FC = () => {
18992

19093
<div
19194
className={`w-full max-w-lg relative z-10 transform transition-all duration-700 ease-out ${
192-
showContent ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'
95+
showContent ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
19396
}`}
19497
>
19598
{/* Main Card */}
@@ -215,17 +118,17 @@ const CollaboratePage: React.FC = () => {
215118
<div className="w-20 h-20 mx-auto mb-4 relative">
216119
<div className="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl rotate-12 opacity-20 animate-pulse"></div>
217120
<div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700 rounded-2xl flex items-center justify-center">
218-
<svg
219-
className="w-10 h-10 text-white"
220-
fill="none"
221-
stroke="currentColor"
121+
<svg
122+
className="w-10 h-10 text-white"
123+
fill="none"
124+
stroke="currentColor"
222125
viewBox="0 0 24 24"
223126
>
224-
<path
225-
strokeLinecap="round"
226-
strokeLinejoin="round"
227-
strokeWidth={2}
228-
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
127+
<path
128+
strokeLinecap="round"
129+
strokeLinejoin="round"
130+
strokeWidth={2}
131+
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
229132
/>
230133
</svg>
231134
</div>
@@ -236,31 +139,44 @@ const CollaboratePage: React.FC = () => {
236139
{error && (
237140
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
238141
<div className="flex items-center gap-2">
239-
<svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
240-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
142+
<svg
143+
className="w-5 h-5 text-red-500"
144+
fill="none"
145+
stroke="currentColor"
146+
viewBox="0 0 24 24"
147+
>
148+
<path
149+
strokeLinecap="round"
150+
strokeLinejoin="round"
151+
strokeWidth={2}
152+
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
153+
/>
241154
</svg>
242-
<p className="text-red-700 dark:text-red-300 text-sm font-medium">{error}</p>
155+
<p className="text-red-700 dark:text-red-300 text-sm font-medium">
156+
{error}
157+
</p>
243158
</div>
244159
</div>
245160
)}
246161

247162
{/* Description */}
248163
<div className="mb-8">
249164
<p className={`text-lg ${theme.textSecondary} leading-relaxed`}>
250-
You've been invited to collaborate on a codespace. Click the button below to join the workspace and start coding together.
165+
You've been invited to collaborate on a codespace. Click the
166+
button below to join the workspace and start coding together.
251167
</p>
252-
168+
253169
{invitationId && (
254170
<div className="mt-4 p-3 dark:bg-gray-800/50 rounded-lg">
255-
<p className={`text-xs ${theme.textSecondary} mb-1`}>Invitation ID:</p>
171+
<p className={`text-xs ${theme.textSecondary} mb-1`}>
172+
Invitation ID:
173+
</p>
256174
<code className={`text-sm font-mono ${theme.text} break-all`}>
257175
{invitationId}
258176
</code>
259177
</div>
260178
)}
261179
</div>
262-
263-
264180

265181
{/* Action Buttons */}
266182
<div className="space-y-4">
@@ -276,46 +192,55 @@ const CollaboratePage: React.FC = () => {
276192
active:scale-[0.98]
277193
disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none
278194
relative overflow-hidden
279-
${isLoading ? 'animate-pulse' : ''}
195+
${isLoading ? "animate-pulse" : ""}
280196
`}
281197
>
282198
{isLoading && (
283199
<div className="absolute inset-0 bg-white/20 flex items-center justify-center">
284200
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
285201
</div>
286202
)}
287-
<span className={isLoading ? 'opacity-50' : ''}>
203+
<span className={isLoading ? "opacity-50" : ""}>
288204
{isLoading ? "Processing..." : "🚀 Start Collaborating"}
289205
</span>
290206
</button>
291-
292-
293207
</div>
294208

295209
{/* Status indicator */}
296210
<div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
297211
<div className="flex items-center justify-center gap-2 text-sm">
298-
<div className={`w-2 h-2 rounded-full ${invitationId ? 'bg-green-500' : 'bg-red-500'}`}></div>
212+
<div
213+
className={`w-2 h-2 rounded-full ${
214+
invitationId ? "bg-green-500" : "bg-red-500"
215+
}`}
216+
></div>
299217
<span className={theme.textSecondary}>
300-
{invitationId ? 'Valid invitation detected' : 'No invitation found'}
218+
{invitationId
219+
? "Valid invitation detected"
220+
: "No invitation found"}
301221
</span>
302222
</div>
303223
</div>
304224
</div>
305225

306226
{/* Additional Info Card */}
307227
<div
308-
className={`mt-4 p-4 rounded-xl ${theme.surfaceSecondary} ${theme.border} border text-center transform transition-all duration-700 delay-200 ${
309-
showContent ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'
228+
className={`mt-4 p-4 rounded-xl ${theme.surfaceSecondary} ${
229+
theme.border
230+
} border text-center transform transition-all duration-700 delay-200 ${
231+
showContent
232+
? "translate-y-0 opacity-100"
233+
: "translate-y-4 opacity-0"
310234
}`}
311235
>
312236
<p className={`text-sm ${theme.textSecondary}`}>
313-
💡 <strong>Tip:</strong> Make sure you're logged in to access the collaborative workspace
237+
💡 <strong>Tip:</strong> Make sure you're logged in to access the
238+
collaborative workspace
314239
</p>
315240
</div>
316241
</div>
317242
</div>
318243
);
319244
};
320245

321-
export default CollaboratePage;
246+
export default CollaboratePage;

0 commit comments

Comments
 (0)