Skip to content

Commit 6db4bee

Browse files
AhnafKhvnAhnafKhvn
authored
Merge pull request #227 from open-source-labs/development
Development
2 parents 8a367e9 + 4c7372b commit 6db4bee

26 files changed

+427
-237
lines changed

‎CHANGE_LOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Changes:<br>
1616
- Additional logic added for edge cases in inputs for state manager (passing in non-Arrays/non-Objects as Array type and Object type).
1717
- Fixed issue with the bottom panel not dragging or sticking to the mouse when the mouse is over the demorender iframe
1818
- Cleaned up hundreds of lines of outdated code and archived multiple unused and duplicate files
19+
- OAuth now linked to standalone gmail and github accounts
1920
- User Features:
2021
- UI updated with a modern style for a better developer experience
2122
- Added many user feedback alerts for better experience including alerts for when projects are published, cloned, deleted, HTML custom tags are created, context created, or custom component created.

‎Dockerrun.aws.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
"Value": "Reactype-v17env.eba-sw2fhsbj.us-east-1.elasticbeanstalk.com"
1616
}
1717
]
18-
}
18+
}

‎app/src/components/App.tsx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -31,38 +31,38 @@ export const App = (): JSX.Element => {
3131
}, []);
3232

3333
// following useEffect runs on first mount
34-
useEffect(() => {
35-
// console.log('cookies.get in App', Cookies.get())
36-
// if user is a guest, see if a project exists in localforage and retrieve it
37-
// v17 May not currently work yet
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
34+
// useEffect(() => {
35+
// // console.log('cookies.get in App', Cookies.get())
36+
// // if user is a guest, see if a project exists in localforage and retrieve it
37+
// // v17 May not currently work yet
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
4747

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-
}
65-
}, []);
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+
// }
65+
// }, []);
6666
// useEffect(() => {
6767
// // provide config properties to legacy projects so new edits can be auto saved
6868
// // if (state.config === undefined) {

