myaccount update

earthodev · Nov 14, 2024 · f0b998c · f0b998c
1 parent d77e24c
commit f0b998c
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 162 deletions.
diff --git a/apps/myaccount/myaccount-web-app/src/app/(me)/page.tsx b/apps/myaccount/myaccount-web-app/src/app/(me)/page.tsx
@@ -1,156 +1,122 @@
-import { auth, protectAuth } from "@/auth";
-import BreadCrumb from "@/components/breadcrumb";
-import { ConnectionClient } from "@/components/tables/connections-tables/client";
-import apiService from '@/service/api.service';
-import { CalendarDateRangePicker } from "@/components/date-range-picker";
-import { Button } from "@/components/ui/button";
+import { protectAuth } from "@/auth";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ActivityHistoryClient } from "@/components/tables/activity-tables/client";
-import UserService from 'service/user.service';
 import ActivityTableSection from "./activity-history-section";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import UserService from "@/service/user.service";
 
-const breadcrumbItems = [{ title: "Home", link: "/" }];
 
-async function getStatistics() {
-  const session = await auth();
-  const userService = UserService()
-  if (!session) {
-    return
-  }
+async function fetchStatistics(token: string) {
+  const userService = UserService();
 
   try {
-    const res = userService.getUserStatistics(session)
-    return res;
-  } catch (e) {
-    console.log(e);
+    return await userService.getUserStatistics(token);
+  } catch (error) {
+    console.error("Error fetching statistics:", error);
     return {
       activeAppsConnections: 0,
       activeSubscriptions: { total_count: 0 },
-      expenses: 0
+      expenses: 0,
     };
   }
 }
 
 export default async function Page() {
-  const statistics = await getStatistics();
-  const session = await protectAuth()
-  const user = session?.user;
-  if (!user) return
+  const userService = UserService();
+  const session = await protectAuth();
 
-  return (
-    <ScrollArea className="h-full">
-      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
-
-        <div className="text-center space-y-2 mb-12">
-          <div className="flex justify-center items-center">
-            <Avatar className="h-32 w-32">
-              <AvatarImage
-                src={user.photoURL ?? ""}
-                alt={user.displayName ?? ""}
-              />
-              <AvatarFallback>{(user.displayName || user.email)?.[0]?.toLocaleUpperCase()}</AvatarFallback>
-            </Avatar>
-          </div>
-          <h1 className="text-2xl font-semibold">Welcome, {user?.firstName} Inc</h1>
-          <p className="text-gray-500">Manage your info, privacy, and security to make Eartho work better for you.</p>
-        </div>
+  if (!session?.accessToken) return null;
 
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Active Apps
-              </CardTitle>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                className="h-4 w-4 text-muted-foreground"
-              >
-                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-                <circle cx="9" cy="7" r="4" />
-                <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{statistics?.activeAppsConnections || 0}</div>
-              <p className="text-xs text-muted-foreground">
-                0% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Active Subscriptions
-              </CardTitle>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                className="h-4 w-4 text-muted-foreground"
-              >
-                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-                <circle cx="9" cy="7" r="4" />
-                <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{statistics?.activeSubscriptions?.total_count || 0}</div>
-              <p className="text-xs text-muted-foreground">
-                0% from last month
-              </p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Expenses</CardTitle>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                className="h-4 w-4 text-muted-foreground"
-              >
-                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">${statistics?.expenses || 0}</div>
-              <p className="text-xs text-muted-foreground">
-                0% from last month
-              </p>
-            </CardContent>
-          </Card>
+  const [statistics, user] = await Promise.all([
+    fetchStatistics(session.accessToken),
+    userService.getUserProfile(session.accessToken),
+  ]);
 
-        </div>
+  if (!user) return null;
 
-        <div className="pt-8 pb-8">
-          <Separator />
-        </div>
+  return (
+    <ScrollArea className="h-full">
+      <div className="flex-1  p-4 md:p-8 pt-6">
+        <UserWelcomeSection user={user} />
+        <StatisticsSection statistics={statistics} />
+        <Separator className="mt-8 mb-8" />
         <ActivityTableSection />
       </div>
     </ScrollArea>
   );
 }
+
+function UserWelcomeSection({ user }: { user: any }) {
+  return (
+    <div className="text-center space-y-2 mb-12">
+      <AvatarContainer user={user} />
+      <h1 className="text-2xl font-semibold">Welcome {user?.firstName ?? "To Eartho"}</h1>
+      <p className="text-gray-500">
+        Manage your info, privacy, and security to make Eartho work better for you.
+      </p>
+    </div>
+  );
+}
+
+function AvatarContainer({ user }: { user: any }) {
+  return (
+    <div className="flex justify-center items-center">
+      <Avatar className="h-32 w-32">
+        <AvatarImage src={user.photoURL ?? ""} alt={user.displayName ?? ""} />
+        <AvatarFallback>
+          {(user.displayName || user.email)?.[0]?.toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+    </div>
+  );
+}
+
+function StatisticsSection({ statistics }: { statistics: any }) {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <StatisticCard title="Active Apps" value={statistics?.activeAppsConnections || 0} />
+      <StatisticCard title="Active Subscriptions" value={statistics?.activeSubscriptions?.total_count || 0} />
+      <StatisticCard title="Expenses" value={`$${statistics?.expenses || 0}`} />
+    </div>
+  );
+}
+
+function StatisticCard({ title, value }: { title: string; value: string | number }) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <IconPlaceholder />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        <p className="text-xs text-muted-foreground">0% from last month</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function IconPlaceholder() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className="h-4 w-4 text-muted-foreground"
+    >
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+    </svg>
+  );
+}
diff --git a/apps/myaccount/myaccount-web-app/src/app/(me)/profile/profile/profile-section.tsx b/apps/myaccount/myaccount-web-app/src/app/(me)/profile/profile/profile-section.tsx
@@ -6,16 +6,19 @@ import { ProfileForm, ProfileFormValues } from "./profile-form";
 import UserService from '@/service/user.service';
 import { toast } from '@/components/ui/use-toast';
 import ProfileFormSkeleton from './profile-loader';
