From 8b7532a1d5432ac38f7cd3fa400e9091d07d337c Mon Sep 17 00:00:00 2001
From: MettyS <mettyj.schroeder@gmail.com>
Date: Sat, 30 Apr 2022 11:17:25 -0500
Subject: [PATCH] Property drilling example for modal

---
 frontend/src/components/Card.js               | 31 +++++++++++-----
 frontend/src/components/CardGrid/CardGrid.js  |  2 ++
 .../components/TabCollection/TabCollection.js | 36 +++++++++++++++++--
 3 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js
index 26fc1c70..a15ea2ad 100644
--- a/frontend/src/components/Card.js
+++ b/frontend/src/components/Card.js
@@ -3,7 +3,19 @@ import { Link } from "react-router-dom";
 import "./CardGrid/CardGrid.css"
 
 
-function Card(props) {
+class Card extends component {
+  constructor(props) {
+    super(props)
+    const state = {
+      contents: {
+        // id of the prof story
+      },
+    }
+
+    this.state = state;
+  }
+
+  render() {
   const defaultCardTypeSX ={
     width: 250,
     height: 250,
@@ -13,29 +25,32 @@ function Card(props) {
         opacity: [0.9, 0.8, 0.7],
     },
   }
-  let tempsx = props.sx ? props.sx : defaultCardTypeSX //? is if else
-  if(props.cardType==="careerMap"){
+  let tempsx = this.props.sx ? this.props.sx : defaultCardTypeSX //? is if else
+  if(this.props.cardType==="careerMap"){
   return (
     <div>
       <Link to="/careerinfo">
         <Box sx={tempsx}>
-          <img class = "icon" height= "200vmin" src={props.image} alt="icon"/>
+          <img class = "icon" height= "200vmin" src={this.props.image} alt="icon"/>
         </Box>
       </Link>
-      <h3 class="boxLabel">{props.text}</h3>
+      <h3 class="boxLabel">{this.props.text}</h3>
     </div>
   );
   }else{
     return(
     <div>
-        <Box sx={tempsx}>
-          <img class = "icon" height= "200vmin" src={props.image} alt="icon"/>
+        <Box sx={tempsx} onClick={() => {
+          this.props.displayModal(this.state.contents)
+        }}>
+          <img class = "icon" height= "200vmin" src={this.props.image} alt="icon"/>
         </Box>
-      <h3 class="boxLabel">{props.text}</h3>
+      <h3 class="boxLabel">{this.props.text}</h3>
       
     </div>
     );
   }
 }
+}
 
 export default Card;
\ No newline at end of file
diff --git a/frontend/src/components/CardGrid/CardGrid.js b/frontend/src/components/CardGrid/CardGrid.js
index 8ab65b30..019ed52f 100644
--- a/frontend/src/components/CardGrid/CardGrid.js
+++ b/frontend/src/components/CardGrid/CardGrid.js
@@ -58,6 +58,7 @@ function CardGrid(props) {
                 sx={tempsx}
                 text={data.careerName}
                 image={data.imageName}
+                displayModal={props.displayModal}
               />
 
             </Grid>
@@ -77,6 +78,7 @@ function CardGrid(props) {
               sx={tempsx}
               text={data.careerName}
               image={data.imageName}
+              displayModal={props.displayModal}
             />
           </Grid>
         );
diff --git a/frontend/src/components/TabCollection/TabCollection.js b/frontend/src/components/TabCollection/TabCollection.js
index c09e80d3..f64f9ca9 100644
--- a/frontend/src/components/TabCollection/TabCollection.js
+++ b/frontend/src/components/TabCollection/TabCollection.js
@@ -80,7 +80,35 @@ const TabsList = styled(TabsListUnstyled)`
   
 `;
 
-export default function UnstyledTabsCustomized() {
+ class UnstyledTabsCustomized extends component {
+  constructor(props) {
+    super(props)
+    const state = {
+      modalShouldDisplay: false,
+      modalContents: null,
+      displayModal: this.displayModal,
+      closeModal: null,
+    }
+
+    this.state = state;
+  }
+
+  displayModal = (providedContents) => {
+    this.setState({
+      modalShouldDisplay: true,
+      modalContents: providedContents
+    })
+  }
+
+   
+  render() {
+    const modal = <div>NO MODAL</div>
+
+    if(this.state.modalShouldDisplay) {
+      modal = this.state.modalContents
+    }
+
+
   return (
     
     <TabsUnstyled defaultValue={0}>
@@ -96,8 +124,9 @@ export default function UnstyledTabsCustomized() {
       </TabPanel>
 
       <TabPanel scrollButtons="auto" value={1}>
+        {modal}
         <ProfessionalForm/>
-        <CardGrid cardType={"storiesCard"}/>
+        <CardGrid cardType={"storiesCard"} displayModal={this.state.displayModal}/>
         </TabPanel>
 
       <TabPanel value={2}>Third content</TabPanel>
@@ -105,4 +134,7 @@ export default function UnstyledTabsCustomized() {
     </TabsUnstyled>
    
   );
+  }
 }
+
+export default UnstyledTabsCustomized;