From b1e45ca759859ba8c33400e45b38016d6e68929b Mon Sep 17 00:00:00 2001
From: Sabin Marcu <sabin.marcu@platform24.com>
Date: Mon, 19 Aug 2024 10:21:55 +0300
Subject: [PATCH] feat(team-rotation): dim rotations that have no change this
 week

---
 .../src/components/Rotation.style.tsx         | 40 ++++++++++++++-----
 .../team-rotation/src/components/Rotation.tsx | 26 +++++++++++-
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/apps/team-rotation/src/components/Rotation.style.tsx b/apps/team-rotation/src/components/Rotation.style.tsx
index d32d185..4fb0006 100644
--- a/apps/team-rotation/src/components/Rotation.style.tsx
+++ b/apps/team-rotation/src/components/Rotation.style.tsx
@@ -3,13 +3,35 @@ import {
   styled,
 } from '@mui/material';
 
-export const RotationCard = styled(Card)(({ theme }) => ({
-  display: 'flex',
-  flexFlow: 'row nowrap',
-  justifyContent: 'space-between',
-  overflow: 'visible',
-  [theme.breakpoints.down('lg')]: {
-    flexFlow: 'column nowrap',
+export type RotationCardProperties = {
+  isActive?: boolean;
+};
+export const RotationCard = styled(Card)<RotationCardProperties>(
+  ({
+    theme,
+  }) => ({
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    justifyContent: 'space-between',
+    overflow: 'visible',
+    [theme.breakpoints.down('lg')]: {
+      flexFlow: 'column nowrap',
+    },
+    position: 'relative',
+  }),
+  ({
+    isActive,
+    theme,
+  }) => {
+    if (isActive) {
+      return {};
+    }
+    return {
+      opacity: 0.4,
+      transition: theme.transitions.create('opacity'),
+      '&:hover': {
+        opacity: 1,
+      },
+    };
   },
-  position: 'relative',
-}));
\ No newline at end of file
+);
diff --git a/apps/team-rotation/src/components/Rotation.tsx b/apps/team-rotation/src/components/Rotation.tsx
index 553f38d..37c134b 100644
--- a/apps/team-rotation/src/components/Rotation.tsx
+++ b/apps/team-rotation/src/components/Rotation.tsx
@@ -1,9 +1,15 @@
-import { useState } from 'react';
+import {
+  useMemo,
+  useState,
+} from 'react';
+import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
 import { RotationDisplay } from './Rotation.display.tsx';
 import { RotationCard } from './Rotation.style.tsx';
 import type { RotationEditProperties } from './Rotation.edit.tsx';
 import { RotationEdit } from './Rotation.edit.tsx';
 import { useDndSortable } from '../hooks/useDndSortable.ts';
+import { parseDate } from '../utils/date.ts';
 
 export type RotationComponentProperties = Omit<RotationEditProperties, 'onToggle' | 'dndProps'>;
 export function Rotation({
@@ -19,8 +25,24 @@ export function Rotation({
     dragHandleProps,
     rootProps,
   } = useDndSortable(atom);
+  const {
+    startDate, every,
+  } = useAtomValue(atom);
+  const weeksUntilChange = useMemo(
+    () => {
+      const weekSinceStart = dayjs(Date.now()).diff(parseDate(startDate), 'week');
+      const rotationsSinceStart = Math.floor(weekSinceStart % every);
+      return rotationsSinceStart;
+    },
+    [
+      startDate,
+      every,
+    ],
+  );
+  const isActiveThisWeek = weeksUntilChange === 0;
   return (
     <RotationCard
+      isActive={isActiveThisWeek}
       {...rootProps}
     >
       {editing
@@ -41,4 +63,4 @@ export function Rotation({
         )}
     </RotationCard>
   );
-}
+}
\ No newline at end of file