‎app/src/components/login/SignIn.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const useStyles = makeStyles((theme) => ({
5252
paper: {
5353
display: 'flex',
5454
flexDirection: 'column',
55-
alignItems: 'center'
55+
alignItems: 'center',
5656
},
5757
avatar: {
5858
backgroundColor: '#3EC1AC'
@@ -211,8 +211,8 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
211211

212212
return (
213213
<StyledEngineProvider injectFirst>
214-
<ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
215-
<Container component="main" maxWidth="xs">
214+
<ThemeProvider theme={SigninDark}>
215+
<Container component="main" maxWidth="xs" >
216216
<CssBaseline />
217217
<div className={classes.paper}>
218218
{/* <Button
@@ -227,7 +227,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
227227
onClick={handleDarkModeToggle}
228228
>
229229
{isDarkMode ? `Light Mode` : `Dark Mode`}
230-
</Button> */}
230+
</Button> */}
231231
<Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
232232
<LockOutlinedIcon />
233233
</Avatar>
@@ -295,7 +295,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
295295
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" />
296296
</svg>
297297
</Button>
298-
{/* <Button
298+
<Button
299299
fullWidth
300300
id="SignInWithGithub"
301301
variant="contained"
@@ -344,7 +344,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
344344
>
345345
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
346346
</svg>
347-
</Button> */}
347+
</Button>
348348
<Button
349349
fullWidth
350350
variant="contained"
@@ -372,19 +372,20 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
372372
/>
373373
</svg>
374374
</Button>
375-
<Grid container>
375+
<Grid container justifyContent="flex-end">
376+
{/* forgot password currently not implemented
376377
<Grid item xs>
377378
<RouteLink
378-
style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
379+
style={{ color: '#aaaaaa' }}
379380
to={`/signup`}
380381
className="nav_link"
381382
>
382383
Forgot password?
383384
</RouteLink>
384-
</Grid>
385+
</Grid> */}
385386
<Grid item>
386387
<RouteLink
387-
style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
388+
style={{ color: '#aaaaaa' }}
388389
to={`/signup`}
389390
className="nav_link"
390391
>

‎app/src/components/login/SignUp.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -206,11 +206,11 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
206206

207207
return (
208208
<StyledEngineProvider injectFirst>
209-
<ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
209+
<ThemeProvider theme={SigninDark}>
210210
<Container component="main" maxWidth="xs">
211211
<CssBaseline />
212212
<div className={classes.paper}>
213-
<Button
213+
{/* <Button
214214
color="primary"
215215
style={{
216216
minWidth: '113.97px',
@@ -221,7 +221,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
221221
onClick={handleDarkModeToggle}
222222
>
223223
{`Dark Mode: ${isDarkMode}`}
224-
</Button>
224+
</Button> */}
225225
<Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
226226
<AssignmentIcon />
227227
</Avatar>
@@ -332,7 +332,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
332332
<Grid container justifyContent="flex-end">
333333
<Grid item>
334334
<RouteLink
335-
style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
335+
style={{ color: '#aaaaaa' }}
336336
to={`/login`}
337337
className="nav_link"
338338
>

‎app/src/components/marketplace/MarketplaceCard.tsx‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
5151
const [s3ImgURL, setS3ImgURL] = React.useState<null | string>(null);
5252
const open = Boolean(anchorEl);
5353
const [alertOpen, setAlertOpen] = React.useState<boolean>(false);
54+
const [guest, setGuest] = React.useState<boolean>(null);
55+
const state = useSelector((store: RootState) => store.appState);
56+
5457

5558
useEffect(() => {
5659
async function s3ImgFetch() {
@@ -69,30 +72,34 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
6972
}, []);
7073

7174

75+
7276
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
7377
setAnchorEl(event.currentTarget);
7478
};
7579
const handleClone = async () => {
76-
// creates a copy of the project
77-
const docId = proj._id;
78-
const response = await axios.get(`/cloneProject/${docId}`, {
79-
params: { username: window.localStorage.getItem('username') }
80-
}); //passing in username as a query param is query params
81-
const project = response.data.project;
82-
setAlertOpen(true);
83-
setAnchorEl(null);
84-
return {
85-
_id: project._id,
86-
name: project.name,
87-
published: project.published,
88-
...project.project
89-
};
80+
if(state.isLoggedIn){
81+
// creates a copy of the project
82+
const docId = proj._id;
83+
const response = await axios.get(`/cloneProject/${docId}`); //passing in username as a query param is query params
84+
const project = response.data;
85+
setAlertOpen(true);
86+
setAnchorEl(null);
87+
return {
88+
_id: project._id,
89+
name: project.name,
90+
published: project.published,
91+
...project.project
92+
};
93+
}
94+
setGuest(true);
9095
};
9196

9297
const handleCloneOpen = async () => {
93-
const project = await handleClone();
94-
history.push('/');
95-
dispatch(openProject(project));
98+
if(state.isLoggedIn){
99+
const project = await handleClone();
100+
history.push('/');
101+
dispatch(openProject(project));
102+
}
96103
};
97104

98105
const handleClose = () => {
@@ -197,6 +204,20 @@ const MarketplaceCard = ({ proj }: { proj: Project }) => {
197204
Project Cloned!
198205
</Alert>
199206
</Snackbar>
207+
<Snackbar
208+
open={guest}
209+
autoHideDuration={3000}
210+
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
211+
onClose={handleAlertClose}
212+
>
213+
<Alert
214+
onClose={handleAlertClose}
215+
severity="error"
216+
sx={{ width: '100%', color: 'white' }}
217+
>
218+
Please login to clone!
219+
</Alert>
220+
</Snackbar>
200221
</Card>
201222
</>
202223
);

‎app/src/components/marketplace/Searchbar.tsx‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,51 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
55
//passing down all marketplaceProjects
66
const [searchText, setSearchText] = useState('');
77

8-
98
const handleChange = (e) => {
109
const newText = e.target.value
11-
setSearchText(newText)
10+
11+
setSearchText(newText)
1212

1313
}
1414

15-
1615
useEffect(()=>{
1716
if(searchText === ''){
1817

1918
updateDisplayProjects(marketplaceProjects)
19+
return;
20+
}
21+
function searching () {
2022

21-
}else{
22-
23-
//more strict pattern not currently used
24-
//const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
25-
//(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target
26-
//^ refers to the literal beginning of a start of a line or string
27-
//| pipe operator is an OR statement
28-
//[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
29-
//a-zA-Z letters (lowercase and uppercase) and underscore symbol
30-
//All together: match either the start/end of a line/string or any character that is not a letter.
31-
//Looks for anything that has the searchText in between non-letter characters
32-
const patternString2 = '(?:^|.)' + searchText.toLowerCase() + '(?:$|.)';
33-
//Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
34-
//test3 and 1test) would both match for string 'test'
35-
36-
const searchResults = marketplaceProjects.reduce((results, curr) => {
37-
const lowName = curr.name.toLowerCase()
38-
const lowUsername = curr.username.toLowerCase()
39-
if(lowName.match(patternString2) || lowUsername.match(patternString2))
40-
results.push(curr)
41-
return results;
42-
}, [])
43-
updateDisplayProjects(searchResults)
23+
//more strict pattern not currently used
24+
//const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
25+
//(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target
26+
//^ refers to the literal beginning of a start of a line or string
27+
//| pipe operator is an OR statement
28+
//[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
29+
//a-zA-Z letters (lowercase and uppercase) and underscore symbol
30+
//All together: match either the start/end of a line/string or any character that is not a letter.
31+
//Looks for anything that has the searchText in between non-letter characters
32+
const patternString2 = '(?:^|.)' + searchText.toLowerCase() + '(?:$|.)';
33+
//Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
34+
//test3 and 1test) would both match for string 'test'
35+
36+
const searchResults = marketplaceProjects.reduce((results, curr) => {
37+
const lowName = curr.name.toLowerCase()
38+
const lowUsername = curr.username.toLowerCase()
39+
if(lowName.match(patternString2) || lowUsername.match(patternString2))
40+
results.push(curr)
41+
return results;
42+
}, [])
43+
updateDisplayProjects(searchResults)
4444
}
4545

46+
// simple debounce
47+
const debounceTimer = setTimeout(() => {
48+
searching();
49+
}, 800);
50+
// clears the timer if searchText is changed before the setTimeout duration is reached
51+
return () => clearTimeout(debounceTimer);
52+
4653
}, [searchText])
4754

4855

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function ProjectsDialog(props: ProjectDialogProps) {
4545
(project: any) => project._id === value
4646
)[0];
4747
deleteProject(selectedProject);
48-
localforage.removeItem(window.localStorage.getItem('ssid'));
48+
// localforage.removeItem(window.localStorage.getItem('ssid'));
4949
dispatch(setInitialState(initialState))
5050
// handleAlertOpen()
5151
deleteAlert()

0 commit comments

Comments
 (0)