Skip to content

Commit 43e8a4b

Browse files
lizlooneylizlooney
committed
HeyLiz - diff this and write a nice description.
1 parent cefe0fa commit 43e8a4b

File tree

3 files changed

+88
-51
lines changed

3 files changed

+88
-51
lines changed

‎src/App.tsx‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ import {pythonGenerator} from 'blockly/python';
4444

4545
import BlocklyComponent from './Blockly';
4646

47-
import { NewProjectNameModalProps, NewProjectNameModal } from './modal/NewProjectNameModal';
48-
import { NewModuleNameModalProps, NewModuleNameModal } from './modal/NewModuleNameModal';
47+
import { NewProjectNameModal } from './modal/NewProjectNameModal';
48+
import { NewModuleNameModal } from './modal/NewModuleNameModal';
4949

5050
import * as CustomBlocks from './blocks/setup_custom_blocks';
5151
import { initialize as initializeGeneratedBlocks } from './blocks/utils/generated/initialize';
@@ -95,10 +95,12 @@ const App: React.FC = () => {
9595
const [newProjectNameModalPurpose, setNewProjectNameModalPurpose] = useState('');
9696
const [newProjectNameModalInitialValue, setNewProjectNameModalInitialValue] = useState('');
9797
const [newProjectNameModalTitle, setNewProjectNameModalTitle] = useState('');
98+
const [newProjectNameModalMessage, setNewProjectNameModalMessage] = useState('');
9899
const [newProjectNameModalIsOpen, setNewProjectNameModalIsOpen] = useState(false);
99100
const [newModuleNameModalPurpose, setNewModuleNameModalPurpose] = useState('');
100101
const [newModuleNameModalInitialValue, setNewModuleNameModalInitialValue] = useState('');
101102
const [newModuleNameModalTitle, setNewModuleNameModalTitle] = useState('');
103+
const [newModuleNameModalExample, setNewModuleNameModalExample] = useState('');
102104
const [newModuleNameModalIsOpen, setNewModuleNameModalIsOpen] = useState(false);
103105
const [toolboxSettingsModalIsOpen, setToolboxSettingsModalIsOpen] = useState(false);
104106
const [popconfirmTitle, setPopconfirmTitle] = useState('');
@@ -192,7 +194,8 @@ const App: React.FC = () => {
192194
if (array.length === 0) {
193195
setNewProjectNameModalPurpose(PURPOSE_NEW_PROJECT);
194196
setNewProjectNameModalInitialValue('');
195-
setNewProjectNameModalTitle('Welcome to WPILib Blocks!');
197+
setNewProjectNameModalTitle(NewProjectNameModal.TITLE_WELCOME);
198+
setNewProjectNameModalMessage(NewProjectNameModal.MESSAGE_WELCOME);
196199
setNewProjectNameModalIsOpen(true);
197200
}
198201
};
@@ -242,7 +245,7 @@ const App: React.FC = () => {
242245
}
243246
const child: TreeDataNode = {
244247
key: mechanism.modulePath,
245-
title: mechanism.moduleName,
248+
title: mechanism.className,
246249
icon: <MechanismOutlined />,
247250
};
248251
children.push(child);
@@ -256,7 +259,7 @@ const App: React.FC = () => {
256259
}
257260
const child: TreeDataNode = {
258261
key: opMode.modulePath,
259-
title: opMode.moduleName,
262+
title: opMode.className,
260263
icon: <OpModeOutlined />,
261264
};
262265
children.push(child);
@@ -432,7 +435,8 @@ const App: React.FC = () => {
432435
checkIfBlocksWereModified(() => {
433436
setNewProjectNameModalPurpose(PURPOSE_NEW_PROJECT);
434437
setNewProjectNameModalInitialValue('');
435-
setNewProjectNameModalTitle('New Project');
438+
setNewProjectNameModalTitle(NewProjectNameModal.TITLE_NEW_PROJECT);
439+
setNewProjectNameModalMessage('');
436440
setNewProjectNameModalIsOpen(true);
437441
});
438442
};
@@ -457,8 +461,7 @@ const App: React.FC = () => {
457461
const newProjectName = commonStorage.classNameToModuleName(newProjectClassName);
458462
const newProjectPath = commonStorage.makeProjectPath(newProjectName);
459463
if (newProjectNameModalPurpose === PURPOSE_NEW_PROJECT) {
460-
const projectContent = commonStorage.newProjectContent(
461-
newProjectClassName, newProjectName, newProjectPath);
464+
const projectContent = commonStorage.newProjectContent(newProjectName);
462465
try {
463466
await storage.createModule(
464467
commonStorage.MODULE_TYPE_PROJECT, newProjectPath, projectContent);
@@ -503,7 +506,8 @@ const App: React.FC = () => {
503506
checkIfBlocksWereModified(() => {
504507
setNewModuleNameModalPurpose(PURPOSE_NEW_MECHANISM);
505508
setNewModuleNameModalInitialValue('');
506-
setNewModuleNameModalTitle('New Mechanism');
509+
setNewModuleNameModalTitle(NewModuleNameModal.TITLE_NEW_MECHANISM);
510+
setNewModuleNameModalExample(NewModuleNameModal.EXAMPLE_MECHANISM);
507511
setNewModuleNameModalIsOpen(true);
508512
});
509513
};
@@ -512,7 +516,8 @@ const App: React.FC = () => {
512516
checkIfBlocksWereModified(() => {
513517
setNewModuleNameModalPurpose(PURPOSE_NEW_OPMODE);
514518
setNewModuleNameModalInitialValue('');
515-
setNewModuleNameModalTitle('New OpMode');
519+
setNewModuleNameModalTitle(NewModuleNameModal.TITLE_NEW_OPMODE);
520+
setNewModuleNameModalExample(NewModuleNameModal.EXAMPLE_OPMODE);
516521
setNewModuleNameModalIsOpen(true);
517522
});
518523
};
@@ -524,24 +529,25 @@ const App: React.FC = () => {
524529
};
525530

526531
// Provide a callback so the NewModuleNameModal will know what the existing
527-
// module names are in the current project.
528-
const getModuleNames = (projectName: string): string[] => {
529-
const moduleNames: string[] = [];
532+
// module class names are in the current project.
533+
const getModuleClassNames = (projectName: string): string[] => {
534+
const moduleClassNames: string[] = [];
530535
for (const project of modules) {
531536
if (project.projectName === projectName) {
532537
project.mechanisms.forEach((mechanism) => {
533-
moduleNames.push(mechanism.moduleName);
538+
moduleClassNames.push(mechanism.className);
534539
});
535540
project.opModes.forEach((opMode) => {
536-
moduleNames.push(opMode.moduleName);
541+
moduleClassNames.push(opMode.className);
537542
});
538543
break;
539544
}
540545
}
541-
return moduleNames;
546+
return moduleClassNames;
542547
};
543548

544-
const handleNewModuleNameOk = async (newModuleName: string) => {
549+
const handleNewModuleNameOk = async (newModuleClassName: string) => {
550+
const newModuleName = commonStorage.classNameToModuleName(newModuleClassName);
545551
const newModulePath = commonStorage.makeModulePath(currentModule.projectName, newModuleName);
546552
if (newModuleNameModalPurpose === PURPOSE_NEW_MECHANISM) {
547553
const mechanismContent = commonStorage.newMechanismContent(
@@ -631,19 +637,22 @@ const App: React.FC = () => {
631637
// This is a Project.
632638
setNewProjectNameModalPurpose(PURPOSE_RENAME_PROJECT);
633639
setNewProjectNameModalInitialValue(currentModule.projectName);
634-
setNewProjectNameModalTitle('Rename Project');
640+
setNewProjectNameModalTitle(NewProjectNameModal.TITLE_RENAME_PROJECT);
641+
setNewProjectNameModalMessage('');
635642
setNewProjectNameModalIsOpen(true);
636643
} else if (currentModule.moduleType == commonStorage.MODULE_TYPE_MECHANISM) {
637644
// This is a Mechanism.
638645
setNewModuleNameModalPurpose(PURPOSE_RENAME_MODULE);
639646
setNewModuleNameModalInitialValue(currentModule.moduleName);
640-
setNewModuleNameModalTitle('Rename Mechanism');
647+
setNewModuleNameModalTitle(NewModuleNameModal.TITLE_RENAME_MECHANISM);
648+
setNewModuleNameModalExample(NewModuleNameModal.EXAMPLE_MECHANISM);
641649
setNewModuleNameModalIsOpen(true);
642650
} else if (currentModule.moduleType == commonStorage.MODULE_TYPE_OPMODE) {
643651
// This is an OpMode.
644652
setNewModuleNameModalPurpose(PURPOSE_RENAME_MODULE);
645653
setNewModuleNameModalInitialValue(currentModule.moduleName);
646-
setNewModuleNameModalTitle('Rename OpMode');
654+
setNewModuleNameModalTitle(NewModuleNameModal.TITLE_RENAME_OPMODE);
655+
setNewModuleNameModalExample(NewModuleNameModal.EXAMPLE_OPMODE);
647656
setNewModuleNameModalIsOpen(true);
648657
}
649658
});
@@ -658,19 +667,22 @@ const App: React.FC = () => {
658667
// This is a Project.
659668
setNewProjectNameModalPurpose(PURPOSE_COPY_PROJECT);
660669
setNewProjectNameModalInitialValue(currentModule.projectName + '_copy');
661-
setNewProjectNameModalTitle('Copy Project');
670+
setNewProjectNameModalTitle(NewProjectNameModal.TITLE_COPY_PROJECT);
671+
setNewProjectNameModalMessage('');
662672
setNewProjectNameModalIsOpen(true);
663673
} else if (currentModule.moduleType == commonStorage.MODULE_TYPE_MECHANISM) {
664674
// This is a Mechanism.
665675
setNewModuleNameModalPurpose(PURPOSE_COPY_MODULE);
666676
setNewModuleNameModalInitialValue(currentModule.moduleName + '_copy');
667-
setNewModuleNameModalTitle('Copy Mechanism');
677+
setNewModuleNameModalTitle(NewModuleNameModal.TITLE_COPY_MECHANISM);
678+
setNewModuleNameModalExample(NewModuleNameModal.EXAMPLE_MECHANISM);
668679
setNewModuleNameModalIsOpen(true);
669680
} else if (currentModule.moduleType == commonStorage.MODULE_TYPE_OPMODE) {
670681
// This is an OpMode.
671682
setNewModuleNameModalPurpose(PURPOSE_COPY_MODULE);
672683
setNewModuleNameModalInitialValue(currentModule.moduleName + '_copy');
673-
setNewModuleNameModalTitle('Copy OpMode');
684+
setNewModuleNameModalTitle(NewModuleNameModal.TITLE_COPY_OPMODE);
685+
setNewModuleNameModalExample(NewModuleNameModal.EXAMPLE_OPMODE);
674686
setNewModuleNameModalIsOpen(true);
675687
}
676688
});
@@ -1086,6 +1098,7 @@ const App: React.FC = () => {
10861098

10871099
<NewProjectNameModal
10881100
title={newProjectNameModalTitle}
1101+
message={newProjectNameModalMessage}
10891102
isOpen={newProjectNameModalIsOpen}
10901103
initialValue={newProjectNameModalInitialValue}
10911104
getProjectClassNames={getProjectClassNames}
@@ -1097,10 +1110,11 @@ const App: React.FC = () => {
10971110
/>
10981111
<NewModuleNameModal
10991112
title={newModuleNameModalTitle}
1113+
example={newModuleNameModalExample}
11001114
isOpen={newModuleNameModalIsOpen}
11011115
initialValue={newModuleNameModalInitialValue}
11021116
getCurrentProjectName={getCurrentProjectName}
1103-
getModuleNames={getModuleNames}
1117+
getModuleClassNames={getModuleClassNames}
11041118
onOk={(newName) => {
11051119
setNewModuleNameModalIsOpen(false);
11061120
handleNewModuleNameOk(newName);

‎src/modal/NewModuleNameModal.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,30 +34,43 @@ import type { InputRef } from 'antd';
3434
import * as commonStorage from '../storage/common_storage';
3535

3636

37-
export type NewModuleNameModalProps = {
37+
export const TITLE_NEW_MECHANISM = 'New Mechanism';
38+
export const TITLE_RENAME_MECHANISM = 'Rename Mechanism';
39+
export const TITLE_COPY_MECHANISM = 'Copy Mechanism';
40+
export const TITLE_NEW_OPMODE = 'New OpMode';
41+
export const TITLE_RENAME_OPMODE = 'Rename OpMode';
42+
export const TITLE_COPY_OPMODE = 'Copy OpMode';
43+
44+
const DESCRIPTION = 'No spaces are allowed in the name. Each word in the name should start with a capital letter.';
45+
46+
export const EXAMPLE_MECHANISM = 'For example, GamePieceShooter';
47+
export const EXAMPLE_OPMODE = 'For example, AutoParkAndShoot';
48+
49+
type NewModuleNameModalProps = {
3850
title: string;
51+
example: string;
3952
isOpen: boolean;
4053
initialValue: string;
4154
getCurrentProjectName: () => string;
42-
getModuleNames: (projectName: string) => string[];
55+
getModuleClassNames: (projectName: string) => string[];
4356
onOk: (newName: string) => void;
4457
onCancel: () => void;
4558
}
4659

47-
export const NewModuleNameModal: React.FC<NewModuleNameModalProps> = ({ title, isOpen, initialValue, getCurrentProjectName, getModuleNames, onOk, onCancel }) => {
60+
export const NewModuleNameModal: React.FC<NewModuleNameModalProps> = ({ title, example, isOpen, initialValue, getCurrentProjectName, getModuleClassNames, onOk, onCancel }) => {
4861
const inputRef = useRef<InputRef>(null);
4962
const [value, setValue] = useState('');
50-
const [projectName, setProjectName] = useState('');
51-
const [moduleNames, setModuleNames] = useState<string[]>([]);
63+
const [projectClassName, setProjectClassName] = useState('');
64+
const [moduleClassNames, setModuleClassNames] = useState<string[]>([]);
5265
const [alertErrorMessage, setAlertErrorMessage] = useState('');
5366
const [alertErrorVisible, setAlertErrorVisible] = useState(false);
5467

5568
const afterOpenChange = (open: boolean) => {
5669
if (open) {
5770
setValue(initialValue);
5871
const currentProjectName = getCurrentProjectName();
59-
setProjectName(currentProjectName);
60-
setModuleNames(getModuleNames(currentProjectName));
72+
setProjectClassName(commonStorage.moduleNameToClassName(currentProjectName));
73+
setModuleClassNames(getModuleClassNames(currentProjectName));
6174
if (inputRef.current) {
6275
inputRef.current.focus();
6376
}
@@ -66,19 +79,23 @@ export const NewModuleNameModal: React.FC<NewModuleNameModalProps> = ({ title, i
6679
}
6780
};
6881

82+
const onChange = (e) => {
83+
setValue(commonStorage.onChangeClassName(e.target.value));
84+
};
85+
6986
const handleOk = () => {
70-
if (!commonStorage.isValidPythonModuleName(value)) {
71-
setAlertErrorMessage(value + ' is not a valid blocks module name');
87+
if (!commonStorage.isValidClassName(value)) {
88+
setAlertErrorMessage(value + ' is not a valid name.');
7289
setAlertErrorVisible(true);
7390
return;
7491
}
75-
if (projectName === value) {
76-
setAlertErrorMessage('The project is already named ' + value);
92+
if (projectClassName === value) {
93+
setAlertErrorMessage('The project is already named ' + value + '.');
7794
setAlertErrorVisible(true);
7895
return;
7996
}
80-
if (moduleNames.includes(value)) {
81-
setAlertErrorMessage('Another module is already named ' + value);
97+
if (moduleClassNames.includes(value)) {
98+
setAlertErrorMessage('Another Mechanism or OpMode is already named ' + value + '.');
8299
setAlertErrorVisible(true);
83100
return;
84101
}
@@ -97,12 +114,14 @@ export const NewModuleNameModal: React.FC<NewModuleNameModalProps> = ({ title, i
97114
]}
98115
>
99116
<Flex vertical gap="small">
100-
<Typography.Paragraph> Name </Typography.Paragraph>
117+
<Typography.Paragraph>Name</Typography.Paragraph>
118+
<Typography.Paragraph>{DESCRIPTION}</Typography.Paragraph>
119+
<Typography.Paragraph>{example}</Typography.Paragraph>
101120
<Input
102121
ref={inputRef}
103122
value={value}
104123
onPressEnter={handleOk}
105-
onChange={(e) => setValue(e.target.value.toLowerCase())}
124+
onChange={onChange}
106125
/>
107126
{alertErrorVisible && (
108127
<Alert

‎src/modal/NewProjectNameModal.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,30 @@ import type { InputRef } from 'antd';
3333

3434
import * as commonStorage from '../storage/common_storage';
3535

36-
const DESCRIPTION = 'No spaces are allowed in the project name. Each word in the project should start with a capital letter.';
37-
const EXAMPLE = 'For example, MyAwesomeRobot';
3836

37+
export const TITLE_WELCOME = 'Welcome to WPILib Blocks!';
38+
export const TITLE_NEW_PROJECT = 'New Project';
39+
export const TITLE_RENAME_PROJECT = 'Rename Project';
40+
export const TITLE_COPY_PROJECT = 'Copy Project';
3941

40-
export type NewProjectNameModalProps = {
42+
export const MESSAGE_WELCOME = 'Let\'s create your first project. You just need to give it a name.';
43+
44+
const DESCRIPTION = 'No spaces are allowed in the name. Each word in the name should start with a capital letter.';
45+
46+
const EXAMPLE = 'For example, AwesomeRobot';
47+
48+
type NewProjectNameModalProps = {
4149
title: string;
50+
message: string;
4251
isOpen: boolean;
4352
initialValue: string;
4453
getProjectClassNames: () => string[];
4554
onOk: (newName: string) => void;
4655
onCancel: () => void;
4756
}
4857

49-
export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title, isOpen, initialValue, getProjectClassNames, onOk, onCancel }) => {
58+
export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title, message, isOpen, initialValue, getProjectClassNames, onOk, onCancel }) => {
5059
const inputRef = useRef<InputRef>(null);
51-
const [message, setMessage] = useState('');
5260
const [value, setValue] = useState('');
5361
const [projectNames, setProjectNames] = useState<string[]>([]);
5462
const [alertErrorMessage, setAlertErrorMessage] = useState('');
@@ -58,16 +66,12 @@ export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title,
5866
if (open) {
5967
setValue(initialValue);
6068
const w = getProjectClassNames();
61-
if (w.length === 0) {
62-
setMessage('Let\'s create your first project. You just need to give it a name.');
63-
}
6469
setProjectNames(w);
6570
if (inputRef.current) {
6671
inputRef.current.focus();
6772
}
6873
} else {
6974
setValue('');
70-
setMessage('');
7175
}
7276
};
7377

@@ -77,12 +81,12 @@ export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title,
7781

7882
const handleOk = () => {
7983
if (!commonStorage.isValidClassName(value)) {
80-
setAlertErrorMessage(value + ' is not a valid blocks project name');
84+
setAlertErrorMessage(value + ' is not a valid project name.');
8185
setAlertErrorVisible(true);
8286
return;
8387
}
8488
if (projectNames.includes(value)) {
85-
setAlertErrorMessage('There is already a project named ' + value);
89+
setAlertErrorMessage('There is already a project named ' + value + '.');
8690
setAlertErrorVisible(true);
8791
return;
8892
}
@@ -104,7 +108,7 @@ export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title,
104108
<Typography.Paragraph
105109
style={message.length === 0 ? { display: 'none' } : { }}
106110
>{message}</Typography.Paragraph>
107-
<Typography.Paragraph> Project Name </Typography.Paragraph>
111+
<Typography.Paragraph>Project Name</Typography.Paragraph>
108112
<Typography.Paragraph>{DESCRIPTION}</Typography.Paragraph>
109113
<Typography.Paragraph>{EXAMPLE}</Typography.Paragraph>
110114
<Input

0 commit comments

Comments
 (0)