Merge pull request #23 from oslabs-beta/katrina1

Index routing bug fixed, modal text color corrected.

Author: MikoGome

app/src/components/main/AddLink.tsx

@@ -15,6 +15,7 @@ function AddLink({ id, onClickHandler, linkDisplayed }) {
   const [link, setLink] = useState('')
 
   const handlePageSelect = event => {
+    console.log('hit');
     const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
     currComponent.children.some(element => {
       if(element.childId === id) {

app/src/components/right/DeleteProjects.tsx

@@ -51,8 +51,8 @@ function ProjectsDialog(props: ProjectDialogProps) {
       aria-labelledby="project-dialog-title"
       open={open}
     >
-      <DialogTitle id="project-dialog-title">Delete Project</DialogTitle>
-      <List>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Delete Project</DialogTitle>
+      <List style={{ color: "#000" }}>
         {projects.map((project: any, index: number) => (
           <ListItem
             button

app/src/components/right/OpenProjects.tsx

@@ -41,8 +41,8 @@ function ProjectsDialog(props: ProjectDialogProps) {
       aria-labelledby="project-dialog-title"
       open={open}
     >
-      <DialogTitle id="project-dialog-title">Open Project</DialogTitle>
-      <List>
+      <DialogTitle style={{ color: "#000" }} id="project-dialog-title">Open Project</DialogTitle>
+      <List style={{ color: "#000" }}>
         {projects.map((project: any, index: number) => (
           <ListItem
             button
@@ -61,7 +61,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
     </Dialog>
   );
 }
-export default function ProjectsFolder() {
+export default function ProjectsFolder(props) {
   const [open, setOpen] = useState(false);
   const [projects, setProjects] = useState([{ hello: 'cat' }])
 

app/src/components/right/SaveProjectButton.tsx

@@ -67,14 +67,16 @@ export default function FormDialog() {
         SAVE PROJECT AS
       </Button>
       <Dialog
+        style={{ color: "#000" }}
         open={open}
         onClose={handleClose}
         aria-labelledby="form-dialog-title"
       >
-        <DialogTitle id="form-dialog-title">Save Project</DialogTitle>
+        <DialogTitle style={{ color: "#000" }} id="form-dialog-title">Save Project</DialogTitle>
         <DialogContent>
           <TextField
             autoFocus
+            inputProps={{ style: { color: "black" } }}
             margin="dense"
             id="name"
             label="Project Name"
@@ -87,10 +89,10 @@ export default function FormDialog() {
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose} color="primary">
+          <Button onClick={handleClose} color='primary'>
             Cancel
           </Button>
-          <Button onClick={handleSave} color="primary">
+          <Button onClick={handleSave} color='primary'>
             Save
           </Button>
         </DialogActions>

app/src/components/top/NavBar.tsx

@@ -247,18 +247,21 @@ const NavBar = (props) => {
             <StyledMenuItem
               className={classes.manageProject}
               onClick={handleClose}
+              style = { { color: props.isThemeLight ? 'black' : 'white' } }
             >
               <SaveProjectButton />
             </StyledMenuItem>
             <StyledMenuItem
               className={classes.manageProject}
               onClick={handleClose}
+              style = { { color: props.isThemeLight ? 'black' : 'white' } }
             >
               <ProjectsFolder />
             </StyledMenuItem>
             <StyledMenuItem
               className={classes.manageProject}
               onClick={handleClose}
+              style = { { color: props.isThemeLight ? 'black' : 'white' } }
             >
               <DeleteProjects />
             </StyledMenuItem>

app/src/containers/CustomizationPanel.tsx

@@ -48,6 +48,19 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   const [useContextObj, setUseContextObj] = useState({});
   const [stateUsedObj, setStateUsedObj] = useState({});
 
+
+  const currFocus = state.components
+    .find((el) => {
+      return el.id === state.canvasFocus.componentId
+    })
+    .children.find((el) => {
+      return el.childId === state.canvasFocus.componentId;
+    });
+  
+  useEffect( () => {
+    currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
+  }, [currFocus?.attributes?.compLink]);
+
   //Miko -- save properties of nested div
   function deepIterate(arr) {
     const output = [];
@@ -87,9 +100,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
   // after component renders, reset the input fields with the current styles of the selected child
   useEffect(() => {
     resetFields();
-    // const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
-    // const childrenArray = currComponent.children;
-    // console.log('childrenArray', childrenArray)
   }, [state.canvasFocus.componentId, state.canvasFocus.childId]);
   // handles all input field changes, with specific updates called based on input's name
   const handleChange = (e: React.ChangeEvent<{ value: any }>) => {