Skip to content

Commit 79f1618

Browse files
liamrohliamroh
committed
merging in dev changes
2 parents 0c70df4 + 21b6a95 commit 79f1618

File tree

11 files changed

+71
-61
lines changed

11 files changed

+71
-61
lines changed

‎app/src/components/App.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,33 +35,37 @@ export const App = (): JSX.Element => {
3535
console.log('state.isLoggedIn', state.isLoggedIn)
3636
// console.log('cookies.get in App', Cookies.get())
3737
// if user is a guest, see if a project exists in localforage and retrieve it
38-
// if (!state.isLoggedIn) {
39-
// localforage.getItem('guestProject').then((project) => {
40-
// // if project exists, use dispatch to set initial state to that project
41-
// if (project) {
42-
// dispatch(setInitialState(project));
43-
// }
44-
// });
45-
// } else {
46-
// // otherwise if a user is logged in, use a fetch request to load user's projects from DB
38+
// v17 May not currently work yet
39+
if (!state.isLoggedIn) {
40+
console.log('not state.islogged in')
41+
localforage.getItem('guestProject').then((project) => {
42+
// if project exists, use dispatch to set initial state to that project
43+
console.log('guestProject', project)
44+
if (project) {
45+
dispatch(setInitialState(project));
46+
console.log('project', project)
47+
}
48+
});
49+
} else {
50+
// otherwise if a user is logged in, use a fetch request to load user's projects from DB
4751

48-
// let userId;
49-
// if (Cookies.get('ssid')) {
50-
// userId = Cookies.get('ssid');
51-
// } else {
52-
// userId = window.localStorage.getItem('ssid');
53-
// }
54-
// also load user's last project, which was saved in localforage on logout
55-
// localforage.getItem(userId).then((project) => {
56-
// if (project) {
57-
// dispatch(setInitialState(project));
58-
// } else {
59-
// console.log(
60-
// 'No user project found in localforage, setting initial state blank'
61-
// );
62-
// }
63-
// });
64-
// }
52+
let userId;
53+
if (Cookies.get('ssid')) {
54+
userId = Cookies.get('ssid');
55+
} else {
56+
userId = window.localStorage.getItem('ssid');
57+
}
58+
//also load user's last project, which was saved in localforage on logout
59+
localforage.getItem(userId).then((project) => {
60+
if (project) {
61+
dispatch(setInitialState(project));
62+
} else {
63+
console.log(
64+
'No user project found in localforage, setting initial state blank'
65+
);
66+
}
67+
});
68+
}
6569
}, []);
6670
// useEffect(() => {
6771
// // provide config properties to legacy projects so new edits can be auto saved