+import { useSession } from 'next-auth/react';
 
 const ProfileSection = () => {
     const userSerivce = UserService();
   const [profile, setProfile] = useState<ProfileFormValues | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
+  const { data: session, update } = useSession();
+
   useEffect(() => {
     const fetchProfileData = async () => {
       setLoading(true)
-      const data = await userSerivce.getUserProfile();
+      const data = await userSerivce.getUserProfile(session?.accessToken!);
       setProfile(data);
       setLoading(false)
     };
@@ -25,8 +28,9 @@ const ProfileSection = () => {
 
   const handleUpdateProfile = async (updatedData: ProfileFormValues) => {
     try {
-      const updatedProfile = await userSerivce.updateUserProfile(updatedData);
+      const updatedProfile = await userSerivce.updateUserProfile(session?.accessToken!, updatedData);
       setProfile(updatedProfile);
+      update()
       toast({
       title: "Your profile has been updated successfully",
       description:"It may take a few minutes for the changes to appear in other services",

diff --git a/apps/myaccount/myaccount-web-app/src/app/auth/page.tsx b/apps/myaccount/myaccount-web-app/src/app/auth/page.tsx
@@ -1,31 +1,63 @@
 "use client"
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import { toast } from "@/components/ui/use-toast";
-import { signIn } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 
 export default function Page() {
-  const [loading, setLoading] = useState(false);
   const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  const { data: session, status } = useSession();
 
-  const handleLogin = async () => {
+  const handleLogin = (e: any) => {
+    e.preventDefault();
     setLoading(true);
+
     try {
-      signIn("eartho", { redirect: true, redirectTo: "/" });
+      const currentUrl = window.location.href;
+      sessionStorage.setItem("authReferrer", currentUrl);
+
+      signIn("eartho", { redirect: true, redirectTo: '/' }, { access_id: "" });
     } catch (error) {
       console.error("Login failed:", error);
       toast({
         variant: "destructive",
         title: "Uh oh! Something went wrong.",
         description: "Please contact support.",
       });
-    } finally {
-      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (window && window.sessionStorage) {
+      const errorStorageParam = sessionStorage.getItem("authError");
+      if (errorStorageParam && !searchParams?.get("error")) {
+        sessionStorage.removeItem("authError");
+        setErrorMessage(errorStorageParam);
+      }
+    }
+  }, [searchParams]);
+
+  const getErrorMessage = (error: string) => {
+    switch (error) {
+      case "CredentialsSignin":
+        return "Invalid credentials, please try again.";
+      case "OAuthAccountNotLinked":
+        return "Account already exists with another provider. Use the same account to link.";
+      case "EmailSignin":
+        return "Issue sending the email.";
+      case "Configuration":
+        return "This provider is restricted in your country.";
+      default:
+        return "Please contact support.";
     }
   };
 
@@ -48,17 +80,16 @@ export default function Page() {
         <div className="relative z-20 mt-auto">
           <blockquote className="space-y-2">
             <p className="text-lg">
-              {/* &ldquo;We replaced 37,000 lines of code with ~50 lines of @Eartho integration and can’t imagine working without it.&rdquo; */}
+              {/* Optional quote or info */}
             </p>
-            {/* <footer className="text-sm">Ilya K</footer> */}
           </blockquote>
         </div>
       </div>
       <div className="flex-1 w-full h-full p-4 bg-black ml-auto flex items-center justify-center">
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
             <h1 className="text-2xl font-semibold tracking-tight text-white">
-              Welcome to Eartho Memebers
+              Welcome to Eartho
             </h1>
             <p className="text-sm text-muted-foreground">
               Click on the button below to connect and start
@@ -67,7 +98,6 @@ export default function Page() {
           <Button
             disabled={loading}
             className="ml-auto w-full"
-            type="submit"
             onClick={handleLogin}
           >
             {loading ? (
@@ -76,6 +106,11 @@ export default function Page() {
               "Continue With Eartho account"
             )}
           </Button>
+          {errorMessage && (
+            <div className="flex justify-center items-center mt-4 text-red-500 text-sm font-medium text-center content-center">
+              {getErrorMessage(errorMessage)}
+            </div>
+          )}
           <p className="px-8 text-center text-sm text-muted-foreground">
             By clicking continue, you agree to our{' '}
             <Link