Skip to content

Commit 84ba56c

Browse files
GilbertCherrieGilbertCherrie
committed
Added api calls to demo
1 parent 7af9c71 commit 84ba56c

File tree

1 file changed

+200
-138
lines changed
  • app/javascript/components/automate-entry-points

1 file changed

+200
-138
lines changed

‎app/javascript/components/automate-entry-points/index.jsx‎

Lines changed: 200 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -131,83 +131,110 @@ const DirectoryTreeView = () => {
131131
// },
132132
// ]);
133133

134-
const folder = {
135-
id: 'root',
136-
name: '',
137-
children: [
138-
{
139-
id: 'src_folder',
140-
name: 'src',
141-
children: [
142-
{
143-
id: 'index.js_file',
144-
name: 'index.js',
145-
metadata: { a: '1', b: '2', c: 'test' },
146-
},
147-
{
148-
id: 'styles.css_file',
149-
name: 'styles.css',
150-
metadata: { a: '1', b: '2', c: 'test' },
151-
}],
152-
},
153-
{
154-
id: 'node_modules_folder',
155-
name: 'node_modules',
156-
children: [
157-
{
158-
id: 'react-accessible-treeview-folder',
159-
name: 'react-accessible-treeview',
160-
children: [{
161-
id: 'index.js_file2',
162-
name: 'index.js',
163-
}],
164-
},
165-
{
166-
id: 'react_folder',
167-
name: 'react',
168-
children: [{
169-
id: 'index.js_file3',
170-
name: 'index.js',
171-
}],
172-
},
173-
],
174-
},
175-
{
176-
id: '.npmignore_file',
177-
name: '.npmignore',
178-
},
179-
{
180-
id: 'package.json_file',
181-
name: 'package.json',
182-
},
183-
{
184-
id: 'webpack.config.js_file',
185-
name: 'webpack.config.js',
186-
},
187-
],
188-
};
134+
// const folder = {
135+
// id: 'root',
136+
// name: '',
137+
// children: [
138+
// {
139+
// id: 'src_folder',
140+
// name: 'src',
141+
// children: [
142+
// {
143+
// id: 'index.js_file',
144+
// name: 'index.js',
145+
// metadata: { a: '1', b: '2', c: 'test' },
146+
// },
147+
// {
148+
// id: 'styles.css_file',
149+
// name: 'styles.css',
150+
// metadata: { a: '1', b: '2', c: 'test' },
151+
// }],
152+
// },
153+
// {
154+
// id: 'node_modules_folder',
155+
// name: 'node_modules',
156+
// children: [
157+
// {
158+
// id: 'react-accessible-treeview-folder',
159+
// name: 'react-accessible-treeview',
160+
// children: [{
161+
// id: 'index.js_file2',
162+
// name: 'index.js',
163+
// }],
164+
// },
165+
// {
166+
// id: 'react_folder',
167+
// name: 'react',
168+
// children: [{
169+
// id: 'index.js_file3',
170+
// name: 'index.js',
171+
// }],
172+
// },
173+
// ],
174+
// },
175+
// {
176+
// id: '.npmignore_file',
177+
// name: '.npmignore',
178+
// },
179+
// {
180+
// id: 'package.json_file',
181+
// name: 'package.json',
182+
// },
183+
// {
184+
// id: 'webpack.config.js_file',
185+
// name: 'webpack.config.js',
186+
// },
187+
// ],
188+
// };
189189

190-
const data = flattenTree(folder);
191-
console.log(data);
192-
193-
const initialData = {
190+
const root = {
194191
id: 'root',
195192
name: '',
196193
children: [
197-
{
198-
id: 'root-node',
199-
name: '',
200-
},
194+
// {
195+
// id: 'datastore_folder',
196+
// name: __('Datastore'),
197+
// children: [{}],
198+
// },
201199
],
202200
};
203201

204-
const [rawTreeData, setRawTreeData] = useState(folder);
205-
const [treeData, setTreeData] = useState(flattenTree(initialData));
202+
const [rawTreeData, setRawTreeData] = useState(root);
203+
const [treeData, setTreeData] = useState(flattenTree(root));
206204
const [expandedIds, setExpandedIds] = useState([]);
205+
const [treeIds, setTreeIds] = useState(['datastore_folder']);
207206
const [key, setKey] = useState('initial');
208207

209208
useEffect(() => {
210-
setTreeData(data);
209+
const newChildren = [];
210+
API.get('/api/automate_domains?expand=resources').then((apiData) => {
211+
console.log(apiData);
212+
apiData.resources.forEach((domain) => {
213+
newChildren.push({
214+
id: domain.id,
215+
name: domain.name,
216+
children: [{}],
217+
parent: 'datastore_folder',
218+
metadata: {},
219+
});
220+
});
221+
return newChildren;
222+
}).then((newChildren) => {
223+
const tempIdsArray = treeIds;
224+
newChildren.forEach((node) => {
225+
if (!treeIds.includes(node.id)) {
226+
tempIdsArray.push(node.id);
227+
}
228+
});
229+
const tempData = root;
230+
tempData.children = [{
231+
id: 'datastore_folder',
232+
name: __('Datastore'),
233+
}];
234+
tempData.children[0].children = newChildren;
235+
setTreeIds(tempIdsArray);
236+
setTreeData(flattenTree(tempData));
237+
});
211238
}, []);
212239

213240
useEffect(() => {
@@ -217,9 +244,9 @@ const DirectoryTreeView = () => {
217244

218245
useEffect(() => {
219246
console.log(treeData);
220-
if (treeData.length > 12) {
221-
setExpandedIds(['src_folder']);
222-
setKey('new');
247+
if (treeData.length > 3) {
248+
setExpandedIds(['datastore_folder']);
249+
setKey(treeData.length);
223250
}
224251
}, [treeData]);
225252

@@ -231,18 +258,22 @@ const DirectoryTreeView = () => {
231258
));
232259

233260
const FileIcon = ({ filename }) => {
234-
const extension = filename.slice(filename.lastIndexOf('.') + 1);
235-
switch (extension) {
236-
case 'js':
237-
return <Document16 className="icon" />;
238-
case 'css':
239-
return <Document16 className="icon" />;
240-
case 'json':
241-
return <Document16 className="icon" />;
242-
case 'npmignore':
243-
return <Document16 className="icon" />;
244-
default:
245-
return <Document16 className="icon" />;
261+
if (filename) {
262+
const extension = filename.slice(filename.lastIndexOf('.') + 1);
263+
switch (extension) {
264+
case 'js':
265+
return <Document16 className="icon" />;
266+
case 'css':
267+
return <Document16 className="icon" />;
268+
case 'json':
269+
return <Document16 className="icon" />;
270+
case 'npmignore':
271+
return <Document16 className="icon" />;
272+
default:
273+
return <Document16 className="icon" />;
274+
}
275+
} else {
276+
return <Document16 className="icon" />;
246277
}
247278
};
248279

@@ -257,73 +288,104 @@ const DirectoryTreeView = () => {
257288
const tempData = treeData;
258289
const newChildren = [];
259290

260-
if (value && value.element) {
261-
const ids = value.element.id.split('_');
262-
if (ids.includes('folder')) {
263-
tempData.forEach((item) => {
264-
if (item.id === value.element.id) {
265-
console.log(item.name);
266-
API.get('/api/automate_domains?expand=resources').then((apiData) => {
267-
console.log(apiData);
268-
apiData.resources.forEach((domain) => {
269-
newChildren.push({
270-
id: domain.id,
271-
name: domain.name,
272-
children: [],
273-
parent: item.id,
274-
metadata: {},
275-
});
276-
});
277-
return newChildren;
278-
}).then((newChildrenArray) => {
279-
const newTreeData = treeData.concat(newChildrenArray[2]);
280-
if (treeData.includes(newChildrenArray[0]) === false) {
281-
newTreeData[1].children = ['index.js_file', 'styles.css_file', '1177'];
282-
if (treeData.length === 12) {
283-
setTreeData(newTreeData);
284-
// Send all relevant data including new children and the clicked item to a new useffect using a new state variable
285-
// From this new use effect we can set the treedata, expandedids and the key state variables
286-
}
287-
}
291+
if (value && value.element && value.element.id !== 'datastore_folder') {
292+
API.get(`/api/automate/${value.element.name}?depth=1`).then((test) => {
293+
tempData.forEach((node) => {
294+
if (node.id === value.element.id) {
295+
node.children = ['new-test-0'];
296+
tempData.push({
297+
id: 'new-test-0',
298+
name: 'new test',
299+
children: [],
300+
parent: node.id,
301+
metadata: {},
288302
});
303+
console.log(tempData);
304+
setTreeData(tempData);
289305
}
290306
});
291-
}
307+
});
292308
}
309+
// if (value && value.element && value.element.id === 'datastore_folder') {
310+
// const ids = value.element.id.split('_');
311+
// if (ids.includes('folder')) {
312+
// tempData.forEach((item) => {
313+
// if (item.id === value.element.id) {
314+
// console.log(item.name);
315+
// API.get('/api/automate_domains?expand=resources').then((apiData) => {
316+
// console.log(apiData);
317+
// apiData.resources.forEach((domain) => {
318+
// newChildren.push({
319+
// id: domain.id,
320+
// name: domain.name,
321+
// children: [],
322+
// parent: item.id,
323+
// metadata: {},
324+
// });
325+
// });
326+
// return newChildren;
327+
// }).then((newChildrenArray) => {
328+
// const newTreeData = treeData;
329+
// const tempIdsArray = treeIds;
330+
// newChildrenArray.forEach((node) => {
331+
// if (!treeIds.includes(node.id)) {
332+
// newTreeData.push(node);
333+
// tempIdsArray.push(node.id);
334+
// newTreeData[1].children.push(node.id);
335+
// }
336+
// });
337+
// setTreeIds(tempIdsArray);
338+
// setTreeData(newTreeData);
339+
// // if (treeData.includes(newChildrenArray[0]) === false) {
340+
// // // newTreeData[1].children = ['index.js_file', 'styles.css_file', '1177'];
341+
// // if (treeData.length === 12) {
342+
// // setTreeData(newTreeData);
343+
// // // Send all relevant data including new children and the clicked item to a new useffect using a new state variable
344+
// // // From this new use effect we can set the treedata, expandedids and the key state variables
345+
// // }
346+
// // }
347+
// });
348+
// }
349+
// });
350+
// }
351+
// }
293352
};
294353

295354
return (
296355
<div>
297356
<div className="directory">
298-
<TreeView
299-
key={key}
300-
data={treeData}
301-
aria-label="directory tree"
302-
defaultSelectedIds={[]}
303-
onSelect={onSelect}
304-
onExpand={onExpand}
305-
defaultExpandedIds={expandedIds}
306-
nodeRenderer={({
307-
element,
308-
isBranch,
309-
isExpanded,
310-
getNodeProps,
311-
level,
312-
}) => {
313-
getNodeProps();
314-
return (
315-
<div {...getNodeProps()} style={{ paddingLeft: 20 * (level - 1) }}>
316-
{isBranch ? (
317-
<FolderIcon isOpen={isExpanded} />
318-
) : (
319-
<FileIcon filename={element.name} />
320-
)}
357+
{treeData.length > 1
358+
? (
359+
<TreeView
360+
key={key}
361+
data={treeData}
362+
aria-label="directory tree"
363+
defaultSelectedIds={[]}
364+
onSelect={onSelect}
365+
onExpand={onExpand}
366+
defaultExpandedIds={expandedIds}
367+
nodeRenderer={({
368+
element,
369+
isBranch,
370+
isExpanded,
371+
getNodeProps,
372+
level,
373+
}) => {
374+
getNodeProps();
375+
return (
376+
<div {...getNodeProps()} style={{ paddingLeft: 20 * (level - 1) }}>
377+
{isBranch ? (
378+
<FolderIcon isOpen={isExpanded} />
379+
) : (
380+
<FileIcon filename={element.name} />
381+
)}
321382

322-
{element.name}
323-
</div>
324-
);
325-
}}
326-
/>
383+
{element.name}
384+
</div>
385+
);
386+
}}
387+
/>
388+
) : null}
327389
</div>
328390
</div>
329391
);

0 commit comments

Comments
 (0)