Skip to content

Commit a1e84c3

Browse files
rachelk585rachelk585
authored
Merge pull request #5 from oslabs-beta/ExportButton
Export Button Working with Browser
2 parents 22e6391 + 728621f commit a1e84c3

File tree

6 files changed

+159
-26
lines changed

6 files changed

+159
-26
lines changed

‎app/src/components/bottom/StylesEditor.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const StylesEditor: React.FC<{
4040
}
4141

4242
const saveFile = () => {
43+
console.log(css)
4344
fetch(`${serverURL}/user-styles/save`, {
4445
method: 'POST',
4546
headers: { 'Content-Type': 'application/json' },

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

Lines changed: 146 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,13 @@ import Button from '@mui/material/Button';
77
import exportProject from '../../utils/exportProject.util';
88
import createModal from './createModal';
99
import { useSelector } from 'react-redux';
10+
import { RootState } from '../../redux/store';
11+
const JSZip = require("jszip");
12+
import { saveAs } from 'file-saver';
13+
1014
export default function ExportButton() {
1115
const [modal, setModal] = useState(null);
12-
const state = useSelector(store => store.appState)
16+
const state = useSelector((store: RootState) => store.appState);
1317

1418
const genOptions: string[] = [
1519
'Export components',
@@ -26,7 +30,6 @@ export default function ExportButton() {
2630
{genOptions.map((option: string, i: number) => (
2731
<ListItem
2832
key={i}
29-
button
3033
onClick={() => chooseGenOptions(i)}
3134
style={{
3235
border: '1px solid #3f51b5',
@@ -49,32 +52,25 @@ export default function ExportButton() {
4952
const chooseGenOptions = (genOpt: number) => {
5053
// set export option: 0 --> export only components, 1 --> export full project
5154
genOption = genOpt;
52-
window.api.chooseAppDir();
53-
testchecked = document.getElementById('tests').checked;
55+
56+
//This is exclusive to the electron app
57+
// window.api.chooseAppDir();
58+
// testchecked = document.getElementById('tests').checked;
59+
60+
var zip = new JSZip();
61+
let componentFolder = zip.folder('componentfolder')
62+
for (let i in state.components){
63+
componentFolder.file(`${state.components[i].name}.jsx`, state.components[i].code)
64+
}
65+
zip.generateAsync({type:"blob"})
66+
.then(function(content) {
67+
// see FileSaver.js
68+
saveAs(content, "ReacTypeApp.zip");
69+
});
70+
5471
closeModal();
5572
};
5673

57-
// removes all listeners for the app_dir_selected event
58-
// this is important because otherwise listeners will pile up and events will trigger multiple events
59-
window.api.removeAllAppDirChosenListeners();
60-
61-
// add listener for when an app directory is chosen
62-
// when a directory is chosen, the callback will export the project to the chosen folder
63-
// Note: this listener is imported from the main process via preload.js
64-
window.api.addAppDirChosenListener(path => {
65-
exportProject(
66-
path,
67-
state.name
68-
? state.name
69-
: 'New_ReacType_Project_' + Math.ceil(Math.random() * 99).toString(),
70-
genOption,
71-
testchecked,
72-
state.projectType,
73-
state.components,
74-
state.rootComponents
75-
);
76-
});
77-
7874
setModal(
7975
createModal({
8076
closeModal,
@@ -114,3 +110,128 @@ export default function ExportButton() {
114110
</div>
115111
);
116112
}
113+
114+
//The below code is exclusive to the Electron App's export function
115+
116+
// import React, { useState, useCallback, useEffect } from 'react';
117+
// import List from '@mui/material/List';
118+
// import ListItem from '@mui/material/ListItem';
119+
// import ListItemText from '@mui/material/ListItemText';
120+
// import GetAppIcon from '@mui/icons-material/GetApp';
121+
// import Button from '@mui/material/Button';
122+
// import exportProject from '../../utils/exportProject.util';
123+
// import createModal from './createModal';
124+
// import { useSelector } from 'react-redux';
125+
// export default function ExportButton() {
126+
// const [modal, setModal] = useState(null);
127+
// const state = useSelector(store => store.appState)
128+
129+
// const genOptions: string[] = [
130+
// 'Export components',
131+
// 'Export components with application files'
132+
// ];
133+
// let genOption = 0;
134+
135+
// // Closes out the open modal
136+
// const closeModal = () => setModal('');
137+
138+
// const showGenerateAppModal = () => {
139+
// const children = (
140+
// <List className="export-preference">
141+
// {genOptions.map((option: string, i: number) => (
142+
// <ListItem
143+
// key={i}
144+
// // button
145+
// onClick={() => chooseGenOptions(i)}
146+
// style={{
147+
// border: '1px solid #3f51b5',
148+
// marginBottom: '2%',
149+
// marginTop: '5%'
150+
// }}
151+
// >
152+
// <ListItemText primary={option} style={{ textAlign: 'center' }} />
153+
// </ListItem>
154+
// ))}
155+
// <ListItem>
156+
// <input type="checkbox" id="tests" name="tests"></input>
157+
// <label for="tests">Include Tests</label>
158+
// </ListItem>
159+
// </List>
160+
// );
161+
// let testchecked = 0;
162+
// // helper function called by showGenerateAppModal
163+
// // this function will prompt the user to choose an app directory once they've chosen their export option
164+
// const chooseGenOptions = (genOpt: number) => {
165+
// // set export option: 0 --> export only components, 1 --> export full project
166+
// genOption = genOpt;
167+
168+
// //This is exclusive to the electron app
169+
// window.api.chooseAppDir();
170+
// testchecked = document.getElementById('tests').checked;
171+
// testerFunc();
172+
// closeModal();
173+
// };
174+
175+
// // removes all listeners for the app_dir_selected event
176+
// // this is important because otherwise listeners will pile up and events will trigger multiple events
177+
// //This is exclusive to the electron app
178+
// window.api.removeAllAppDirChosenListeners();
179+
180+
// // add listener for when an app directory is chosen
181+
// // when a directory is chosen, the callback will export the project to the chosen folder
182+
// // Note: this listener is imported from the main process via preload.js
183+
184+
// // This is exclusive to the electron app
185+
// window.api.addAppDirChosenListener(path => {
186+
// exportProject(
187+
// path,
188+
// state.name
189+
// ? state.name
190+
// : 'New_ReacType_Project_' + Math.ceil(Math.random() * 99).toString(),
191+
// genOption,
192+
// testchecked,
193+
// state.projectType,
194+
// state.components,
195+
// state.rootComponents
196+
// );
197+
// });
198+
199+
// setModal(
200+
// createModal({
201+
// closeModal,
202+
// children,
203+
// message: 'Choose export preference:',
204+
// primBtnLabel: null,
205+
// primBtnAction: null,
206+
// secBtnAction: null,
207+
// secBtnLabel: null,
208+
// open: true
209+
// })
210+
// );
211+
// };
212+
213+
// const exportKeyBind = useCallback(e => {
214+
// //Export Project
215+
// (e.key === 'e' && e.metaKey) || (e.key === 'e' && e.ctrlKey)
216+
// ? showGenerateAppModal()
217+
// : '';
218+
// }, []);
219+
220+
// useEffect(() => {
221+
// document.addEventListener('keydown', exportKeyBind);
222+
// return () => {
223+
// document.removeEventListener('keydown', exportKeyBind);
224+
// };
225+
// }, []);
226+
// return (
227+
// <div>
228+
// <button onClick={showGenerateAppModal}>Export Project
229+
// <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-download" viewBox="0 0 16 16">
230+
// <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
231+
// <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
232+
// </svg>
233+
// </button>
234+
// {modal}
235+
// </div>
236+
// );
237+
// }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ function navbarDropDown(props) {
308308
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
309309
</svg>
310310
</button>
311-
{state.isLoggedIn && <ExportButton />}
311+
{<ExportButton/>}
312312
<button onClick={handleDarkModeToggle}>
313313
{isDarkMode ? 'Light' : 'Dark'} Mode {switchDark}
314314
</button>

‎app/src/helperFunctions/cssRefresh.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Removes old link to css and creates a new stylesheet link on demo render
22
const cssRefresher = () => {
33
const oldStylesheet = document.getElementById('Render Stylesheet')
4+
console.log(oldStylesheet);
45
if (oldStylesheet !== null) oldStylesheet.remove();
56
const rando = Math.random() * 100000;
67
const newStylesheet = document.createElement("LINK");
@@ -9,5 +10,6 @@ const cssRefresher = () => {
910
newStylesheet.setAttribute("href", `https://reactype-caret.herokuapp.com/demoRender?${rando}`);
1011
newStylesheet.setAttribute("id", 'Render Stylesheet');
1112
document.getElementById('renderFocus').append(newStylesheet);
13+
console.log(newStylesheet)
1214
}
1315
export default cssRefresher;

‎package-lock.json

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,12 @@
157157
"esbuild-wasm": "^0.14.51",
158158
"eslint-plugin-react-hooks": "^4.6.0",
159159
"express-session": "^1.17.3",
160+
"file-saver": "^2.0.5",
160161
"fs": "^0.0.1-security",
161162
"graphql": "^16.6.0",
162163
"identity-obj-proxy": "^3.0.0",
163164
"js-cookie": "^3.0.1",
165+
"jszip": "^3.10.1",
164166
"localforage": "^1.10.0",
165167
"lodash": "^4.17.21",
166168
"mongoose": "^5.9.22",

0 commit comments

Comments
 (0)