Skip to content

Commit 2b2706e

Browse files
VNguyenCodeVNguyenCode
committed
Sucessfully drilled props down needed for AtomsRelationships component from backend
1 parent 286a6e3 commit 2b2706e

File tree

5 files changed

+117
-111
lines changed

5 files changed

+117
-111
lines changed

‎src/app/components/AtomsRelationship.jsx

Lines changed: 105 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -2,113 +2,118 @@ import React, { Component, useEffect, useState, Fragment } from 'react';
22
import { Chart } from 'react-google-charts';
33

44
function AtomsRelationship(props) {
5-
const { atomsRel } = props;
5+
const { atomsComponent , atomSelectors } = props;
6+
console.log(props)
67

7-
const atomsAndComp = atomsRel
8-
.filter((e) => e[2] !== 'atoms and selectors')
9-
.map((e) => {
10-
let copy = [...e];
11-
copy[2] = 1;
12-
return [...copy];
13-
});
8+
// const atomsAndComp = atomsRel
9+
// .filter((e) => e[2] !== 'atoms and selectors')
10+
// .map((e) => {
11+
// let copy = [...e];
12+
// copy[2] = 1;
13+
// return [...copy];
14+
// });
1415

15-
const atomsAndSelectors = atomsRel
16-
.filter((e) => e[2] === 'atoms and selectors')
17-
.map((e) => {
18-
let copy = [...e];
19-
copy[2] = 1;
20-
return [...copy];
21-
});
16+
// const atomsAndSelectors = atomsRel
17+
// .filter((e) => e[2] === 'atoms and selectors')
18+
// .map((e) => {
19+
// let copy = [...e];
20+
// copy[2] = 1;
21+
// return [...copy];
22+
// });
2223

23-
const copyatomsRel = atomsRel.map((e) => {
24-
let copy = [...e];
25-
copy[2] = 1;
26-
return copy;
27-
});
28-
const [atoms, setAtoms] = useState([...copyatomsRel]);
29-
const [atomAndSelectorCheck, setAtomAndSelectorCheck] = useState(false);
30-
const [atomAndCompCheck, setAtomAndCompCheck] = useState(false);
24+
// const copyatomsRel = atomsRel.map((e) => {
25+
// let copy = [...e];
26+
// copy[2] = 1;
27+
// return copy;
28+
// });
29+
// const [atoms, setAtoms] = useState([...copyatomsRel]);
30+
// const [atomAndSelectorCheck, setAtomAndSelectorCheck] = useState(false);
31+
// const [atomAndCompCheck, setAtomAndCompCheck] = useState(false);
3132

32-
useEffect(() => {
33-
if (
34-
(!atomAndSelectorCheck && !atomAndCompCheck) ||
35-
(atomAndSelectorCheck && atomAndCompCheck)
36-
) {
37-
setAtoms(copyatomsRel);
38-
} else if (atomAndSelectorCheck) {
39-
setAtoms(atomsAndSelectors);
40-
} else {
41-
setAtoms(atomsAndComp);
42-
}
43-
}, [atomAndSelectorCheck, atomAndCompCheck, props]);
33+
// useEffect(() => {
34+
// if (
35+
// (!atomAndSelectorCheck && !atomAndCompCheck) ||
36+
// (atomAndSelectorCheck && atomAndCompCheck)
37+
// ) {
38+
// setAtoms(copyatomsRel);
39+
// } else if (atomAndSelectorCheck) {
40+
// setAtoms(atomsAndSelectors);
41+
// } else {
42+
// setAtoms(atomsAndComp);
43+
// }
44+
// }, [atomAndSelectorCheck, atomAndCompCheck, props]);
4445

4546
return (
46-
<div className="history-d3-container">
47-
{atoms && (
48-
<Fragment>
49-
<Chart
50-
width={'100%'}
51-
height={'98%'}
52-
chartType="Sankey"
53-
options={{
54-
sankey: {
55-
link: { color: { fill: '#gray', fillOpacity: 0.1 } },
56-
node: {
57-
colors: [
58-
'#4a91c7',
59-
'#5b9bce',
60-
'#6ba6d5',
61-
'#7bb0dc',
62-
'#8abbe3',
63-
'#99c6ea',
64-
'#a8d0f1',
65-
'#b7dbf8',
66-
'#c6e6ff',
67-
'#46edf2',
68-
'#76f5f3',
69-
'#95B6B7',
70-
'#76dcde',
71-
'#5fdaed',
72-
],
73-
74-
label: { color: '#fff', fontSize: '13', fontName: 'Monaco' },
75-
nodePadding: 50,
76-
width: 15,
77-
},
78-
},
79-
tooltip: { textStyle: { color: 'white', fontSize: 0.1 } },
80-
}}
81-
loader={<div>Loading Chart</div>}
82-
data={[['Atom', 'Selector', ''], ...atoms]}
83-
rootProps={{ 'data-testid': '1' }}
84-
/>
85-
<div>
86-
<input
87-
type="checkbox"
88-
id="atomscomps"
89-
onClick={(e) =>
90-
setAtomAndCompCheck(atomAndCompCheck ? false : true)
91-
}
92-
/>
93-
<label htmlFor="atomscomps">
94-
{' '}
95-
Only Show Atoms (or Selectors) and Components{' '}
96-
</label>
97-
<input
98-
type="checkbox"
99-
id="atomsselectors"
100-
onClick={(e) =>
101-
setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)
102-
}
103-
/>
104-
<label htmlFor="atomsselectors">
105-
{' '}
106-
Only Show Atoms and Selectors{' '}
107-
</label>
108-
</div>
109-
</Fragment>
110-
)}
47+
48+
<div>
49+
Hello
11150
</div>
51+
// <div className="history-d3-container">
52+
// {atoms && (
53+
// <Fragment>
54+
// <Chart
55+
// width={'100%'}
56+
// height={'98%'}
57+
// chartType="Sankey"
58+
// options={{
59+
// sankey: {
60+
// link: { color: { fill: '#gray', fillOpacity: 0.1 } },
61+
// node: {
62+
// colors: [
63+
// '#4a91c7',
64+
// '#5b9bce',
65+
// '#6ba6d5',
66+
// '#7bb0dc',
67+
// '#8abbe3',
68+
// '#99c6ea',
69+
// '#a8d0f1',
70+
// '#b7dbf8',
71+
// '#c6e6ff',
72+
// '#46edf2',
73+
// '#76f5f3',
74+
// '#95B6B7',
75+
// '#76dcde',
76+
// '#5fdaed',
77+
// ],
78+
79+
// label: { color: '#fff', fontSize: '13', fontName: 'Monaco' },
80+
// nodePadding: 50,
81+
// width: 15,
82+
// },
83+
// },
84+
// tooltip: { textStyle: { color: 'white', fontSize: 0.1 } },
85+
// }}
86+
// loader={<div>Loading Chart</div>}
87+
// data={[['Atom', 'Selector', ''], ...atoms]}
88+
// rootProps={{ 'data-testid': '1' }}
89+
// />
90+
// <div>
91+
// <input
92+
// type="checkbox"
93+
// id="atomscomps"
94+
// onClick={(e) =>
95+
// setAtomAndCompCheck(atomAndCompCheck ? false : true)
96+
// }
97+
// />
98+
// <label htmlFor="atomscomps">
99+
// {' '}
100+
// Only Show Atoms (or Selectors) and Components{' '}
101+
// </label>
102+
// <input
103+
// type="checkbox"
104+
// id="atomsselectors"
105+
// onClick={(e) =>
106+
// setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)
107+
// }
108+
// />
109+
// <label htmlFor="atomsselectors">
110+
// {' '}
111+
// Only Show Atoms and Selectors{' '}
112+
// </label>
113+
// </div>
114+
// </Fragment>
115+
// )}
116+
// </div>
112117
);
113118
}
114119

