Disabled grow family for gone child, #13

src/components/child/MyChildTabs.jsx

@@ -54,12 +54,11 @@ function a11yProps(index) {
   };
 }
 
-export default function MyChildTabs({ theChild }) {
+export default function MyChildTabs({ theChild, isGone, setIsGone }) {
   const dispatch = useDispatch();
   const location = useLocation();
   const { t } = useTranslation();
 
-  const [isGone, setIsGone] = useState(false);
   const [value, setValue] = useState(0);
   const [userRole, setUserRole] = useState();
   const [needsData, setNeedsData] = useState([]);
@@ -205,4 +204,6 @@ export default function MyChildTabs({ theChild }) {
 
 MyChildTabs.propTypes = {
   theChild: PropTypes.object,
+  isGone: PropTypes.bool,
+  setIsGone: PropTypes.func,
 };

src/pages/child/MyChildPage.jsx

@@ -76,7 +76,8 @@ const MyChildPage = () => {
   const [myChildrenIdList, setMyChildrenIdList] = useState([]);
   const [leaveOpen, setLeaveOpen] = useState(false);
   const [growOpen, setGrowOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null); // Menu
+  const [anchorEl, setAnchorEl] = useState(null); // Menu
+  const [isGone, setIsGone] = useState(false);
   const open = Boolean(anchorEl); // Menu
 
   const myHome = useSelector((state) => state.myHome);
@@ -227,6 +228,7 @@ const MyChildPage = () => {
                 }}
               >
                 <MenuItem
+                  disabled={isGone}
                   onClick={handleGrow}
                   sx={{ minHeight: '15px', margin: 1 }}
                 >
@@ -279,7 +281,13 @@ const MyChildPage = () => {
             </Grid>
           </Grid>
           <Grid sx={{ maxWidth: '100% !important' }}>
-            {theChild && <MyChildTabs theChild={theChild} />}
+            {theChild && (
+              <MyChildTabs
+                theChild={theChild}
+                isGone={isGone}
+                setIsGone={setIsGone}
+              />
+            )}
           </Grid>
         </Grid>
       )}