Skip to content

Commit 836ea4f

Browse files
kr1spybaconkr1spybacon
authored
Merge pull request #4 from oslabs-beta/renderNextjs
changed some of the ids to name for more declarative code
2 parents fa121e6 + 5f0e3ce commit 836ea4f

File tree

4 files changed

+73
-28
lines changed

4 files changed

+73
-28
lines changed

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Hook state:
1717
*/
1818
// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
1919
const DragDropPanel = (props): JSX.Element => {
20-
const [state, dispatch] = useContext(StateContext);
20+
const [state, dispatch] = useContext(StateContext);
2121
const { isThemeLight } = props;
2222

2323
const handleDelete = (id: number): void => {
@@ -37,7 +37,7 @@ const DragDropPanel = (props): JSX.Element => {
3737
>
3838
<h3>HTML ELEMENTS</h3>
3939
{htmlTypesToRender.map(option => {
40-
if (![17, 18, 19, 20].includes(option.id)) {
40+
if (!['Switch', 'LinkTo', 'LinkHref', 'Image'].includes(option.name)) {
4141
return (
4242
<HTMLItem
4343
name={option.name}
@@ -53,7 +53,7 @@ const DragDropPanel = (props): JSX.Element => {
5353
})}
5454
{state.projectType === "Classic React" ? <h3>REACT ROUTER</h3> : null}
5555
{htmlTypesToRender.map(option => {
56-
if ((option.id === 17 || option.id === 18) && state.projectType === "Classic React") {
56+
if ((option.name === 'Switch' || option.name === 'LinkTo') && state.projectType === "Classic React") {
5757
return (
5858
<HTMLItem
5959
name={option.name}
@@ -69,7 +69,7 @@ const DragDropPanel = (props): JSX.Element => {
6969

7070
{state.projectType === "Next.js" ? <h3>Next.js</h3> : null}
7171
{htmlTypesToRender.map(option => {
72-
if ((option.id === 19 || option.id === 20) && state.projectType === "Next.js") {
72+
if ((option.framework === 'nextjs') && state.projectType === "Next.js") {
7373
return (
7474
<HTMLItem
7575
name={option.name}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import StateContext from '../../context/context';
44
import FormControl from '@material-ui/core/FormControl';
55
import MenuItem from '@material-ui/core/MenuItem';
66
import Select from '@material-ui/core/Select';
7+
import { InputLabel } from '@material-ui/core';
78

89

9-
function AddLink({id}: AddRoutes) {
10+
function AddLink({ id }: AddRoutes) {
1011
const [, dispatch] = useContext(StateContext);
1112

1213
const handleClick = (id) => {

‎app/src/context/HTMLTypes.tsx

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ const HTMLTypes: HTMLType[] = [
1515
style: {},
1616
placeHolderShort: 'div',
1717
placeHolderLong: '',
18-
icon: HeaderIcon
18+
icon: HeaderIcon,
19+
framework: 'reactClassic',
20+
nestable: true
1921
},
2022
// do not move this separator element out of index 1 in this array
2123
// in componentReducer.ts, separator is referenced as 'initialState.HTMLTypes[1]'
@@ -26,7 +28,9 @@ const HTMLTypes: HTMLType[] = [
2628
style: { border: 'none' },
2729
placeHolderShort: '',
2830
placeHolderLong: '',
29-
icon: ''
31+
icon: '',
32+
framework: '',
33+
nestable: true
3034
},
3135
{
3236
id: 1,
@@ -35,7 +39,9 @@ const HTMLTypes: HTMLType[] = [
3539
style: {},
3640
placeHolderShort: 'image',
3741
placeHolderLong: '',
38-
icon: ImageIcon
42+
icon: ImageIcon,
43+
framework: 'reactClassic',
44+
nestable: false
3945
},
4046
{
4147
id: 2,
@@ -44,7 +50,9 @@ const HTMLTypes: HTMLType[] = [
4450
style: {},
4551
placeHolderShort: 'form',
4652
placeHolderLong: '',
47-
icon: FormIcon
53+
icon: FormIcon,
54+
framework: 'reactClassic',
55+
nestable: true
4856
},
4957
{
5058
id: 4,
@@ -53,7 +61,9 @@ const HTMLTypes: HTMLType[] = [
5361
style: {},
5462
placeHolderShort: 'button',
5563
placeHolderLong: '',
56-
icon: ButtonIcon
64+
icon: ButtonIcon,
65+
framework: 'reactClassic',
66+
nestable: false
5767
},
5868
{
5969
id: 6,
@@ -62,7 +72,9 @@ const HTMLTypes: HTMLType[] = [
6272
style: {},
6373
placeHolderShort: 'link',
6474
placeHolderLong: '',
65-
icon: LinkIcon
75+
icon: LinkIcon,
76+
framework: 'reactClassic',
77+
nestable: false
6678
},
6779
{
6880
id: 8,
@@ -71,7 +83,9 @@ const HTMLTypes: HTMLType[] = [
7183
style: {},
7284
placeHolderShort: 'paragraph',
7385
placeHolderLong: '',
74-
icon: ParagraphIcon
86+
icon: ParagraphIcon,
87+
framework: 'reactClassic',
88+
nestable: false
7589
},
7690
{
7791
id: 9,
@@ -80,7 +94,9 @@ const HTMLTypes: HTMLType[] = [
8094
style: {},
8195
placeHolderShort: 'header 1',
8296
placeHolderLong: '',
83-
icon: HeaderIcon
97+
icon: HeaderIcon,
98+
framework: 'reactClassic',
99+
nestable: false
84100
},
85101
{
86102
id: 10,
@@ -89,7 +105,9 @@ const HTMLTypes: HTMLType[] = [
89105
style: {},
90106
placeHolderShort: 'header 2',
91107
placeHolderLong: '',
92-
icon: HeaderIcon
108+
icon: HeaderIcon,
109+
framework: 'reactClassic',
110+
nestable: false
93111
},
94112
{
95113
id: 5,
@@ -98,7 +116,9 @@ const HTMLTypes: HTMLType[] = [
98116
style: {},
99117
placeHolderShort: 'span',
100118
placeHolderLong: '',
101-
icon: HeaderIcon
119+
icon: HeaderIcon,
120+
framework: 'reactClassic',
121+
nestable: false
102122
},
103123
{
104124
id: 12,
@@ -107,7 +127,9 @@ const HTMLTypes: HTMLType[] = [
107127
style: {},
108128
placeHolderShort: 'input',
109129
placeHolderLong: '',
110-
icon: HeaderIcon
130+
icon: HeaderIcon,
131+
framework: 'reactClassic',
132+
nestable: false
111133
},
112134
{
113135
id: 13,
@@ -116,7 +138,9 @@ const HTMLTypes: HTMLType[] = [
116138
style: {},
117139
placeHolderShort: 'label',
118140
placeHolderLong: '',
119-
icon: HeaderIcon
141+
icon: HeaderIcon,
142+
framework: 'reactClassic',
143+
nestable: false
120144
},
121145
{
122146
id: 14,
@@ -125,7 +149,9 @@ const HTMLTypes: HTMLType[] = [
125149
style: {},
126150
placeHolderShort: 'ordered list',
127151
placeHolderLong: '',
128-
icon: ListIcon
152+
icon: ListIcon,
153+
framework: 'reactClassic',
154+
nestable: true
129155
},
130156
{
131157
id: 15,
@@ -134,7 +160,9 @@ const HTMLTypes: HTMLType[] = [
134160
style: {},
135161
placeHolderShort: 'unordered list',
136162
placeHolderLong: '',
137-
icon: ListIcon
163+
icon: ListIcon,
164+
framework: 'reactClassic',
165+
nestable: true
138166
},
139167
{
140168
id: 16,
@@ -143,7 +171,9 @@ const HTMLTypes: HTMLType[] = [
143171
style: {},
144172
placeHolderShort: 'menu',
145173
placeHolderLong: '',
146-
icon: ListIcon
174+
icon: ListIcon,
175+
framework: 'reactClassic',
176+
nestable: true
147177
},
148178
{
149179
id: 3,
@@ -152,7 +182,9 @@ const HTMLTypes: HTMLType[] = [
152182
style: {},
153183
placeHolderShort: 'list item',
154184
placeHolderLong: '',
155-
icon: ListIcon
185+
icon: ListIcon,
186+
framework: 'reactClassic',
187+
nestable: true
156188
},
157189
{
158190
id: 17,
@@ -161,7 +193,9 @@ const HTMLTypes: HTMLType[] = [
161193
style: {},
162194
placeHolderShort: 'Switch',
163195
placeHolderLong: '',
164-
icon: ListIcon
196+
icon: ListIcon,
197+
framework: 'reactClassic',
198+
nestable: true
165199
},
166200
{
167201
id: -1,
@@ -170,7 +204,9 @@ const HTMLTypes: HTMLType[] = [
170204
style: {},
171205
placeHolderShort: 'Route',
172206
placeHolderLong: '',
173-
icon: LinkIcon
207+
icon: LinkIcon,
208+
framework: 'reactClassic',
209+
nestable: true
174210
},
175211
{
176212
id: 18,
@@ -179,7 +215,9 @@ const HTMLTypes: HTMLType[] = [
179215
style: {},
180216
placeHolderShort: 'LinkTo',
181217
placeHolderLong: '',
182-
icon: ListIcon
218+
icon: ListIcon,
219+
framework: 'reactClassic',
220+
nestable: true
183221
},
184222
{
185223
id: 19,
@@ -188,7 +226,9 @@ const HTMLTypes: HTMLType[] = [
188226
style: {},
189227
placeHolderShort: 'LinkHref',
190228
placeHolderLong: '',
191-
icon: ListIcon
229+
icon: ListIcon,
230+
framework: 'nextjs',
231+
nestable: true
192232
},
193233
{
194234
id: 20,
@@ -198,6 +238,8 @@ const HTMLTypes: HTMLType[] = [
198238
placeHolderShort: 'Image',
199239
placeHolderLong: '',
200240
icon: ListIcon,
201-
},
241+
framework: 'nextjs',
242+
nestable: false
243+
}
202244
];
203245
export default HTMLTypes;

‎app/src/interfaces/Interfaces.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export interface Component {
4040
stateProps: StateProp[]; // state: [ { id, key, value, type }, ...]
4141
annotations?: string;
4242
useStateCodes: string[];
43-
useContext?: object
43+
useContext?: object
4444
}
4545
export interface StateProp {
4646
key: string;
@@ -53,7 +53,7 @@ export interface Action {
5353
payload: any;
5454
}
5555

56-
export interface Payload {}
56+
export interface Payload { }
5757
export interface Reduce {
5858
state: Context;
5959
action: Action;
@@ -70,6 +70,8 @@ export interface HTMLType {
7070
placeHolderShort: string | JSX.Element;
7171
placeHolderLong: string;
7272
icon: any;
73+
framework: string;
74+
nestable: boolean;
7375
}
7476
export interface DragItem extends DragObjectWithType {
7577
newInstance: boolean;

0 commit comments

Comments
 (0)