Fix chart UI for Safari browser

amitsingh-007 · Jan 5, 2025 · 23c065c · 23c065c
1 parent 2fc143d
commit 23c065c
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/src/app/contexts/user-context.tsx b/src/app/contexts/user-context.tsx
@@ -15,11 +15,13 @@ import {
 type IUserContext = {
   user: User | undefined;
   setUser: Dispatch<SetStateAction<User | undefined>>;
+  isAuthLoading: boolean;
 };
 
 const UserContext = createContext<IUserContext>({
   user: undefined,
   setUser: () => {},
+  isAuthLoading: true,
 });
 
 export const UserContextProvider = ({
@@ -28,14 +30,19 @@ export const UserContextProvider = ({
   children: React.ReactNode;
 }) => {
   const [user, setUser] = useState<User>();
+  const [isAuthLoading, setIsAuthLoading] = useState(true);
 
   useEffect(() => {
     onAuthStateChange((user) => {
       setUser(user ?? undefined);
+      setIsAuthLoading(false);
     });
   }, []);
 
-  const ctx = useMemo(() => ({ user, setUser }), [user, setUser]);
+  const ctx = useMemo(
+    () => ({ user, setUser, isAuthLoading }),
+    [user, isAuthLoading]
+  );
 
   return <UserContext.Provider value={ctx}>{children}</UserContext.Provider>;
 };

diff --git a/src/app/dahsboard-graph.tsx b/src/app/dahsboard-graph.tsx
@@ -16,13 +16,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import SelectYear from '@/components/common/select-year';
 
 const chartConfig: ChartConfig = {
@@ -38,7 +31,7 @@ const currentYear = now.getFullYear();
 const DashboardGraph = () => {
   const [selectedYear, setSelectedYear] = useState(currentYear);
 
-  const { data: annualSummary = [], isInitialLoading } =
+  const { data: annualSummary = [] } =
     trpc.transaction.getAnnualSummary.useQuery({ year: selectedYear });
 
   return (
@@ -53,15 +46,18 @@ const DashboardGraph = () => {
         <SelectYear
           selectedYear={selectedYear}
           setSelectedYear={setSelectedYear}
-          isDisabled={isInitialLoading}
         />
       </CardHeader>
       <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
         <ChartContainer
           config={chartConfig}
-          className="min-h-[460px] max-h-[460px] w-full"
+          className="aspect-auto h-[460px] w-full"
         >
-          <BarChart accessibilityLayer data={annualSummary}>
+          <BarChart
+            accessibilityLayer
+            data={annualSummary}
+            margin={{ top: 24 }}
+          >
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="month"

diff --git a/src/app/dashboard-table.tsx b/src/app/dashboard-table.tsx
@@ -92,7 +92,6 @@ const DahsboardTable = () => {
         <Select
           value={selectedMonth.toString()}
           onValueChange={(newMonth) => setSelectedMonth(Number(newMonth))}
-          disabled={isInitialLoading}
         >
           <SelectTrigger className="w-[160px]">
             <SelectValue />
@@ -108,7 +107,6 @@ const DahsboardTable = () => {
         <SelectYear
           selectedYear={selectedYear}
           setSelectedYear={setSelectedYear}
-          isDisabled={isInitialLoading}
         />
       </div>
       <div className="rounded-md border mt-4">

diff --git a/src/components/common/auth-layout.tsx b/src/components/common/auth-layout.tsx
@@ -8,14 +8,20 @@ type Props = Readonly<{
 }>;
 
 const AuthLayout = ({ children }: Props) => {
-  const { user } = useUser();
+  const { user, isAuthLoading } = useUser();
+
+  if (isAuthLoading) {
+    return (
+      <div className="pt-20">
+        <Loader2 className="animate-spin mx-auto h-12 w-12" />
+      </div>
+    );
+  }
 
   return user ? (
     children
   ) : (
-    <div className="pt-20">
-      <Loader2 className="animate-spin mx-auto h-12 w-12" />
-    </div>
+    <p className="mt-20 text-center">Sign in to continue</p>
   );
 };
 

diff --git a/src/components/common/select-year.tsx b/src/components/common/select-year.tsx
@@ -9,7 +9,6 @@ import {
 interface Props {
   selectedYear: number;
   setSelectedYear: (year: number) => void;
-  isDisabled: boolean;
 }
 
 const currentYear = new Date().getFullYear();
@@ -19,12 +18,11 @@ export const YEARS = Array.from(
   (_, i) => currentYear - i
 );
 
-const SelectYear = ({ selectedYear, setSelectedYear, isDisabled }: Props) => {
+const SelectYear = ({ selectedYear, setSelectedYear }: Props) => {
   return (
     <Select
       value={selectedYear.toString()}
       onValueChange={(newYear) => setSelectedYear(Number(newYear))}
-      disabled={isDisabled}
     >
       <SelectTrigger className="w-[140px]">
         <SelectValue />