Skip to content

Commit b0314ba

Browse files
javizqhjavizqh
committed
Remove custom file modal
1 parent d33575a commit b0314ba

File tree

8 files changed

+68
-251
lines changed

8 files changed

+68
-251
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jderobot-ide-interface",
3-
"version": "0.1.49",
3+
"version": "0.1.50",
44
"main": "dist/main.js",
55
"typings": "dist/index.d.ts",
66
"files": [

‎src/components/Explorer/Explorer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from "Components";
1111
import FileExplorer from "./file_explorer/FileExplorer";
1212

13-
import { newFileData, Entry, ExplorerEntry } from "Types";
13+
import { Entry, ExplorerEntry } from "Types";
1414

1515
import {
1616
AddIcon,
@@ -138,12 +138,12 @@ const Explorer = ({
138138
}
139139
};
140140

141-
const handleNewActionSubmit = async (location: string, data: newFileData) => {
141+
const handleNewActionSubmit = async (location: string, name: string) => {
142142
handleCloseNewFileModal();
143143

144-
if (data.fileName !== "") {
144+
if (name !== "") {
145145
try {
146-
await api.file.create(project, location, data);
146+
await api.file.create(project, location, name);
147147
fetchFileList(); // Update the file list
148148
} catch (e) {
149149
if (e instanceof Error) {

‎src/components/IdeInterface/IdeInterface.stories.tsx‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -87,44 +87,3 @@ export const Main: Story = {
8787
layout: "both",
8888
},
8989
};
90-
91-
// const explorer: ExplorerEntry = {
92-
// name: "string";
93-
// list(project: string): Promise<string>;
94-
// file: {
95-
// create(
96-
// project: string,
97-
// location: string,
98-
// data: newFileData,
99-
// ): Promise<void>;
100-
// get(project: string, path: string): Promise<string>;
101-
// rename(project: string, oldPath: string, newPath: string): Promise<void>;
102-
// delete(project: string, path: string): Promise<void>;
103-
// };
104-
// folder: {
105-
// create(project: string, location: string, name: string): Promise<void>;
106-
// rename(project: string, oldPath: string, newPath: string): Promise<void>;
107-
// delete(project: string, path: string): Promise<void>;
108-
// };
109-
// }
110-
111-
// export const WithExplorers: Story = {
112-
// render: (args) => (
113-
// <div style={{ width: "100vw", height: "100vh" }}>
114-
// <IdeInterface
115-
// {...args}
116-
// commsManager={null}
117-
// resetManager={() => {}}
118-
// project={"currentProjectname"}
119-
// explorers={[]}
120-
// editorApi={[]}
121-
// extraEditors={[]}
122-
// viewers={[gazeboViewer, terminalViewer]}
123-
// options={[]}
124-
// />
125-
// </div>
126-
// ),
127-
// args: {
128-
// layout: "both",
129-
// },
130-
// };

‎src/components/Modals/NewFileModal.tsx‎

Lines changed: 53 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,6 @@
1-
import { useState, useEffect, useRef } from "react";
2-
import Modal, {
3-
ModalInputBox,
4-
ModalInputSelectIcon,
5-
ModalRow,
6-
ModalTitlebar,
7-
} from "./Modal";
8-
9-
import { EmptyTeplateIcon, ActionTeplateIcon, IOTeplateIcon } from "Assets";
10-
import { Entry, ModalInputSelectIconEntry } from "Types";
11-
12-
const initialNewFileModalData = {
13-
fileType: "plain",
14-
fileName: "",
15-
templateType: "empty",
16-
};
1+
import React, { useState, useEffect, useRef } from "react";
2+
import Modal, { ModalInputBox, ModalRow, ModalTitlebar } from "./Modal";
3+
import { Entry } from "Types";
174

185
const NewFileModal = ({
196
onSubmit,
@@ -29,223 +16,116 @@ const NewFileModal = ({
2916
location: string;
3017
}) => {
3118
const focusInputRef = useRef<HTMLInputElement>(null);
32-
const [formState, setFormState] = useState(initialNewFileModalData);
33-
const [template, setTemplate] = useState<string>("empty");
34-
const [creationType, setCreationType] = useState<string>("plain");
35-
const [isCreationAllowed, allowCreation] = useState<boolean>(false);
36-
// Search lists for valid names
37-
const [searchActionsList, setSearchActionsList] = useState<Entry[]>([]);
38-
const [searchPlainList, setSearchPlainList] = useState<Entry[]>([]);
39-
40-
///////////////////////// TYPES ////////////////////////////////////////////////
41-
const plain: ModalInputSelectIconEntry = {
42-
id: "plain",
43-
title: "Plain File",
44-
iconType: "fill",
45-
icon: <ActionTeplateIcon viewBox="0 0 6.4 6.4" />,
46-
};
47-
48-
const actions: ModalInputSelectIconEntry = {
49-
id: "actions",
50-
title: "Action",
51-
iconType: "fill",
52-
icon: <IOTeplateIcon viewBox="0 0 20 20" />,
53-
};
54-
55-
///////////////////////// ACTIONS //////////////////////////////////////////////
56-
const empty: ModalInputSelectIconEntry = {
57-
id: "empty",
58-
title: "Empty",
59-
iconType: "stroke",
60-
icon: <EmptyTeplateIcon viewBox="0 0 20 20" />,
61-
};
62-
63-
const action: ModalInputSelectIconEntry = {
64-
id: "action",
65-
title: "Action",
66-
iconType: "fill",
67-
icon: <ActionTeplateIcon viewBox="0 0 6.4 6.4" />,
68-
};
69-
70-
const io: ModalInputSelectIconEntry = {
71-
id: "io",
72-
title: "I/O",
73-
iconType: "fill",
74-
icon: <IOTeplateIcon viewBox="0 0 20 20" />,
75-
};
76-
77-
const onOptionTypeChange = (e: any) => {
78-
console.log(e);
79-
setCreationType(e.target.value);
80-
handleInputChange(e);
81-
};
82-
83-
const onOptionTemplateChange = (e: any) => {
84-
setTemplate(e.target.value);
85-
handleInputChange(e);
86-
};
19+
const [fileName, setName] = useState<string>("");
20+
const [isCreationAllowed, allowCreation] = useState(false);
21+
const [searchList, setSearchList] = useState<Entry[]>([]);
8722

8823
useEffect(() => {
8924
if (isOpen && focusInputRef.current) {
9025
setTimeout(() => {
9126
focusInputRef.current!.focus();
9227
}, 0);
9328
}
94-
setCreationType("plain");
95-
setTemplate("empty");
9629

9730
if (isOpen) {
98-
//NOTE: One for actions and one for location
99-
createValidNamesList(location, setSearchPlainList);
100-
createValidNamesList("actions", setSearchActionsList);
101-
}
102-
}, [isOpen]);
103-
104-
useEffect(() => {
105-
updateCreation(formState["fileName"]);
106-
}, [creationType]);
107-
108-
const createValidNamesList = (orig_path: string, callback: Function) => {
109-
let search_list = fileList;
31+
let search_list = fileList;
11032

111-
if (orig_path) {
112-
var path = orig_path.split("/");
33+
if (location) {
34+
var path = location.split("/");
11335

114-
for (let index = 0; index < path.length; index++) {
115-
const find = search_list.find(
116-
(entry) => entry.name === path[index] && entry.is_dir,
117-
);
36+
for (let index = 0; index < path.length; index++) {
37+
const find = search_list.find(
38+
(entry: Entry) => entry.name === path[index] && entry.is_dir,
39+
);
11840

119-
if (find !== undefined) {
120-
search_list = find.files;
121-
} else {
122-
search_list = [];
41+
if (find !== undefined) {
42+
search_list = find.files;
43+
} else {
44+
search_list = [];
45+
}
12346
}
12447
}
125-
}
12648

127-
if (search_list) {
128-
callback(search_list);
129-
} else {
130-
callback([]);
49+
if (search_list) {
50+
setSearchList(search_list);
51+
} else {
52+
setSearchList([]);
53+
}
13154
}
132-
};
55+
}, [isOpen]);
13356

134-
const handleInputChange = (event: any) => {
57+
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
13558
const { name, value } = event.target;
136-
137-
setFormState((prevFormData) => ({
138-
...prevFormData,
139-
[name]: value,
140-
}));
141-
142-
if (name === "fileName") {
143-
updateCreation(value);
144-
}
145-
};
146-
147-
const updateCreation = (newName: string) => {
14859
var isValidName = true;
149-
var preCheck, checkList;
15060

151-
if (creationType === "actions") {
152-
preCheck =
153-
newName !== "" && !newName.includes(".") && !newName.includes("/");
154-
checkList = searchActionsList;
155-
} else {
156-
preCheck = newName !== "" && !newName.includes("/");
157-
checkList = searchPlainList;
158-
}
61+
setName(value);
15962

160-
if (preCheck && checkList) {
161-
checkList.some((element) => {
162-
var name = element.name;
163-
164-
if (creationType === "actions") {
165-
name = name.replace(".py", "");
166-
}
63+
if (name === "fileName") {
64+
if (value !== "" && !value.includes("/")) {
65+
searchList.some((element) => {
66+
if (element.name === value) {
67+
isValidName = false;
68+
return true;
69+
}
70+
return false;
71+
});
72+
} else {
73+
isValidName = false;
74+
}
16775

168-
if (name === newName) {
169-
isValidName = false;
170-
return true;
171-
}
172-
return false;
173-
});
174-
} else {
175-
isValidName = false;
76+
allowCreation(isValidName);
17677
}
177-
console.log(creationType, checkList);
178-
179-
allowCreation(isValidName);
18078
};
18179

182-
const handleSubmit = (event: any) => {
80+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
18381
event.preventDefault();
184-
onSubmit(location, formState);
185-
setFormState(initialNewFileModalData);
82+
onSubmit(location, fileName);
83+
setName("");
18684
allowCreation(false);
85+
onClose();
18786
};
18887

189-
const handleCancel = (event: any) => {
88+
const handleCancel = (event: React.FormEvent<HTMLFormElement> | null) => {
19089
if (event) {
19190
event.preventDefault();
19291
}
193-
19492
onClose();
195-
setFormState(initialNewFileModalData);
93+
setName("");
19694
allowCreation(false);
19795
};
19896

19997
return (
20098
<Modal
201-
id="new-action-modal"
99+
id="new-file-modal"
202100
isOpen={isOpen}
203-
onClose={handleCancel}
101+
onClose={onClose}
204102
onSubmit={handleSubmit}
205103
onReset={handleCancel}
206104
>
207105
<ModalTitlebar
208106
title="Create new file"
209107
htmlFor="fileName"
210108
hasClose
211-
handleClose={handleCancel}
109+
handleClose={() => {
110+
handleCancel(null);
111+
}}
212112
/>
213113
<ModalRow type="input">
214114
<ModalInputBox
215-
isInputValid={isCreationAllowed || formState.fileName === ""}
115+
isInputValid={isCreationAllowed || fileName === ""}
216116
ref={focusInputRef}
217-
id="renameData"
117+
id="fileName"
218118
placeholder="File Name"
219119
onChange={handleInputChange}
220120
type="text"
221121
autoComplete="off"
222122
required
223123
/>
224124
</ModalRow>
225-
<ModalRow>
226-
<ModalInputSelectIcon
227-
id="fileType"
228-
title="Select File Type"
229-
onChange={onOptionTypeChange}
230-
selected={creationType}
231-
entries={[plain, actions]}
232-
/>
233-
</ModalRow>
234-
{creationType === "actions" && (
235-
<ModalRow>
236-
<ModalInputSelectIcon
237-
id="templateType"
238-
title="Select Template Type"
239-
onChange={onOptionTemplateChange}
240-
selected={template}
241-
entries={[empty, action, io]}
242-
/>
243-
</ModalRow>
244-
)}
245125
<ModalRow type="buttons">
246126
<button
247127
type="submit"
248-
id="create-new-action"
128+
id="create-new-file"
249129
disabled={!isCreationAllowed}
250130
>
251131
Create

0 commit comments

Comments
 (0)