Skip to content

Commit

Permalink
Merge pull request #184 from mikepsinn/develop
Browse files Browse the repository at this point in the history
Update user variables charts and add loading state
  • Loading branch information
mikepsinn authored Apr 23, 2024
2 parents 3a16446 + fa18c52 commit 625f043
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,25 +21,12 @@ export default async function UserVariableChart({ params }: UserVariableEditProp
if (!user) {
redirect(authOptions?.pages?.signIn || "/signin")
}

const response = await fetch(
`/api/dfda/userVariables?variableId=${params.variableId}&includeCharts=true`)
const userVariables = await response.json()
const userVariable = userVariables[0]

if (!userVariable) {
notFound()
}

const variableId = parseInt(params.variableId)
return (
<Shell>
<DashboardHeader
heading="UserVariable Settings"
text="Modify userVariable details."
/>
<div className="grid grid-cols-1 gap-10">
<UserVariableCharts
userVariable={userVariable}
variableId={variableId}
/>
</div>
</Shell>
Expand Down
3 changes: 2 additions & 1 deletion apps/nextjs/components/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
BsMoonStars,
BsSun,
} from "react-icons/bs"
import {FaBell, FaRegStar, FaSort, FaUserAlt} from "react-icons/fa"
import {FaBell, FaChartBar, FaRegStar, FaSort, FaUserAlt} from "react-icons/fa"
import { ImSpinner8, ImStatsBars } from "react-icons/im"
import { LuSettings } from "react-icons/lu"
import { MdDeleteForever, MdOutlineLogout } from "react-icons/md"
Expand Down Expand Up @@ -61,6 +61,7 @@ const icons = {
add: AiOutlinePlus,
reminder: FaBell,
history: BiHistory,
charts: FaChartBar,
signout: MdOutlineLogout,
calendar: BiCalendar,
sort: FaSort,
Expand Down
79 changes: 58 additions & 21 deletions apps/nextjs/components/userVariable/user-variable-charts.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
"use client"

import * as React from "react"
import { FC } from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
// TODO: Fix highcharts accessibility
// import highchartsAccessibility from "highcharts/modules/accessibility";
// if (typeof window !== undefined) {
// highchartsAccessibility(Highcharts);
// }

import {
Card,
Expand All @@ -12,40 +18,71 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { toast } from "@/components/ui/use-toast"
import { Icons } from "@/components/icons"
import { UserVariable } from "@/types/models/UserVariable";
import { useEffect, useState } from 'react';
import { Icons } from "../icons";

interface UserVariableChartsProps extends React.HTMLAttributes<HTMLFormElement> {
userVariable: UserVariable
variableId: number
}

export function UserVariableCharts({
userVariable,
className,
...props
}: UserVariableChartsProps) {
export const UserVariableCharts: FC<UserVariableChartsProps> = ({ variableId }) => {
const [userVariable, setUserVariable] = useState<UserVariable>();
const [isLoading, setIsLoading] = useState(true); // Add a loading state

useEffect(() => {
const url = `/api/dfda/userVariables?variableId=${variableId}&includeCharts=1`;

return (
setIsLoading(true); // Set loading to true when the fetch starts
fetch(url)
.then(response => response.json())
.then(userVariables => {
const userVariable = userVariables[0];
delete userVariable.charts.lineChartWithSmoothing.highchartConfig.tooltip.formatter;
delete userVariable.charts.weekdayColumnChart.highchartConfig.tooltip.formatter;
delete userVariable.charts.monthlyColumnChart.highchartConfig.tooltip.formatter;
setUserVariable(userVariable);
setIsLoading(false); // Set loading to false when the fetch completes
})
.catch(error => {
console.error('Error fetching user variables:', error);
setIsLoading(false); // Ensure loading is set to false on error as well
});

}, [variableId]);

<Card>
<CardHeader>
<CardTitle>{userVariable.name}</CardTitle>
{userVariable.description && (
<CardDescription>{userVariable.description}</CardDescription>
)}
</CardHeader>
<CardContent className="space-y-4">
return (
<Card>
<CardHeader>
<CardTitle>{userVariable?.name}</CardTitle>
{userVariable?.description && (
<CardDescription>{userVariable.description}</CardDescription>
)}
</CardHeader>
{isLoading ? (
<div className="flex justify-center items-center">
<Icons.spinner className="animate-spin text-4xl" />
</div>
) : (
<CardContent id="chart-card" className="space-y-4">
<div className="card transparent-bg highcharts-container">
<HighchartsReact
highcharts={Highcharts}
options={userVariable.charts?.lineChartWithoutSmoothing?.highchartConfig}
options={userVariable?.charts?.lineChartWithSmoothing?.highchartConfig}
/>
<HighchartsReact
highcharts={Highcharts}
options={userVariable?.charts?.monthlyColumnChart?.highchartConfig}
/>
<HighchartsReact
highcharts={Highcharts}
options={userVariable?.charts?.weekdayColumnChart?.highchartConfig}
/>
</div>
</CardContent>
<CardFooter>
</CardFooter>
</Card>
)}
<CardFooter>
</CardFooter>
</Card>
)
}
21 changes: 17 additions & 4 deletions apps/nextjs/components/userVariable/user-variable-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { UserVariableOperationsButton } from "@/components/userVariable/user-var
import { QuickMeasurementButton } from '@/components/userVariable/measurements/quick-measurement-button';
import { MeasurementButton } from '@/components/userVariable/measurement-button';
import { UserVariable } from "@/types/models/UserVariable";
import { Icons } from "../icons";

interface UserVariableItemProps {
userVariable: UserVariable;
Expand All @@ -27,7 +28,7 @@ export function UserVariableItem({ userVariable }: UserVariableItemProps) {
></div>*/}
<div>
<Link
href={`/dashboard/userVariables/${userVariable.id}`}
href={`/dashboard/userVariables/${userVariable.variableId}`}
className="font-semibold hover:underline"
>
{userVariable.name}
Expand All @@ -45,19 +46,31 @@ export function UserVariableItem({ userVariable }: UserVariableItemProps) {
</div>
) : null}*/}
</div>
<div className="flex flex-row gap-2">
<div id="variable-buttons" className="flex flex-row gap-2">
<MeasurementButton
userVariable={userVariable}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
variant="outline"
size="icon"
/>
<QuickMeasurementButton
{/* <QuickMeasurementButton
userVariable={userVariable}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
variant="outline"
size="icon"
/>
/>*/}
<Link
href={`/dashboard/userVariables/${userVariable.variableId}`}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
>
<Icons.history className="h-4 w-4" />
</Link>
<Link
href={`/dashboard/userVariables/${userVariable.variableId}/charts`}
className="flex h-8 w-8 items-center justify-center rounded-md border transition-colors hover:bg-muted"
>
<Icons.charts className="h-4 w-4" />
</Link>
<UserVariableOperationsButton
userVariable={userVariable}
/>
Expand Down
10 changes: 9 additions & 1 deletion apps/nextjs/components/userVariable/user-variable-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ type UserVariableListProps = {
export const UserVariableList: FC<UserVariableListProps> = ({ user, searchParams }) => {

const [userVariables, setUserVariables] = useState<UserVariable[]>([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
setIsLoading(true);
// Ensure searchParams is an object
const safeSearchParams = searchParams ?? {};

Expand All @@ -43,13 +45,19 @@ export const UserVariableList: FC<UserVariableListProps> = ({ user, searchParams
.then(response => response.json())
.then(userVariables => {
setUserVariables(userVariables);
setIsLoading(false);
})
.catch(error => console.error('Error fetching user variables:', error));
.catch(error => {
console.error('Error fetching user variables:', error);
setIsLoading(false); // Ensure loading is set to false even if there's an error
});

}, [user, searchParams]);

return (
<>
{isLoading ? ( <div className="flex justify-center items-center">
<Icons.spinner className="animate-spin text-4xl" /> </div>) : "" }
{userVariables?.length ? (
<div className="flex flex-col"> {/* Add Tailwind classes here */}
{userVariables.map((userVariable) => (
Expand Down

0 comments on commit 625f043

Please sign in to comment.