feat(Widgets): hide "export" if nothing to export

Fixes #242
maxpatiiuk · Jun 2, 2024 · be19067 · be19067
1 parent 0478769
commit be19067
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 27 deletions.
diff --git a/src/src/components/Charts/DoughnutChart.tsx b/src/src/components/Charts/DoughnutChart.tsx
@@ -38,6 +38,7 @@ export function DoughnutChart({
  const innerDataRef = React.useRef(innerData);
  const outerDataRef = React.useRef(outerData);
  const [loaded, handleLoaded] = useBooleanState();
+ const isEmpty = innerData.length === 0 && outerData.length === 0;
 
  React.useEffect(() => {
  if (outerData.length > 0) handleLoaded();
@@ -102,8 +103,8 @@ export function DoughnutChart({
  return (
  <WidgetContainer
  header={commonText('doughnutChart')}
- getJsonExport={getJsonExport}
- getTsvExport={getTsvExport}
+ getJsonExport={isEmpty ? undefined : getJsonExport}
+ getTsvExport={isEmpty ? undefined : getTsvExport}
  className="aspect-square"
  >
  {loaded ? (

diff --git a/src/src/components/Charts/StackedChart.tsx b/src/src/components/Charts/StackedChart.tsx
@@ -43,6 +43,7 @@ export function StackedChart({
  [durations, calendars, view],
  );
  const [loaded, handleLoaded] = useBooleanState();
+ const isEmpty = dataSets.length === 0;
  const transitionDuration = useTransitionDuration();
  React.useEffect(
  () => (dataSets.length > 0 ? handleLoaded() : undefined),
@@ -69,8 +70,8 @@ export function StackedChart({
 
  return (
  <WidgetContainer
- getJsonExport={getJsonExport}
- getTsvExport={getTsvExport}
+ getJsonExport={isEmpty ? undefined : getJsonExport}
+ getTsvExport={isEmpty ? undefined : getTsvExport}
  header={commonText('stackedChart')}
  className="aspect-[2/1]"
  >

diff --git a/src/src/components/Charts/TimeChart.tsx b/src/src/components/Charts/TimeChart.tsx
@@ -34,6 +34,7 @@ export function TimeChart({
  : getTimes(durations, mode),
  [durations, mode],
  );
+ const isEmpty = calendars.length === 0 || times === undefined;
 
  const doJsonExport = () =>
  Object.entries(times ?? {}).map(([calendarId, data]) => ({
@@ -96,8 +97,8 @@ export function TimeChart({
  <span className="-ml-2 flex-1" />
  </>
  }
- getJsonExport={doJsonExport}
- getTsvExport={doTsvExport}
+ getJsonExport={isEmpty ? undefined : doJsonExport}
+ getTsvExport={isEmpty ? undefined : doTsvExport}
  header={label}
  >
  {durations === undefined || times === undefined || mode === undefined ? (

diff --git a/src/src/components/Goals/Widget.tsx b/src/src/components/Goals/Widget.tsx
@@ -32,18 +32,18 @@ export function GoalsWidget({
  const [isEditing, setIsEditing] = React.useState(false);
  const { view: currentView } = React.useContext(CurrentViewContext)!;
 
+ const activeGoals = goals?.filter(({ view }) => view === currentView);
+ const isEmpty = activeGoals?.length === 0;
  const doJsonExport = () =>
- goals
- ?.filter(({ view }) => view === currentView)
- .map(({ calendarId, ...rest }) => ({
- calendarName:
- calendars?.find(({ id }) => id === calendarId)?.summary ?? calendarId,
- completed:
- typeof durations?.[calendarId] === 'object'
- ? computeGoal(durations[calendarId], rest.virtualCalendar)
- : 0,
- ...rest,
- })) ?? [];
+ activeGoals?.map(({ calendarId, ...rest }) => ({
+ calendarName:
+ calendars?.find(({ id }) => id === calendarId)?.summary ?? calendarId,
+ completed:
+ typeof durations?.[calendarId] === 'object'
+ ? computeGoal(durations[calendarId], rest.virtualCalendar)
+ : 0,
+ ...rest,
+ })) ?? [];
 
  const doTsvExport = () =>
  doJsonExport().map(
@@ -59,11 +59,13 @@ export function GoalsWidget({
  return (
  <WidgetContainer
  editing={[isEditing, setIsEditing]}
- getJsonExport={doJsonExport}
- getTsvExport={doTsvExport}
+ getJsonExport={isEmpty ? undefined : doJsonExport}
+ getTsvExport={isEmpty ? undefined : doTsvExport}
  header={label}
  >
- {goals === undefined || calendars === undefined ? (
+ {goals === undefined ||
+ activeGoals === undefined ||
+ calendars === undefined ? (
  commonText('loading')
  ) : isEditing ? (
  <GoalsEditor
@@ -75,7 +77,7 @@ export function GoalsWidget({
  <Goals
  calendars={calendars}
  durations={durations}
- goals={goals.filter(({ view }) => view === currentView)}
+ goals={activeGoals}
  />
  )}
  </WidgetContainer>

diff --git a/src/src/components/Widgets/GhostedEvents.tsx b/src/src/components/Widgets/GhostedEvents.tsx
@@ -18,6 +18,7 @@ export function GhostedEvents({
 }): JSX.Element {
  const [ghostedEvents, setGhostedEvents] = useStorage('ghostEvents');
  const [ghostEventShortcut] = usePref('feature', 'ghostEventShortcut');
+ const isEmpty = (ghostedEvents?.length ?? 0) === 0;
  const isDisabled = ghostEventShortcut === 'none';
  const shortcutLabel = ghostEventShortcuts.find(
  ({ value }) => value === ghostEventShortcut,
@@ -33,8 +34,8 @@ export function GhostedEvents({
  return (
  <WidgetContainer
  editing={undefined}
- getJsonExport={getJsonExport}
- getTsvExport={getTsvExport}
+ getJsonExport={isEmpty ? undefined : getJsonExport}
+ getTsvExport={isEmpty ? undefined : getTsvExport}
  header={label}
  >
  {ghostedEvents === undefined ? (

diff --git a/src/src/components/Widgets/Synonyms.tsx b/src/src/components/Widgets/Synonyms.tsx
@@ -23,6 +23,7 @@ export function Synonyms({ label }: { readonly label: string }): JSX.Element {
  const editing = React.useState<boolean>(false);
  const [isEditing] = editing;
  const calendars = React.useContext(CalendarsContext);
+ const isEmpty = (synonyms?.length ?? 0) === 0;
 
  const getJsonExport = () =>
  synonyms?.map(({ calendar, synonym }) => ({
@@ -40,8 +41,8 @@ export function Synonyms({ label }: { readonly label: string }): JSX.Element {
  return (
  <WidgetContainer
  editing={editing}
- getJsonExport={getJsonExport}
- getTsvExport={getTsvExport}
+ getJsonExport={isEmpty ? undefined : getJsonExport}
+ getTsvExport={isEmpty ? undefined : getTsvExport}
  header={label}
  >
  {Array.isArray(calendars) && Array.isArray(synonyms) ? (

diff --git a/src/src/components/Widgets/VirtualCalendars.tsx b/src/src/components/Widgets/VirtualCalendars.tsx
@@ -32,6 +32,7 @@ export function VirtualCalendars({
  const [virtualCalendars, setVirtualCalendars] =
  useStorage('virtualCalendars');
  const virtualCalendarsRef = React.useRef(virtualCalendars);
+ const isEmpty = (virtualCalendars?.length ?? 0) === 0;
 
  // Don't update the shared state until the user is done editing.
  const [localCalendars, setLocalCalendars] = React.useState<
@@ -68,8 +69,8 @@ export function VirtualCalendars({
  return (
  <WidgetContainer
  editing={[isEditing, setIsEditing]}
- getJsonExport={getJsonExport}
- getTsvExport={getTsvExport}
+ getJsonExport={isEmpty ? undefined : getJsonExport}
+ getTsvExport={isEmpty ? undefined : getTsvExport}
  header={label}
  className="relative min-h-[theme(spacing.96)]"
  >