‎app/src/components/left/ComponentDrag.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
3737
direction="row"
3838
justifyContent="center"
3939
alignItems="center"
40+
4041
>
4142
{state.components
4243
.filter((comp) => state.rootComponents.includes(comp.id))
@@ -99,13 +100,6 @@ const useStyles = makeStyles({
99100
},
100101
panelWrapperList: {
101102
minHeight: '120px',
102-
marginLeft: '-15px',
103-
marginRight: '-15px',
104-
width: '100%',
105-
display: 'flex',
106-
flexDirection: 'column',
107-
alignItems: 'center',
108-
wordWrap: 'break-word'
109103
},
110104
lightThemeFontColor: {
111105
color: '#fff'

‎app/src/components/left/ComponentsContainer.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,8 @@ const ComponentsContainer = () => {
2929
</h4>
3030
<Grid
3131
container
32-
direction="row"
33-
justifyContent="center"
34-
alignItems="center"
32+
direction="column"
33+
alignContent={"center"}
3534
>
3635
{state.components
3736
.filter((comp) => !state.rootComponents.includes(comp.id))
@@ -63,13 +62,6 @@ const useStyles = makeStyles({
6362
},
6463
panelWrapperList: {
6564
minHeight: '120px',
66-
marginLeft: '-15px',
67-
marginRight: '-15px',
68-
width: '100%',
69-
display: 'flex',
70-
flexDirection: 'column',
71-
alignItems: 'center',
72-
wordWrap: 'break-word'
7365
},
7466
lightThemeFontColor: {
7567
color: '#fff'

‎app/src/components/left/ContentArea.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ContentArea: React.FC<ContentAreaProps> = ({ activeTab, isVisible }) => {
3333
>
3434
<div className="column left">
3535
{panels.map((panel, idx) => (
36-
<TabPanel activeTab={activeTab} index={idx}>
36+
<TabPanel activeTab={activeTab} index={idx} key={idx}>
3737
{panel}
3838
</TabPanel>
3939
))}

‎app/src/components/left/DragDropPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const DragDropPanel = (props): JSX.Element => {
8686
state.projectType === 'Classic React'
8787
) {
8888
return (
89-
<Grid item xs={2} sm={2} md={2}>
89+
<Grid item xs={2} sm={2} md={2} key={option.name}>
9090
<HTMLItem
9191
name={option.name}
9292
key={`html-${option.name}`}

‎app/src/components/left/Sidebar.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,36 @@ interface SidebarProps {
1111
toggleVisibility: (state: boolean) => void;
1212
}
1313

14+
let oldValue = 0;
15+
1416
const Sidebar: React.FC<SidebarProps> = ({
1517
activeTab,
1618
setActiveTab,
1719
toggleVisibility
1820
}) => {
1921
const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
20-
if (activeTab === newValue) {
22+
setActiveTab(newValue);
23+
toggleVisibility(true);// Show the left-container when a different tab is clicked
24+
oldValue = newValue;//setting the oldvalue to match the new tab
25+
console.log('oldValue change', oldValue)
26+
};
27+
28+
const handleTabClick = (event: React.MouseEvent, oldValue: number) => {
29+
if (activeTab === oldValue) { //if the person is clicking the same tab, oldValue should match activeTab since it did not trigger an onChange
30+
console.log('handleTabChange null', oldValue)
2131
setActiveTab(null);
2232
toggleVisibility(false); // Hide the left-container when the same tab is clicked again
23-
} else {
24-
setActiveTab(newValue);
25-
toggleVisibility(true); // Show the left-container when another tab is activated
2633
}
27-
};
34+
}
2835

2936
return (
3037
<Tabs
3138
key={activeTab}
3239
orientation="vertical"
3340
variant="scrollable"
3441
value={activeTab}
35-
onChange={handleTabChange}
42+
onChange = {handleTabChange}
43+
onClick = {(e: React.MouseEvent) => handleTabClick(e, oldValue)}
3644
TabIndicatorProps={{
3745
style: {
3846
backgroundColor: '#4A4A4A'
@@ -50,6 +58,7 @@ const Sidebar: React.FC<SidebarProps> = ({
5058
height: '100vh'
5159
}}
5260
>
61+
<Tab sx={{position: 'absolute', visibility: "hidden"}} value={null}/>
5362
<Tab
5463
sx={{
5564
color: activeTab === 0 ? '#C6C6C6' : '#4A4A4A',

‎app/src/components/right/ComponentPanelItem.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ const ComponentPanelItem: React.FC<{
4949
<Grid
5050
item
5151
ref={drag}
52-
xs={8}
52+
xs= {8}
5353
style={{
54-
display: 'grid',
54+
// display: 'grid',
5555
color: isThemeLight ? 'black' : 'white',
5656
backgroundColor: 'transparent',
5757
// border: root
@@ -62,7 +62,9 @@ const ComponentPanelItem: React.FC<{
6262
: '2px solid white',
6363
borderRadius: '4px',
6464
borderColor: '#000000',
65-
margin: '5px 0px'
65+
margin: '5px 0px',
66+
wordBreak: 'break-all',
67+
width: '10rem'
6668
}}
6769
>
6870
{isFocus && <div className={classes.focusMark}></div>}
@@ -82,6 +84,7 @@ const useStyles = makeStyles({
8284
width: '12px',
8385
height: '12px',
8486
borderRadius: '25px',
87+
position: 'absolute'//so it doesn't cause the containing box to jiggle when selected due to change in size
8588
},
8689
lightTheme: {
8790
color: 'rgba (0, 0, 0, 0.54)'

‎app/src/components/top/NavBar.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useRef, useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import Avatar from '@mui/material/Avatar';
44
import Button from '@mui/material/Button';
@@ -26,11 +26,14 @@ const NavBar = () => {
2626
);
2727

2828
const dispatch = useDispatch();
29+
const menuButtonRef = useRef(null);
2930

3031
useEffect(()=>{
3132
setProjectName(state.name)
3233
}, [state.name])//update the ProjectName after state.name changes due to loading projects
3334

35+
36+
3437
const buttonContainerStyle = {
3538
display: 'flex',
3639
alignItems: 'center',
@@ -129,13 +132,15 @@ const NavBar = () => {
129132
style={moreVertButtonStyle}
130133
variant="contained"
131134
color="primary"
132-
onClick={() => setDropMenu((prevDropMenu) => !prevDropMenu)}
135+
onClick={() => setDropMenu(!dropMenu)}
136+
ref={menuButtonRef}
133137
>
134138
<MoreVertIcon style={{ color: 'white' }} />
135139
</Button>
136140
<NavBarButtons
137141
dropMenu={dropMenu}
138142
setDropMenu={setDropMenu}
143+
menuButtonRef={menuButtonRef}
139144
style={{ color: 'white' }}
140145
/>
141146
</div>

‎app/src/components/top/NavBarButtons.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -302,8 +302,9 @@ function navbarDropDown(props) {
302302
const handleClick = (event) => {
303303
if (event.type === "click" &&
304304
(dropdownRef.current &&
305-
!dropdownRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
305+
!dropdownRef.current.contains(event.target) && !props.menuButtonRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
306306
) {
307+
//menuButtonRef is to ensure that handleClose does not get invoked when the user clicks on the menu dropdown button
307308
handleClose();
308309
}
309310
};
@@ -388,10 +389,11 @@ function navbarDropDown(props) {
388389
width="16"
389390
height="16"
390391
fill="currentColor"
391-
className="bi bi-book"
392+
className="bi bi-bag-check"
392393
viewBox="0 0 16 16"
393394
>
394-
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
395+
<path fillRule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
396+
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
395397
</svg>
396398
</button>
397399
</Link>

‎app/src/containers/LeftContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22

33
import ContentArea from '../components/left/ContentArea';
44
import { BrowserRouter as Router } from 'react-router-dom';

0 commit comments

Comments
 (0)