refactor: Dashboard context

[MoranGoz]

Description

screenshots

[AvivAbachi]

you need fix the stories so it build

• DayTimeChart.stories.tsx
• TimeChart.stories.tsx
• WorstLinesChart.stories.tsx

if you need help, feel free to ask me

[AvivAbachi]

maybe we can simplify state?

  const [allLinesChartsIsLoading, setAllLinesChartsIsLoading] = useState({
    loading: false,
    empty: false,
  })

or

type ErrorItem = false | 'loading' | 'error'
const [worstLineIsLoading, setWorstLineIsLoading] = useState<ErrorItem>(false)

or

type ErrorItem = { name: string; state: false | 'loading' | 'error' }
const [errorList, setErrorList] = useState<ErrorItem[]>([])

[NoamGaash]

First - I'd like to emphasise that I think the code is great as is - you've done a great job.
following @AvivAbachi's suggestions, here's some ideas that I have. It's up to you - you're the owner :)

First, if we'll use useQuery, it can make our life easier using the useIsFetching:

https://tanstack.com/query/latest/docs/framework/react/reference/useIsFetching

Second idea - you can use one variable for the state. I disagree with Aviv regarding the idea to use array - I believe arrays should be used when ordering matters, and I don't feel like that's the case. Here's my suggestion draft -

  const [statuses, setStatuses] = useState<
      'worstLiteChart' | 'otherChart' | 'theThirdChart' | ..., // so on
     'loading' | 'loaded-empty' | 'loaded' | 'error'
>({})

Third option - having different state variables - it's also great and valid - just like you've implemented.
It's up to you, anyway that's a great change 👑

[AvivAbachi]

you can useMemo() is same computed() in vue

  const isDataEmpty = useMemo(() => {
    return allLineChartsIsEmpty && worstLineIsEmpty && dayTimeChartIsEmpty
  }, [allLineChartsIsEmpty, worstLineIsEmpty, dayTimeChartIsEmpty])

[github-actions]

Preview: https://s3.amazonaws.com/noam-gaash.co.il/17203924052/open-bus/1120/index.html
Preview Storybook: https://s3.amazonaws.com/noam-gaash.co.il/17203924052/open-bus/1120/storybook/index.html
Test Report (if available): 'https://s3.amazonaws.com/noam-gaash.co.il/17203924052/open-bus/167e77c3cebd15651ea84f8cb0f1412cf2a31616/test-results/index.html'

[NoamGaash]

When someone consumes this context, I don't want them to make guesses on whether there's an "and" (&&) or "or" (||) condition between the different statuses. I suggest that we could try a naming convention that corresponds with the Array.prototype.every() and Array.prototype.some()

Suggested change

	isDataLoading,
	isDataEmpty,
	isSomeDataLoading,
	isAllDataEmpty,

[NoamGaash]

First - I'd like to emphasise that I think the code is great as is - you've done a great job.
following @AvivAbachi's suggestions, here's some ideas that I have. It's up to you - you're the owner :)

First, if we'll use useQuery, it can make our life easier using the useIsFetching:

https://tanstack.com/query/latest/docs/framework/react/reference/useIsFetching

Second idea - you can use one variable for the state. I disagree with Aviv regarding the idea to use array - I believe arrays should be used when ordering matters, and I don't feel like that's the case. Here's my suggestion draft -

  const [statuses, setStatuses] = useState<
      'worstLiteChart' | 'otherChart' | 'theThirdChart' | ..., // so on
     'loading' | 'loaded-empty' | 'loaded' | 'error'
>({})

Third option - having different state variables - it's also great and valid - just like you've implemented.
It's up to you, anyway that's a great change 👑