Skip to content

Commit 0cc6752

Browse files
dentonwongdentonwong
committed
fixed iframe issue
1 parent 73f9ce0 commit 0cc6752

File tree

9 files changed

+63
-50
lines changed

9 files changed

+63
-50
lines changed

‎app/src/components/App.tsx‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
1919
// Intermediary component to wrap main App component with higher order provider components
2020
export const App = (): JSX.Element => {
2121
const state = useSelector((store: RootState) => store.appState);
22+
2223
const [toggleAttempt, setToggleAttempt] = useState(false);
2324
const dispatch = useDispatch();
2425
// checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
@@ -29,38 +30,40 @@ export const App = (): JSX.Element => {
2930
//setToggleAttempt(!toggleAttempt);
3031
}, []);
3132

33+
useEffect(()=>{console.log(state)}, [state])
34+
3235
// following useEffect runs on first mount
3336
useEffect(() => {
3437
console.log('state.isLoggedIn', state.isLoggedIn)
3538
// console.log('cookies.get in App', Cookies.get())
3639
// if user is a guest, see if a project exists in localforage and retrieve it
37-
if (!state.isLoggedIn) {
38-
localforage.getItem('guestProject').then((project) => {
39-
// if project exists, use dispatch to set initial state to that project
40-
if (project) {
41-
dispatch(setInitialState(project));
42-
}
43-
});
44-
} else {
45-
// otherwise if a user is logged in, use a fetch request to load user's projects from DB
40+
// if (!state.isLoggedIn) {
41+
// localforage.getItem('guestProject').then((project) => {
42+
// // if project exists, use dispatch to set initial state to that project
43+
// if (project) {
44+
// dispatch(setInitialState(project));
45+
// }
46+
// });
47+
// } else {
48+
// // otherwise if a user is logged in, use a fetch request to load user's projects from DB
4649

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

‎app/src/components/main/DemoRender.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
1+
import { Link, Route, BrowserRouter as Router, Switch, useHistory } from 'react-router-dom';
22
import React, { useEffect, useRef } from 'react';
33
import { useDispatch, useSelector } from 'react-redux';
44

@@ -15,6 +15,7 @@ const DemoRender = (): JSX.Element => {
1515
const stylesheet = useSelector(
1616
(store: RootState) => store.appState.stylesheet
1717
);
18+
const backHome = useHistory();
1819
const dispatch = useDispatch();
1920

2021
// Create React ref to inject transpiled code in inframe
@@ -193,7 +194,12 @@ const DemoRender = (): JSX.Element => {
193194

194195
//adds the code into the iframe
195196
useEffect(() => {
197+
//load the current state code when the iframe is loaded and when code changes
198+
iframe.current.addEventListener('load', ()=>{
199+
iframe.current.contentWindow.postMessage(code, '*');
200+
})
196201
iframe.current.contentWindow.postMessage(code, '*');
202+
197203
}, [code]);
198204

199205
return (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { useDispatch, useSelector } from 'react-redux'
2222
import { RootState } from '../../redux/store';
2323
import { saveProject } from '../../helperFunctions/projectGetSaveDel';
2424
import { useHistory } from 'react-router-dom';
25-
import { openProject } from '../../redux/reducers/slice/appStateSlice';
25+
import { openProject, resetAllState } from '../../redux/reducers/slice/appStateSlice';
2626

2727
interface Project {
2828
forked: String,

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
1414

1515

1616
useEffect(()=>{
17-
1817
if(searchText === ''){
1918

2019
updateDisplayProjects(marketplaceProjects)
@@ -34,7 +33,9 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
3433
//test3 and 1test) would both match for string 'test'
3534

3635
const searchResults = marketplaceProjects.reduce((results, curr) => {
37-
if(curr.name.match(patternString) || curr.username.match(patternString2))
36+
const lowName = curr.name.toLowerCase()
37+
const lowUsername = curr.username.toLowerCase()
38+
if(lowName.match(patternString) || lowUsername.match(patternString2))
3839
results.push(curr)
3940
return results;
4041
}, [])

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ function ProjectsDialog(props: ProjectDialogProps) {
3232
};
3333
// If new project selected, close and set value to new project name
3434
const handleListItemClick = (value: string) => {
35-
console.log('hadleList value', value)
3635
const selectedProject = projects.filter(
3736
(project: any) => project._id === value
3837
)[0];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const NavBar = () => {
7474
}
7575

7676

77-
publishProject(state, projectName)
77+
publishProject(projectName, state)
7878
.then((newProject: State) => {
7979
console.log('Project published successfully', newProject);
8080
setPublishModalOpen(false);

‎app/src/helperFunctions/projectGetSaveDel.ts‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,15 @@ export const getProjects = (): Promise<any> => {
3030
};
3131

3232
export const saveProject = (
33-
name: String,
34-
workspace: Object
33+
name: string,
34+
workspace: State
3535
): Promise<Object> => {
3636
const newProject = { ...workspace}
37-
delete newProject['_id']; //deleting the _id from the current state slice. We don't actually want it in the project object in the mongo db document
37+
delete newProject._id;
38+
delete newProject.name; //deleting the _id from the current state slice. We don't actually want it in the project object in the mongo db document
3839
const body = JSON.stringify({
3940
name,
40-
project: { ...newProject, name },
41+
project: { ...newProject},
4142
userId: window.localStorage.getItem('ssid'),
4243
username: window.localStorage.getItem('username'),
4344
comments: []
@@ -52,23 +53,25 @@ export const saveProject = (
5253
})
5354
.then((res) => res.json())
5455
.then((data) => {
55-
return {_id: data._id, published:data.published, ...data.project}; //passing up what is needed for the global appstateslice
56+
return {_id: data._id, name: data.name, published:data.published, ...data.project}; //passing up what is needed for the global appstateslice
5657
})
5758
.catch((err) => console.log(`Error saving project ${err}`));
5859
return project;//returns _id in addition to the project object from the document
5960
};
6061

6162
export const publishProject = (
62-
projectData: State,
63-
projectName: string
63+
name: string,
64+
workspace: State
6465
): Promise<Object> => {
66+
const newProject = { ...workspace}
67+
delete newProject.name;
6568
const body = JSON.stringify({
66-
_id: projectData._id,
67-
project: { ...projectData, name: projectName },
69+
_id: workspace._id,
70+
name: name,
71+
project: { ...newProject},
6872
userId: window.localStorage.getItem('ssid'),
6973
username: window.localStorage.getItem('username'),
7074
comments: [],
71-
name: projectName,
7275
});
7376

7477
const response = fetch(`${serverURL}/publishProject`, {
@@ -83,8 +86,8 @@ export const publishProject = (
8386
const publishedProject = response
8487
.then((res) => res.json())
8588
.then((data) => {
86-
console.log({_id: data._id, published: data.published, ...data.project});
87-
return {_id: data._id, published: data.published, ...data.project};
89+
console.log({_id: data._id, name: data.name, published:data.published, ...data.project});
90+
return {_id: data._id, name: data.name, published:data.published, ...data.project};
8891
})
8992
.catch((err) => {
9093
console.log(`Error publishing project ${err}`);
@@ -114,8 +117,8 @@ export const unpublishProject = (
114117
const unpublishedProject = response
115118
.then((res) => res.json())
116119
.then((data) => {
117-
console.log({_id: data._id, published: data.published, ...data.project});
118-
return {_id: data._id, published: data.published, ...data.project};
120+
console.log({_id: data._id, name: data.name, published:data.published, ...data.project});
121+
return {_id: data._id, name: data.name, published:data.published, ...data.project};
119122
})
120123
.catch((err) => {
121124
console.log(`Error unpublishing project ${err}`);

‎server/controllers/marketplaceController.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ const marketplaceController: MarketplaceController = {
6363
const noId = {...project};
6464
delete noId._id; //removing the empty string _id from project
6565
delete noId.published;
66-
const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username });
67-
res.locals.publishedProject = publishedProject.toObject({ minimize: false });
66+
const publishedProject = await Projects.create( { project: noId, createdAt, published: true, comments, name, userId, username })
67+
res.locals.publishedProject = publishedProject.toObject({ minimize: false });
6868
console.log('published backend new', res.locals.publishedProject)
6969
return next();
7070
}
@@ -101,7 +101,7 @@ const marketplaceController: MarketplaceController = {
101101
}
102102
});
103103
}
104-
res.locals.unpublishedProject = result;
104+
res.locals.unpublishedProject = result.toObject({ minimize: false });
105105
return next();
106106
});
107107
}

‎server/controllers/projectController.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,9 @@ const projectController: ProjectController = {
5454
});
5555
}
5656
// so it returns each project like it is in state, not the whole object in DB
57-
res.locals.projects = projects.map((elem: {_id: string; published: boolean; project: object } ) =>({
57+
res.locals.projects = projects.map((elem: {_id: string; name: string; published: boolean; project: object } ) =>({
5858
_id: elem._id,
59+
name: elem.name,
5960
published: elem.published,
6061
...elem.project
6162
}));

0 commit comments

Comments
 (0)