‎src/app/components/StateRoute.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ interface StateRouteProps {
3131
state?: string | object;
3232
stateSnaphot?: object;
3333
children?: any[];
34-
AtomsComponents?: any;
35-
AtomsSelectors?: any;
34+
atomsComponents?: any;
35+
atomSelectors?: any;
3636

3737
};
3838
hierarchy: any;
@@ -43,7 +43,8 @@ interface StateRouteProps {
4343
const StateRoute = (props: StateRouteProps) => {
4444
const { snapshot, hierarchy, snapshots, viewIndex } = props;
4545

46-
const isRecoil = snapshot.AtomsComponents ? true : false;
46+
const isRecoil = snapshot.atomsComponents ? true : false;
47+
console.log(isRecoil)
4748
const [noRenderData, setNoRenderData] = useState(false);
4849

4950
// component map zoom state
@@ -81,7 +82,9 @@ const StateRoute = (props: StateRouteProps) => {
8182
};
8283

8384
const renderAtomsRelationship = () => (
84-
<AtomsRelationship atomsRel={snapshot.AtomsComponents} />
85+
<AtomsRelationship
86+
atomsComponents={snapshot.atomsComponents}
87+
atomSelectors = {snapshot.atomSelectors} />
8588
);
8689

8790
// the hierarchy gets set on the first click in the page
@@ -137,7 +140,7 @@ const StateRoute = (props: StateRouteProps) => {
137140
activeClassName="is-active"
138141
to="/relationship"
139142
>
140-
Data Flow
143+
AtomsRecoil
141144
</NavLink>
142145
)}
143146

‎src/app/containers/StateContainer.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ const StateContainer = (props:StateContainerProps): unknown => {
2929
} = props;
3030
const [Text, setText] = useState('State');
3131

32-
console.log(props)
33-
3432
return (
3533
<Router>
3634
<div className="state-container">

‎src/backend/linkFiber.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
7676

7777
if (isRecoil) {
7878
// getRecoilState();
79-
payload.AtomsComponents = atomsComponents;
80-
payload.AtomsSelectors = atomsSelectors;
79+
payload.atomsComponents = atomsComponents;
80+
payload.atomSelectors = atomsSelectors;
8181
}
8282

8383

‎src/backend/tree.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ class Tree {
4545

4646
parent: Tree
4747

48-
AtomsComponents: any;
48+
atomsComponents: any;
4949

50-
AtomsSelectors: any;
50+
atomSelectors: any;
5151

5252
constructor(state: string | {}, name = 'nameless', componentData: {} = {}) {
5353
this.state = state === 'root' ? 'root' : serializeState(state);

0 commit comments

Comments
 (0)