refactor(dashboard): include today's feedback in feedback overview

Author: hobbescodes

src/app/page.tsx

@@ -49,8 +49,7 @@ const HomePage = async () => {
     isMember: true,
   };
 
-  const oneWeekAgo = dayjs().utc().subtract(7, "days").startOf("day").toDate();
-  const startOfToday = dayjs().utc().startOf("day").toDate();
+  const oneWeekAgo = dayjs().utc().subtract(6, "days").startOf("day").toDate();
 
   await Promise.all([
     queryClient.prefetchQuery({
@@ -81,12 +80,10 @@ const HomePage = async () => {
       queryKey: useWeeklyFeedbackQuery.getKey({
         userId: session.user.rowId!,
         startDate: oneWeekAgo,
-        endDate: startOfToday,
       }),
       queryFn: useWeeklyFeedbackQuery.fetcher({
         userId: session.user.rowId!,
         startDate: oneWeekAgo,
-        endDate: startOfToday,
       }),
     }),
     queryClient.prefetchQuery({
@@ -101,7 +98,6 @@ const HomePage = async () => {
         isBasicTier={isBasicTier}
         isTeamTier={isTeamTier}
         oneWeekAgo={oneWeekAgo}
-        startOfToday={startOfToday}
       />
 
       {/* dialogs */}

src/components/dashboard/DashboardPage/DashboardPage.tsx

@@ -30,19 +30,12 @@ interface Props {
   isTeamTier: boolean;
   /** Start of day from one week ago. */
   oneWeekAgo: Date;
-  /** Start of today. */
-  startOfToday: Date;
 }
 
 /**
  * Dashboard page. This provides the main layout for the home page when the user is authenticated.
  */
-const DashboardPage = ({
-  isBasicTier,
-  isTeamTier,
-  oneWeekAgo,
-  startOfToday,
-}: Props) => {
+const DashboardPage = ({ isBasicTier, isTeamTier, oneWeekAgo }: Props) => {
   const { user, isLoading: isAuthLoading } = useAuth();
 
   const {
@@ -122,7 +115,7 @@ const DashboardPage = ({
       </Grid>
 
       <Grid h="100%" w="100%" gap={6} columns={{ base: 1, md: 2 }}>
-        <FeedbackOverview oneWeekAgo={oneWeekAgo} startOfToday={startOfToday} />
+        <FeedbackOverview oneWeekAgo={oneWeekAgo} />
 
         <RecentFeedback />
       </Grid>

src/components/dashboard/FeedbackOverview/FeedbackOverview.tsx

@@ -21,14 +21,12 @@ import { useAuth, useViewportSize } from "lib/hooks";
 interface Props {
   /** Start of day from one week ago. */
   oneWeekAgo: Date;
-  /** Start of today. */
-  startOfToday: Date;
 }
 
 /**
  * Feedback overview section. Displays a bar chart that displays daily feedback volume for the past 7 days.
  */
-const FeedbackOverview = ({ oneWeekAgo, startOfToday }: Props) => {
+const FeedbackOverview = ({ oneWeekAgo }: Props) => {
   const isLargeViewport = useViewportSize({ minWidth: "64em" });
 
   const getFormattedDate = (diff: number) =>
@@ -44,7 +42,6 @@ const FeedbackOverview = ({ oneWeekAgo, startOfToday }: Props) => {
     {
       userId: user?.rowId!,
       startDate: oneWeekAgo,
-      endDate: startOfToday,
     },
     {
       enabled: !!user?.rowId,
@@ -80,7 +77,7 @@ const FeedbackOverview = ({ oneWeekAgo, startOfToday }: Props) => {
       contentProps={{
         align: "center",
         justify: "center",
-        p: 4,
+        p: 2,
       }}
     >
       {!isLoading ? (

src/components/dashboard/Response/Response.tsx

@@ -22,14 +22,7 @@ interface Props extends FlexProps {
  * Recent feedback response.
  */
 const Response = ({ feedback, ...rest }: Props) => {
-  const startOfDay = dayjs(feedback?.createdAt).utc().startOf("day");
-
-  const isToday = dayjs.duration(dayjs().utc().diff(startOfDay)).asDays() < 1;
-
-  // NB: `isToday` is used to stabilize the relative time in order to keep in sync with `FeedbackOverview` calculations.
-  const date = isToday
-    ? dayjs(feedback?.createdAt).utc().fromNow()
-    : startOfDay.fromNow();
+  const date = dayjs(feedback?.createdAt).utc().fromNow();
 
   return (
     <Stack gap={4} w="100%" {...rest}>

src/generated/graphql.mock.ts

@@ -1022,7 +1022,7 @@ export const mockUserByEmailQuery = (resolver: GraphQLResponseResolver<Types.Use
  * @example
  * mockWeeklyFeedbackQuery(
  *   ({ query, variables }) => {
- *     const { userId, startDate, endDate } = variables;
+ *     const { userId, startDate } = variables;
  *     return HttpResponse.json({
  *       data: { posts }
  *     })

src/generated/graphql.sdk.ts

@@ -5286,7 +5286,6 @@ export type UserByEmailQuery = { __typename?: 'Query', userByEmail?: { __typenam
 export type WeeklyFeedbackQueryVariables = Exact<{
   userId: Scalars['UUID']['input'];
   startDate: Scalars['Datetime']['input'];
-  endDate: Scalars['Datetime']['input'];
 }>;
 
 
@@ -5916,9 +5915,9 @@ export const UserByEmailDocument = gql`
 }
     `;
 export const WeeklyFeedbackDocument = gql`
-    query WeeklyFeedback($userId: UUID!, $startDate: Datetime!, $endDate: Datetime!) {
+    query WeeklyFeedback($userId: UUID!, $startDate: Datetime!) {
   posts(
-    filter: {project: {organization: {members: {some: {userId: {equalTo: $userId}}}}}, createdAt: {greaterThanOrEqualTo: $startDate, lessThan: $endDate}}
+    filter: {project: {organization: {members: {some: {userId: {equalTo: $userId}}}}}, createdAt: {greaterThanOrEqualTo: $startDate}}
   ) {
     groupedAggregates(groupBy: [CREATED_AT_TRUNCATED_TO_DAY]) {
       keys

src/generated/graphql.ts

@@ -5285,7 +5285,6 @@ export type UserByEmailQuery = { __typename?: 'Query', userByEmail?: { __typenam
 export type WeeklyFeedbackQueryVariables = Exact<{
   userId: Scalars['UUID']['input'];
   startDate: Scalars['Datetime']['input'];
-  endDate: Scalars['Datetime']['input'];
 }>;
 
 
@@ -7294,9 +7293,9 @@ useInfiniteUserByEmailQuery.getKey = (variables: UserByEmailQueryVariables) => [
 useUserByEmailQuery.fetcher = (variables: UserByEmailQueryVariables, options?: RequestInit['headers']) => graphqlFetch<UserByEmailQuery, UserByEmailQueryVariables>(UserByEmailDocument, variables, options);
 
 export const WeeklyFeedbackDocument = `
-    query WeeklyFeedback($userId: UUID!, $startDate: Datetime!, $endDate: Datetime!) {
+    query WeeklyFeedback($userId: UUID!, $startDate: Datetime!) {
   posts(
-    filter: {project: {organization: {members: {some: {userId: {equalTo: $userId}}}}}, createdAt: {greaterThanOrEqualTo: $startDate, lessThan: $endDate}}
+    filter: {project: {organization: {members: {some: {userId: {equalTo: $userId}}}}}, createdAt: {greaterThanOrEqualTo: $startDate}}
   ) {
     groupedAggregates(groupBy: [CREATED_AT_TRUNCATED_TO_DAY]) {
       keys

src/lib/graphql/queries/weeklyFeedback.query.graphql

@@ -1,14 +1,10 @@
-query WeeklyFeedback(
-  $userId: UUID!
-  $startDate: Datetime!
-  $endDate: Datetime!
-) {
+query WeeklyFeedback($userId: UUID!, $startDate: Datetime!) {
   posts(
     filter: {
       project: {
         organization: { members: { some: { userId: { equalTo: $userId } } } }
       }
-      createdAt: { greaterThanOrEqualTo: $startDate, lessThan: $endDate }
+      createdAt: { greaterThanOrEqualTo: $startDate }
     }
   ) {
     groupedAggregates(groupBy: [CREATED_AT_TRUNCATED_TO_DAY]) {