├── .gitignore ├── .vscode └── launch.json ├── LICENSE ├── hooks ├── 00_BoilerPlate │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── index.html │ │ └── main.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 01_HelloReact │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── hello.tsx │ │ ├── index.html │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 02_Properties │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── hello.tsx │ │ ├── index.html │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 03_State │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── hello.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── nameEdit.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 04_Callback │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── hello.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── nameEdit.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 05_Refactor │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── hello.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── nameEdit.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 06_Enable │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── hello.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── nameEdit.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 07_ColorPicker │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── components │ │ │ ├── colorBrowser.tsx │ │ │ ├── colorPicker.tsx │ │ │ ├── hello.tsx │ │ │ ├── index.tsx │ │ │ └── nameEdit.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── model │ │ │ └── color.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 08_ColorPickerRefactor │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── components │ │ │ ├── colorBrowser.tsx │ │ │ ├── colorPicker.tsx │ │ │ ├── hello.tsx │ │ │ ├── index.tsx │ │ │ └── nameEdit.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── model │ │ │ └── color.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 09_Sidebar │ ├── .babelrc │ ├── Readme.md │ ├── Readme_es.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── components │ │ │ ├── colorBrowser.tsx │ │ │ ├── colorPicker.tsx │ │ │ ├── hello.tsx │ │ │ ├── index.tsx │ │ │ ├── nameEdit.tsx │ │ │ ├── sidebar.css │ │ │ └── sidebar.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── model │ │ │ └── color.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 10_TableMock │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── memberApi.ts │ │ ├── app.tsx │ │ ├── components │ │ │ ├── colorBrowser.tsx │ │ │ ├── colorPicker.tsx │ │ │ ├── hello.tsx │ │ │ ├── index.tsx │ │ │ ├── memberTable.tsx │ │ │ ├── nameEdit.tsx │ │ │ ├── sidebar.css │ │ │ └── sidebar.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── model │ │ │ ├── color.ts │ │ │ └── member.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 11_TableAxios │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── memberApi.ts │ │ ├── app.tsx │ │ ├── components │ │ │ ├── colorBrowser.tsx │ │ │ ├── colorPicker.tsx │ │ │ ├── hello.tsx │ │ │ ├── index.tsx │ │ │ ├── memberTable.tsx │ │ │ ├── nameEdit.tsx │ │ │ ├── sidebar.css │ │ │ └── sidebar.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── model │ │ │ ├── color.ts │ │ │ └── member.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 12_ReactRouter │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── app.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── pages │ │ │ ├── pageA.tsx │ │ │ └── pageB.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 13_LoginForm │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── login.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── index.ts │ │ │ └── notification.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ └── login.ts │ │ └── pages │ │ │ ├── login.component.tsx │ │ │ ├── login.container.tsx │ │ │ └── pageB.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 14_FormValidation │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── login.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── index.ts │ │ │ ├── notification.tsx │ │ │ └── textField.component.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ └── login.ts │ │ └── pages │ │ │ ├── login.component.tsx │ │ │ ├── login.container.tsx │ │ │ ├── login.validation.ts │ │ │ └── pageB.tsx │ ├── tsconfig.json │ └── webpack.config.js └── 15_Context │ ├── .babelrc │ ├── Readme.md │ ├── package.json │ ├── src │ ├── api │ │ └── login.ts │ ├── app.tsx │ ├── common │ │ ├── index.ts │ │ ├── notification.tsx │ │ ├── sessionContext.tsx │ │ └── textField.component.tsx │ ├── index.html │ ├── index.tsx │ ├── model │ │ └── login.ts │ └── pages │ │ ├── login.component.tsx │ │ ├── login.container.tsx │ │ ├── login.validation.ts │ │ └── pageB.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── old_class_components_samples ├── 00 BoilerPlate │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── readme_es.md │ ├── src │ │ ├── index.html │ │ └── index.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 01 HelloReact │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── readme_es.md │ ├── src │ │ ├── hello.tsx │ │ ├── index.html │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 02 Components │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── app.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ └── index.ts │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 03 Navigation │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── app.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 04 DisplayData │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ └── memberEntity.ts │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 05 Presentational Comp │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ └── memberEntity.ts │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 06 AJAX Call │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ └── memberEntity.ts │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 07 Form │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ └── components │ │ │ │ └── form │ │ │ │ ├── button.tsx │ │ │ │ ├── index.ts │ │ │ │ └── input.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ └── memberEntity.ts │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 08 ParamNavigation │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ └── components │ │ │ │ └── form │ │ │ │ ├── button.tsx │ │ │ │ ├── index.ts │ │ │ │ └── input.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberErrors.ts │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── 09 Redux │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ └── form │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── input.tsx │ │ │ └── constants │ │ │ │ └── actionTypes.ts │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMemberById.ts │ │ │ │ │ ├── memberFieldChange.ts │ │ │ │ │ └── saveMember.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── actions │ │ │ │ └── fetchMembers.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberErrors.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── member.ts │ │ │ ├── memberErrors.ts │ │ │ └── members.ts │ │ ├── router.tsx │ │ └── store.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 10 LoaderSpinner │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── input.tsx │ │ │ │ └── spinner │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── loadingSpinner.css │ │ │ │ │ └── loadingSpinner.tsx │ │ │ └── constants │ │ │ │ └── actionTypes.ts │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMemberById.ts │ │ │ │ │ ├── memberFieldChange.ts │ │ │ │ │ └── saveMember.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ ├── members │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMembers.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── repos │ │ │ │ ├── actions │ │ │ │ └── fetchRepositories.ts │ │ │ │ ├── repoHeader.tsx │ │ │ │ └── repoRow.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ ├── memberErrors.ts │ │ │ └── repositoryEntity.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── member.ts │ │ │ ├── memberErrors.ts │ │ │ ├── members.ts │ │ │ └── repositories.ts │ │ ├── router.tsx │ │ └── store.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 11 TestReducer │ ├── .babelrc │ ├── config │ │ └── test │ │ │ ├── jest.json │ │ │ └── polyfills.js │ ├── package.json │ ├── sample.test.ts │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── input.tsx │ │ │ │ └── spinner │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── loadingSpinner.css │ │ │ │ │ └── loadingSpinner.tsx │ │ │ └── constants │ │ │ │ └── actionTypes.ts │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMemberById.ts │ │ │ │ │ ├── memberFieldChange.ts │ │ │ │ │ └── saveMember.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── actions │ │ │ │ └── fetchMembers.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberErrors.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── member.spec.ts │ │ │ ├── member.ts │ │ │ ├── memberErrors.ts │ │ │ ├── members.spec.ts │ │ │ └── members.ts │ │ ├── router.tsx │ │ └── store.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 12 TestAction │ ├── .babelrc │ ├── config │ │ └── test │ │ │ ├── jest.json │ │ │ └── polyfills.js │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── input.tsx │ │ │ │ └── spinner │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── loadingSpinner.css │ │ │ │ │ └── loadingSpinner.tsx │ │ │ └── constants │ │ │ │ └── actionTypes.ts │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMemberById.spec.ts │ │ │ │ │ ├── fetchMemberById.ts │ │ │ │ │ ├── memberFieldChange.spec.ts │ │ │ │ │ ├── memberFieldChange.ts │ │ │ │ │ ├── saveMember.spec.ts │ │ │ │ │ └── saveMember.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── actions │ │ │ │ ├── fetchMembers.spec.ts │ │ │ │ └── fetchMembers.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberErrors.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── member.spec.ts │ │ │ ├── member.ts │ │ │ ├── memberErrors.ts │ │ │ ├── members.spec.ts │ │ │ └── members.ts │ │ ├── router.tsx │ │ └── store.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 13 TestComponents │ ├── .babelrc │ ├── config │ │ └── test │ │ │ ├── jest.json │ │ │ ├── polyfills.js │ │ │ └── setupTest.js │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── __snapshots__ │ │ │ │ │ │ ├── button.spec.tsx.snap │ │ │ │ │ │ └── input.spec.tsx.snap │ │ │ │ │ ├── button.spec.tsx │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── input.spec.tsx │ │ │ │ │ └── input.tsx │ │ │ │ └── spinner │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── loadingSpinner.css │ │ │ │ │ └── loadingSpinner.tsx │ │ │ └── constants │ │ │ │ └── actionTypes.ts │ │ ├── components │ │ │ ├── __snapshots__ │ │ │ │ ├── about.spec.tsx.snap │ │ │ │ └── header.spec.tsx.snap │ │ │ ├── about.spec.tsx │ │ │ ├── about.tsx │ │ │ ├── header.spec.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── __snapshots__ │ │ │ │ │ ├── memberForm.spec.tsx.snap │ │ │ │ │ ├── page.spec.tsx.snap │ │ │ │ │ └── pageContainer.spec.tsx.snap │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMemberById.spec.ts │ │ │ │ │ ├── fetchMemberById.ts │ │ │ │ │ ├── memberFieldChange.spec.ts │ │ │ │ │ ├── memberFieldChange.ts │ │ │ │ │ ├── saveMember.spec.ts │ │ │ │ │ └── saveMember.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.spec.tsx │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.spec.tsx │ │ │ │ ├── page.tsx │ │ │ │ ├── pageContainer.spec.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── __snapshots__ │ │ │ │ ├── memberHeader.spec.tsx.snap │ │ │ │ ├── memberRow.spec.tsx.snap │ │ │ │ ├── page.spec.tsx.snap │ │ │ │ └── pageContainer.spec.tsx.snap │ │ │ │ ├── actions │ │ │ │ ├── fetchMembers.spec.ts │ │ │ │ └── fetchMembers.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.spec.tsx │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.spec.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── page.spec.tsx │ │ │ │ ├── page.tsx │ │ │ │ ├── pageContainer.spec.tsx │ │ │ │ └── pageContainer.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberErrors.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── member.spec.ts │ │ │ ├── member.ts │ │ │ ├── memberErrors.ts │ │ │ ├── members.spec.ts │ │ │ └── members.ts │ │ ├── router.tsx │ │ └── store.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 14 AsyncCalls_Redux_Saga │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ ├── components │ │ │ │ ├── form │ │ │ │ │ ├── button.tsx │ │ │ │ │ ├── index.ts │ │ │ │ │ └── input.tsx │ │ │ │ └── spinner │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── loadingSpinner.css │ │ │ │ │ └── loadingSpinner.tsx │ │ │ └── constants │ │ │ │ └── actionTypes.ts │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMemberById.ts │ │ │ │ │ ├── memberFieldChange.ts │ │ │ │ │ └── saveMember.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ ├── members │ │ │ │ ├── actions │ │ │ │ │ ├── fetchMembers.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── repos │ │ │ │ ├── actions │ │ │ │ └── fetchRepositories.ts │ │ │ │ ├── repoHeader.tsx │ │ │ │ └── repoRow.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ ├── memberErrors.ts │ │ │ └── repositoryEntity.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── member.ts │ │ │ ├── memberErrors.ts │ │ │ ├── members.ts │ │ │ └── repositories.ts │ │ ├── router.tsx │ │ ├── sagas │ │ │ ├── membersSaga.tsx │ │ │ └── membersSagaWatcher.ts │ │ └── store.ts │ ├── tsconfig.json │ └── webpack.config.js ├── 15 Lazy Loading │ ├── package.json │ ├── src │ │ ├── actions │ │ │ ├── assignMembers.ts │ │ │ ├── initializeNewMember.ts │ │ │ ├── loadMember.ts │ │ │ ├── loadMembers.ts │ │ │ ├── resetSaveCompleted.ts │ │ │ ├── saveMember.ts │ │ │ └── uiInputMember.ts │ │ ├── api │ │ │ ├── memberAPI.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberMockData.ts │ │ ├── components │ │ │ ├── about │ │ │ │ └── aboutPage.tsx │ │ │ ├── app.tsx │ │ │ ├── common │ │ │ │ ├── header.tsx │ │ │ │ └── textInput.tsx │ │ │ ├── member │ │ │ │ ├── memberForm.tsx │ │ │ │ └── memberPage.tsx │ │ │ └── members │ │ │ │ ├── memberRow.tsx │ │ │ │ └── membersPage.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── index.html │ │ ├── index.tsx │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── memberReducer.ts │ │ │ └── membersReducer.ts │ │ └── validations │ │ │ ├── memberFormErrors.ts │ │ │ └── memberFormValidator.ts │ ├── tsconfig.json │ ├── tsd.json │ └── webpack.config.js ├── 16 Custom Middleware │ ├── karma.conf.js │ ├── package.json │ ├── src │ │ ├── actions │ │ │ ├── assignMembers.ts │ │ │ ├── initializeNewMember.ts │ │ │ ├── loadMember.ts │ │ │ ├── loadMembers.ts │ │ │ ├── saveMember.ts │ │ │ └── uiInputMember.ts │ │ ├── api │ │ │ ├── memberAPI.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberMockData.ts │ │ ├── components │ │ │ ├── about │ │ │ │ └── aboutPage.tsx │ │ │ ├── app.tsx │ │ │ ├── common │ │ │ │ ├── header.tsx │ │ │ │ └── textInput.tsx │ │ │ ├── member │ │ │ │ ├── memberForm.tsx │ │ │ │ └── memberPage.tsx │ │ │ └── members │ │ │ │ ├── memberRow.tsx │ │ │ │ └── membersPage.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── index.html │ │ ├── index.tsx │ │ ├── middleware │ │ │ ├── navigationInfo.ts │ │ │ ├── navigationMware.ts │ │ │ ├── spec │ │ │ │ ├── navigationMware.spec.ts │ │ │ │ └── uiNotificationMware.spec.ts │ │ │ ├── uiNotificationInfo.ts │ │ │ └── uiNotificationMware.ts │ │ ├── reducers │ │ │ ├── index.ts │ │ │ ├── memberReducer.ts │ │ │ └── membersReducer.ts │ │ └── validations │ │ │ ├── memberFormErrors.ts │ │ │ └── memberFormValidator.ts │ ├── test │ │ └── test_index.js │ ├── tsconfig.json │ ├── tsd.json │ └── webpack.config.js ├── 17 ReactHotLoader │ ├── karma.conf.js │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── actions │ │ │ ├── assignMembers.ts │ │ │ ├── assignRepos.ts │ │ │ ├── httpCallCompleted.ts │ │ │ ├── httpCallStarted.ts │ │ │ ├── httpInitializeDispatcher.ts │ │ │ ├── initializeNewMember.ts │ │ │ ├── loadMember.ts │ │ │ ├── loadMembers.ts │ │ │ ├── loadRepos.ts │ │ │ ├── resetSaveCompleted.ts │ │ │ ├── saveMember.ts │ │ │ ├── spec │ │ │ │ ├── assignMembers.spec.ts │ │ │ │ ├── assignRepos.spec.ts │ │ │ │ ├── httpCallCompleted.spec.ts │ │ │ │ ├── httpCallStarted.spec.ts │ │ │ │ ├── httpInitializeDispatcher.spec.ts │ │ │ │ ├── initializeNewMember.spec.ts │ │ │ │ ├── loadMember.spec.ts │ │ │ │ ├── loadMembers.spec.ts │ │ │ │ ├── loadRepos.spec.ts │ │ │ │ ├── resetSaveCompleted.spec.ts │ │ │ │ ├── saveMember.spec.ts │ │ │ │ └── uiInputMember.spec.ts │ │ │ └── uiInputMember.ts │ │ ├── api │ │ │ ├── memberAPI.ts │ │ │ ├── memberEntity.ts │ │ │ ├── memberMockData.ts │ │ │ ├── repoAPI.ts │ │ │ └── repoEntity.ts │ │ ├── components │ │ │ ├── about │ │ │ │ ├── aboutPage.tsx │ │ │ │ └── spec │ │ │ │ │ └── aboutPage.spec.tsx │ │ │ ├── app.tsx │ │ │ ├── common │ │ │ │ ├── header.tsx │ │ │ │ ├── spec │ │ │ │ │ ├── header.spec.tsx │ │ │ │ │ ├── spinner.container.spec.tsx │ │ │ │ │ ├── spinner.spec.tsx │ │ │ │ │ └── textInput.spec.tsx │ │ │ │ ├── spinner.container.tsx │ │ │ │ ├── spinner.tsx │ │ │ │ └── textInput.tsx │ │ │ ├── member │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberPage.container.tsx │ │ │ │ ├── memberPage.tsx │ │ │ │ └── spec │ │ │ │ │ ├── memberForm.spec.tsx │ │ │ │ │ ├── memberPage.container.spec.tsx │ │ │ │ │ └── memberPage.spec.tsx │ │ │ ├── members │ │ │ │ ├── memberList.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ ├── membersPage.container.tsx │ │ │ │ ├── membersPage.tsx │ │ │ │ └── spec │ │ │ │ │ ├── memberList.spec.tsx │ │ │ │ │ ├── memberRow.spec.tsx │ │ │ │ │ ├── membersPage.container.spec.tsx │ │ │ │ │ └── membersPage.spec.tsx │ │ │ └── repos │ │ │ │ ├── repoList.tsx │ │ │ │ ├── repoRow.tsx │ │ │ │ └── spec │ │ │ │ ├── repoList.spec.tsx │ │ │ │ └── repoRow.spec.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── http │ │ │ └── http.ts │ │ ├── images │ │ │ └── spinner.gif │ │ ├── index.html │ │ ├── index.tsx │ │ ├── reducers │ │ │ ├── httpReducer.ts │ │ │ ├── index.ts │ │ │ ├── memberReducer.ts │ │ │ ├── membersReducer.ts │ │ │ ├── reposReducer.ts │ │ │ └── spec │ │ │ │ ├── httpReducer.spec.ts │ │ │ │ ├── memberReducer.spec.ts │ │ │ │ ├── membersReducer.spec.ts │ │ │ │ └── reposReducer.spec.ts │ │ └── validations │ │ │ ├── memberFormErrors.ts │ │ │ └── memberFormValidator.ts │ ├── test │ │ └── test_index.js │ ├── tsconfig.json │ ├── tsd.json │ └── webpack.config.js ├── 18 Hooks │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── api │ │ │ └── member │ │ │ │ ├── index.ts │ │ │ │ └── mockData.ts │ │ ├── app.tsx │ │ ├── common │ │ │ └── components │ │ │ │ └── form │ │ │ │ ├── button.tsx │ │ │ │ ├── index.ts │ │ │ │ └── input.tsx │ │ ├── components │ │ │ ├── about.tsx │ │ │ ├── header.tsx │ │ │ ├── index.ts │ │ │ ├── member │ │ │ │ ├── index.ts │ │ │ │ ├── memberForm.tsx │ │ │ │ ├── memberFormValidation.ts │ │ │ │ ├── page.tsx │ │ │ │ └── pageContainer.tsx │ │ │ └── members │ │ │ │ ├── index.ts │ │ │ │ ├── memberHeader.tsx │ │ │ │ ├── memberRow.tsx │ │ │ │ └── page.tsx │ │ ├── css │ │ │ └── site.css │ │ ├── images │ │ │ └── lemoncode.png │ │ ├── index.html │ │ ├── index.tsx │ │ ├── model │ │ │ ├── index.ts │ │ │ ├── memberEntity.ts │ │ │ └── memberErrors.ts │ │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js └── 19 LoginForm │ ├── .babelrc │ ├── package.json │ ├── readme.md │ ├── src │ ├── api │ │ ├── login │ │ │ ├── index.ts │ │ │ └── login.ts │ │ └── member │ │ │ ├── index.ts │ │ │ └── mockData.ts │ ├── app.tsx │ ├── common │ │ └── components │ │ │ ├── form │ │ │ ├── button.tsx │ │ │ ├── index.ts │ │ │ └── input.tsx │ │ │ └── notification │ │ │ ├── index.ts │ │ │ └── notification.tsx │ ├── components │ │ ├── about.tsx │ │ ├── header.tsx │ │ ├── index.ts │ │ ├── login │ │ │ ├── index.ts │ │ │ ├── loginForm.styles.ts │ │ │ ├── loginForm.tsx │ │ │ └── loginPage.tsx │ │ ├── member │ │ │ ├── index.ts │ │ │ ├── memberForm.tsx │ │ │ ├── memberFormValidation.ts │ │ │ ├── page.tsx │ │ │ └── pageContainer.tsx │ │ └── members │ │ │ ├── index.ts │ │ │ ├── memberHeader.tsx │ │ │ ├── memberRow.tsx │ │ │ └── page.tsx │ ├── css │ │ └── site.css │ ├── images │ │ └── lemoncode.png │ ├── index.html │ ├── index.tsx │ ├── layout │ │ ├── appView.component.tsx │ │ ├── appView.styles.ts │ │ ├── centeredView.component.tsx │ │ ├── centeredView.styles.ts │ │ └── index.ts │ ├── model │ │ ├── index.ts │ │ ├── login.ts │ │ ├── memberEntity.ts │ │ └── memberErrors.ts │ └── router.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── readme.md └── readme_es.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist/ 4 | typings/ 5 | *.orig 6 | .idea/ 7 | */src/**/*.js 8 | */src/**/*.js.map 9 | package-lock.json 10 | .vscode 11 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/.vscode/launch.json -------------------------------------------------------------------------------- /hooks/00_BoilerPlate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/00_BoilerPlate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /hooks/00_BoilerPlate/src/main.ts: -------------------------------------------------------------------------------- 1 | document.write("Hello from main.ts !"); 2 | -------------------------------------------------------------------------------- /hooks/00_BoilerPlate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/01_HelloReact/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/01_HelloReact/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export const HelloComponent = () => { 4 | return

Hello component !

; 5 | }; 6 | -------------------------------------------------------------------------------- /hooks/01_HelloReact/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/01_HelloReact/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | 4 | import { HelloComponent } from './hello'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /hooks/01_HelloReact/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/02_Properties/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/02_Properties/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => ( 8 |

Hello user: {props.userName} !

9 | ); 10 | -------------------------------------------------------------------------------- /hooks/02_Properties/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/02_Properties/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | 4 | import { HelloComponent } from './hello'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /hooks/02_Properties/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/03_State/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/03_State/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { HelloComponent } from "./hello"; 3 | import { NameEditComponent } from "./nameEdit"; 4 | 5 | export const App = () => { 6 | const [name, setName] = React.useState("initialName"); 7 | 8 | const setUsernameState = (event: React.ChangeEvent) => { 9 | setName(event.target.value); 10 | }; 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /hooks/03_State/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/03_State/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/03_State/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/03_State/src/nameEdit.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | onChange: (e: React.ChangeEvent) => void; 6 | } 7 | 8 | export const NameEditComponent: React.FC = (props) => ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /hooks/03_State/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/04_Callback/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/04_Callback/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { HelloComponent } from "./hello"; 3 | import { NameEditComponent } from "./nameEdit"; 4 | 5 | export const App = () => { 6 | const [name, setName] = React.useState("defaultUserName"); 7 | 8 | const setUsernameState = (newName : string) => { 9 | setName(newName); 10 | }; 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /hooks/04_Callback/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/04_Callback/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/04_Callback/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/04_Callback/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/05_Refactor/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/05_Refactor/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/05_Refactor/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/05_Refactor/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/05_Refactor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/06_Enable/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/06_Enable/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/06_Enable/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/06_Enable/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/06_Enable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/src/components/colorBrowser.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Color } from "../model/color"; 3 | 4 | interface Props { 5 | color: Color; 6 | } 7 | 8 | export const ColorBrowser: React.FC = (props) => { 9 | const divStyle: React.CSSProperties = { 10 | width: "11rem", 11 | height: "7rem", 12 | backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`, 13 | }; 14 | 15 | return
; 16 | }; 17 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/src/components/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./hello"; 2 | export * from "./nameEdit"; 3 | export * from "./colorBrowser"; 4 | export * from "./colorPicker"; 5 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/src/model/color.ts: -------------------------------------------------------------------------------- 1 | export interface Color { 2 | red: number; 3 | green: number; 4 | blue: number; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/07_ColorPicker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/src/components/colorBrowser.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Color } from "../model/color"; 3 | 4 | interface Props { 5 | color: Color; 6 | } 7 | 8 | export const ColorBrowser: React.FC = (props) => { 9 | const divStyle: React.CSSProperties = { 10 | width: "11rem", 11 | height: "7rem", 12 | backgroundColor: `rgb(${props.color.red},${props.color.green}, ${ 13 | props.color.blue 14 | })` 15 | }; 16 | 17 | return
; 18 | }; 19 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/src/components/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./hello"; 2 | export * from "./nameEdit"; 3 | export * from "./colorBrowser"; 4 | export * from "./colorPicker"; 5 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/src/model/color.ts: -------------------------------------------------------------------------------- 1 | export interface Color { 2 | red: number; 3 | green: number; 4 | blue: number; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/08_ColorPickerRefactor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/components/colorBrowser.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Color } from "../model/color"; 3 | 4 | interface Props { 5 | color: Color; 6 | } 7 | 8 | export const ColorBrowser: React.FC = (props) => { 9 | const divStyle: React.CSSProperties = { 10 | width: "11rem", 11 | height: "7rem", 12 | backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`, 13 | }; 14 | 15 | return
; 16 | }; 17 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/components/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./hello"; 2 | export * from "./nameEdit"; 3 | export * from "./colorBrowser"; 4 | export * from "./colorPicker"; 5 | export * from "./sidebar"; 6 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/components/sidebar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const classNames = require("./sidebar.css"); 4 | 5 | interface Props { 6 | isVisible: boolean; 7 | } 8 | 9 | const divStyle = (props: Props): React.CSSProperties => ({ 10 | width: props.isVisible ? "23rem" : "0rem", 11 | }); 12 | 13 | export const SidebarComponent: React.StatelessComponent = (props) => ( 14 |
15 | {props.children} 16 |
17 | ); 18 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/src/model/color.ts: -------------------------------------------------------------------------------- 1 | export interface Color { 2 | red: number; 3 | green: number; 4 | blue: number; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/09_Sidebar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/10_TableMock/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/components/colorBrowser.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Color } from "../model/color"; 3 | 4 | interface Props { 5 | color: Color; 6 | } 7 | 8 | export const ColorBrowser: React.FC = (props) => { 9 | const divStyle: React.CSSProperties = { 10 | width: "11rem", 11 | height: "7rem", 12 | backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`, 13 | }; 14 | 15 | return
; 16 | }; 17 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/components/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./hello"; 2 | export * from "./nameEdit"; 3 | export * from "./colorBrowser"; 4 | export * from "./colorPicker"; 5 | export * from "./sidebar"; 6 | export * from "./memberTable"; 7 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/components/sidebar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const classNames = require("./sidebar.css"); 4 | 5 | interface Props { 6 | isVisible: boolean; 7 | } 8 | 9 | const divStyle = (props: Props): React.CSSProperties => ({ 10 | width: props.isVisible ? "23rem" : "0rem" 11 | }); 12 | 13 | export const SidebarComponent: React.StatelessComponent = props => ( 14 |
15 | {props.children} 16 |
17 | ); 18 | 19 | 20 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/model/color.ts: -------------------------------------------------------------------------------- 1 | export interface Color { 2 | red: number; 3 | green: number; 4 | blue: number; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/10_TableMock/src/model/member.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/10_TableMock/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ], 9 | "@babel/preset-typescript", 10 | "@babel/preset-react" 11 | ], 12 | "plugins": ["@babel/plugin-transform-runtime"] 13 | } 14 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/components/colorBrowser.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Color } from "../model/color"; 3 | 4 | interface Props { 5 | color: Color; 6 | } 7 | 8 | export const ColorBrowser: React.FC = (props) => { 9 | const divStyle: React.CSSProperties = { 10 | width: "11rem", 11 | height: "7rem", 12 | backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`, 13 | }; 14 | 15 | return
; 16 | }; 17 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/components/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const HelloComponent: React.FC = (props) => { 8 | return

Hello user: {props.userName} !

; 9 | }; 10 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./hello"; 2 | export * from "./nameEdit"; 3 | export * from "./colorBrowser"; 4 | export * from "./colorPicker"; 5 | export * from "./sidebar"; 6 | export * from "./memberTable"; 7 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/components/sidebar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const classNames = require("./sidebar.css"); 4 | 5 | interface Props { 6 | isVisible: boolean; 7 | } 8 | 9 | const divStyle = (props: Props): React.CSSProperties => ({ 10 | width: props.isVisible ? "23rem" : "0rem" 11 | }); 12 | 13 | export const SidebarComponent: React.StatelessComponent = props => ( 14 |
15 | {props.children} 16 |
17 | ); 18 | 19 | 20 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/model/color.ts: -------------------------------------------------------------------------------- 1 | export interface Color { 2 | red: number; 3 | green: number; 4 | blue: number; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/src/model/member.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /hooks/11_TableAxios/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ], 9 | "@babel/preset-typescript", 10 | "@babel/preset-react" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { HashRouter, Switch, Route } from "react-router-dom"; 3 | import { PageA } from "./pages/pageA"; 4 | import { PageB } from "./pages/pageB"; 5 | 6 | export const App = () => { 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/src/pages/pageA.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const PageA = () => 5 |
6 |

Hello from page A

7 |
8 | Navigate to Page B 9 |
10 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/src/pages/pageB.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const PageB = () => 5 |
6 |

Hello from page B

7 |
8 | Navigate to Page A 9 |
10 | -------------------------------------------------------------------------------- /hooks/12_ReactRouter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/api/login.ts: -------------------------------------------------------------------------------- 1 | import { LoginEntity } from "../model/login"; 2 | 3 | // Just a fake loginAPI 4 | export const isValidLogin = (loginInfo: LoginEntity): Promise => 5 | new Promise((resolve) => { 6 | setTimeout(() => { 7 | // mock call 8 | resolve(loginInfo.login === "admin" && loginInfo.password === "test"); 9 | }, 500); 10 | }); 11 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { HashRouter, Switch, Route } from "react-router-dom"; 3 | import { LoginContainer } from "./pages/login.container"; 4 | import { PageB } from "./pages/pageB"; 5 | 6 | export const App = () => { 7 | return ( 8 | <> 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/common/index.ts: -------------------------------------------------------------------------------- 1 | export * from './notification'; 2 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/model/login.ts: -------------------------------------------------------------------------------- 1 | export interface LoginEntity { 2 | login: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): LoginEntity => ({ 7 | login: "", 8 | password: "" 9 | }); 10 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/src/pages/pageB.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const PageB = () => ( 5 |
6 |

Hello from page B

7 |
8 | Navigate to Login 9 |
10 | ); 11 | -------------------------------------------------------------------------------- /hooks/13_LoginForm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/api/login.ts: -------------------------------------------------------------------------------- 1 | import { LoginEntity } from "../model/login"; 2 | 3 | // Just a fake loginAPI 4 | export const isValidLogin = (loginInfo: LoginEntity): Promise => 5 | new Promise((resolve) => { 6 | setTimeout(() => { 7 | // mock call 8 | resolve(loginInfo.login === "admin" && loginInfo.password === "test"); 9 | }, 500); 10 | }); 11 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { HashRouter, Switch, Route } from "react-router-dom"; 3 | import { LoginContainer } from "./pages/login.container"; 4 | import { PageB } from "./pages/pageB"; 5 | 6 | export const App = () => { 7 | return ( 8 | <> 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/common/index.ts: -------------------------------------------------------------------------------- 1 | export * from './notification'; 2 | export * from './textField.component'; -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/model/login.ts: -------------------------------------------------------------------------------- 1 | export interface LoginEntity { 2 | login: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): LoginEntity => ({ 7 | login: "", 8 | password: "" 9 | }); 10 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/pages/login.validation.ts: -------------------------------------------------------------------------------- 1 | import { ValidationSchema, Validators } from "@lemoncode/fonk"; 2 | import { createFormikValidation } from "@lemoncode/fonk-formik"; 3 | 4 | const validationSchema: ValidationSchema = { 5 | field: { 6 | login: [Validators.required], 7 | password: [Validators.required], 8 | }, 9 | }; 10 | 11 | export const loginFormValidation = createFormikValidation(validationSchema); 12 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/src/pages/pageB.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const PageB = () => ( 5 |
6 |

Hello from page B

7 |
8 | Navigate to Login 9 |
10 | ); 11 | -------------------------------------------------------------------------------- /hooks/14_FormValidation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /hooks/15_Context/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /hooks/15_Context/src/api/login.ts: -------------------------------------------------------------------------------- 1 | import { LoginEntity } from "../model/login"; 2 | 3 | // Just a fake loginAPI 4 | export const isValidLogin = (loginInfo: LoginEntity): Promise => 5 | new Promise((resolve) => { 6 | setTimeout(() => { 7 | // mock call 8 | resolve(loginInfo.login === "admin" && loginInfo.password === "test"); 9 | }, 500); 10 | }); 11 | -------------------------------------------------------------------------------- /hooks/15_Context/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { HashRouter, Switch, Route } from "react-router-dom"; 3 | import { LoginContainer } from "./pages/login.container"; 4 | import { PageB } from "./pages/pageB"; 5 | import { SessionProvider } from "./common"; 6 | 7 | export const App = () => { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /hooks/15_Context/src/common/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./notification"; 2 | export * from "./textField.component"; 3 | export * from "./sessionContext"; 4 | -------------------------------------------------------------------------------- /hooks/15_Context/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /hooks/15_Context/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { App } from "./app"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /hooks/15_Context/src/model/login.ts: -------------------------------------------------------------------------------- 1 | export interface LoginEntity { 2 | login: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): LoginEntity => ({ 7 | login: "", 8 | password: "" 9 | }); 10 | -------------------------------------------------------------------------------- /hooks/15_Context/src/pages/login.validation.ts: -------------------------------------------------------------------------------- 1 | import { ValidationSchema, Validators } from "@lemoncode/fonk"; 2 | import { createFormikValidation } from "@lemoncode/fonk-formik"; 3 | 4 | const validationSchema: ValidationSchema = { 5 | field: { 6 | login: [Validators.required], 7 | password: [Validators.required], 8 | }, 9 | }; 10 | 11 | export const loginFormValidation = createFormikValidation(validationSchema); 12 | -------------------------------------------------------------------------------- /hooks/15_Context/src/pages/pageB.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { SessionContext } from "../common"; 4 | 5 | export const PageB: React.FC = () => { 6 | const loginContext = React.useContext(SessionContext); 7 | 8 | return ( 9 |
10 |

Hello from page B

11 |

User logged in: {loginContext.login}

12 |
13 | Navigate to Login 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /hooks/15_Context/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": ["node_modules"] 15 | } 16 | -------------------------------------------------------------------------------- /old_class_components_samples/00 BoilerPlate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } -------------------------------------------------------------------------------- /old_class_components_samples/00 BoilerPlate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 | 12 | -------------------------------------------------------------------------------- /old_class_components_samples/00 BoilerPlate/src/index.ts: -------------------------------------------------------------------------------- 1 | document.write('Hello from index.ts!'); -------------------------------------------------------------------------------- /old_class_components_samples/00 BoilerPlate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/01 HelloReact/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } -------------------------------------------------------------------------------- /old_class_components_samples/01 HelloReact/src/hello.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const HelloComponent = () => { 4 | return ( 5 |

Hello component !

6 | ); 7 | } -------------------------------------------------------------------------------- /old_class_components_samples/01 HelloReact/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Sample app

10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /old_class_components_samples/01 HelloReact/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | 4 | import { HelloComponent } from './hello'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); -------------------------------------------------------------------------------- /old_class_components_samples/01 HelloReact/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header, About } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/src/components/header.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const Header: React.StatelessComponent<{}> = () => { 4 | return ( 5 |
6 |

Application Header

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/02 Components/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import {App} from './app'; 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); 9 | -------------------------------------------------------------------------------- /old_class_components_samples/02 Components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/components/members/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MembersPage: React.StatelessComponent<{}> = () => { 4 | return ( 5 |
6 |

Members Page

7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/03 Navigation/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/src/router.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Route, HashRouter, Switch } from 'react-router-dom'; 3 | import { App } from './app'; 4 | import { About, MembersPage } from './components'; 5 | 6 | export const AppRouter: React.StatelessComponent<{}> = () => { 7 | return ( 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /old_class_components_samples/03 Navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/api/member/index.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | import { members } from './mockData'; 3 | 4 | const fetchMembers = (): Promise => { 5 | return Promise.resolve(members); 6 | }; 7 | 8 | export const memberAPI = { 9 | fetchMembers, 10 | }; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 |
8 | {props.children} 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/04 DisplayData/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/src/router.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Route, Switch, HashRouter } from 'react-router-dom'; 3 | import { App } from './app'; 4 | import { About, MembersPage } from './components'; 5 | 6 | export const AppRouter: React.StatelessComponent<{}> = () => { 7 | return ( 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /old_class_components_samples/04 DisplayData/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/api/member/index.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | import { members } from './mockData'; 3 | 4 | const fetchMembers = (): Promise => { 5 | return Promise.resolve(members); 6 | }; 7 | 8 | export const memberAPI = { 9 | fetchMembers, 10 | }; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 |
8 | {props.children} 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/components/members/memberRow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity } from '../../model'; 3 | 4 | interface Props { 5 | member: MemberEntity; 6 | } 7 | 8 | export const MemberRow: React.StatelessComponent = ({member}) => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | {member.id} 16 | 17 | 18 | {member.login} 19 | 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/05 Presentational Comp/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/05 Presentational Comp/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 |
8 | {props.children} 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/components/members/memberRow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity } from '../../model'; 3 | 4 | interface Props { 5 | member: MemberEntity; 6 | } 7 | 8 | export const MemberRow: React.StatelessComponent = ({member}) => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | {member.id} 16 | 17 | 18 | {member.login} 19 | 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/06 AJAX Call/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/src/router.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Route, Switch, HashRouter } from 'react-router-dom'; 3 | import { App } from './app'; 4 | import { About, MembersPage } from './components'; 5 | 6 | export const AppRouter: React.StatelessComponent<{}> = () => { 7 | return ( 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /old_class_components_samples/06 AJAX Call/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/components/member/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity } from '../../model'; 3 | import { MemberForm } from './memberForm'; 4 | 5 | interface Props { 6 | member: MemberEntity; 7 | onChange: (fieldName: string, value: string) => void; 8 | onSave: () => void; 9 | } 10 | 11 | export const MemberPage: React.StatelessComponent = (props) => { 12 | return ( 13 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/components/members/memberRow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity } from '../../model'; 3 | 4 | interface Props { 5 | member: MemberEntity; 6 | } 7 | 8 | export const MemberRow: React.StatelessComponent = ({member}) => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | {member.id} 16 | 17 | 18 | {member.login} 19 | 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/07 Form/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/07 Form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 |
8 | {props.children} 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ] 14 | }, 15 | }; 16 | 17 | export const memberFormValidation = createFormValidation(validationConstraints); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/components/member/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity, MemberErrors } from '../../model'; 3 | import { MemberForm } from './memberForm'; 4 | 5 | interface Props { 6 | member: MemberEntity; 7 | memberErrors: MemberErrors; 8 | onChange: (fieldName: string, value: string) => void; 9 | onSave: () => void; 10 | } 11 | 12 | export const MemberPage: React.StatelessComponent = (props) => { 13 | return ( 14 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/08 ParamNavigation/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/08 ParamNavigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 |
8 |
9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/common/constants/actionTypes.ts: -------------------------------------------------------------------------------- 1 | export const actionTypes = { 2 | FETCH_MEMBERS_COMPLETED: 'FETCH_MEMBERS_COMPLETED', 3 | FETCH_MEMBER_BY_ID_COMPLETED: 'FETCH_MEMBER_BY_ID_COMPLETED', 4 | UPDATE_MEMBER_FIELD: 'UPDATE_MEMBER_FIELD', 5 | SAVE_MEMBER: 'SAVE_MEMBER', 6 | }; 7 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/member/actions/fetchMemberById.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../../../common/constants/actionTypes'; 2 | import { MemberEntity } from '../../../model'; 3 | import { memberAPI } from '../../../api/member'; 4 | 5 | export const fetchMemberByIdAction = (id: number) => (dispatch) => { 6 | memberAPI.fetchMemberById(id) 7 | .then((member) => { 8 | dispatch(fetchMemberByIdCompleted(member)); 9 | }); 10 | }; 11 | 12 | const fetchMemberByIdCompleted = (member: MemberEntity) => ({ 13 | type: actionTypes.FETCH_MEMBER_BY_ID_COMPLETED, 14 | payload: member, 15 | }); 16 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ], 14 | avatar_url: [ 15 | { validator: Validators.required }, 16 | ] 17 | }, 18 | }; 19 | 20 | export const memberFormValidation = createFormValidation(validationConstraints); 21 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/members/actions/fetchMembers.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../../../common/constants/actionTypes'; 2 | import { MemberEntity } from '../../../model'; 3 | import { memberAPI } from '../../../api/member'; 4 | 5 | export const fetchMembersAction = () => (dispatch) => { 6 | memberAPI.fetchMembers() 7 | .then((members) => { 8 | dispatch(fetchMembersCompleted(members)); 9 | }); 10 | }; 11 | 12 | const fetchMembersCompleted = (members: MemberEntity[]) => ({ 13 | type: actionTypes.FETCH_MEMBERS_COMPLETED, 14 | payload: members, 15 | }); 16 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/components/members/pageContainer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { State } from '../../reducers'; 4 | import { fetchMembersAction } from './actions/fetchMembers'; 5 | import { MembersPage } from './page'; 6 | 7 | const mapStateToProps = (state: State) => ({ 8 | members: state.members, 9 | }); 10 | 11 | const mapDispatchToProps = (dispatch) => ({ 12 | fetchMembers: () => dispatch(fetchMembersAction()), 13 | }); 14 | 15 | export const MembersPageContainer = connect( 16 | mapStateToProps, 17 | mapDispatchToProps, 18 | )(MembersPage); 19 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/09 Redux/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { MemberEntity, MemberErrors } from '../model'; 3 | import { membersReducer } from './members'; 4 | import { memberReducer } from './member'; 5 | import { memberErrorsReducer } from './memberErrors'; 6 | 7 | export interface State { 8 | members: MemberEntity[]; 9 | member: MemberEntity; 10 | memberErrors: MemberErrors; 11 | }; 12 | 13 | export const state = combineReducers({ 14 | members: membersReducer, 15 | member: memberReducer, 16 | memberErrors: memberErrorsReducer, 17 | }); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/reducers/members.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../common/constants/actionTypes'; 2 | import { MemberEntity } from '../model'; 3 | 4 | export const membersReducer = (state: MemberEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_MEMBERS_COMPLETED: 7 | return handleFetchMembersCompleted(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchMembersCompleted = (state: MemberEntity[], payload: MemberEntity[]) => { 14 | return payload; 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/src/store.ts: -------------------------------------------------------------------------------- 1 | import { Store, createStore, compose, applyMiddleware } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { state, State } from './reducers'; 4 | 5 | export const store: Store = createStore( 6 | state, 7 | compose( 8 | applyMiddleware(reduxThunk), 9 | ) 10 | ); 11 | -------------------------------------------------------------------------------- /old_class_components_samples/09 Redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "emotion" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | import {LoadingSpinnerComponent} from './common/components/spinner/loadingSpinner'; 4 | 5 | export const App: React.StatelessComponent<{}> = (props) => { 6 | return ( 7 | <> 8 | 9 |
10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/common/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export {LoadingSpinnerComponent} from './loadingSpinner'; -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/common/components/spinner/loadingSpinner.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/common/constants/actionTypes.ts: -------------------------------------------------------------------------------- 1 | export const actionTypes = { 2 | FETCH_MEMBERS_COMPLETED: 'FETCH_MEMBERS_COMPLETED', 3 | FETCH_MEMBER_BY_ID_COMPLETED: 'FETCH_MEMBER_BY_ID_COMPLETED', 4 | UPDATE_MEMBER_FIELD: 'UPDATE_MEMBER_FIELD', 5 | SAVE_MEMBER: 'SAVE_MEMBER', 6 | FETCH_REPOSITORIES_COMPLETED:'FETCH_REPOSITORIES_COMPLETED', 7 | }; 8 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ], 14 | avatar_url: [ 15 | { validator: Validators.required }, 16 | ] 17 | }, 18 | }; 19 | 20 | export const memberFormValidation = createFormValidation(validationConstraints); 21 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/members/actions/fetchMembers.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../../../common/constants/actionTypes'; 2 | import { MemberEntity } from '../../../model'; 3 | import { memberAPI } from '../../../api/member'; 4 | import { trackPromise } from 'react-promise-tracker'; 5 | 6 | export const fetchMembersAction = () => (dispatch) => { 7 | trackPromise( 8 | memberAPI.fetchMembersAsync() 9 | .then((members) => { 10 | dispatch(fetchMembersCompleted(members)); 11 | }) 12 | ); 13 | }; 14 | 15 | const fetchMembersCompleted = (members: MemberEntity[]) => ({ 16 | type: actionTypes.FETCH_MEMBERS_COMPLETED, 17 | payload: members, 18 | }); 19 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/members/actions/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fetchMembers'; 2 | export * from '../../repos/actions/fetchRepositories'; 3 | 4 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/repos/repoHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const RepoHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | id 7 | Name 8 | Description 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/components/repos/repoRow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { RepositoryEntity } from '../../model'; 3 | 4 | 5 | interface Props { 6 | repo: RepositoryEntity; 7 | } 8 | 9 | export const RepoRow: React.StatelessComponent = ({ repo }) => { 10 | return ( 11 | 12 | 13 | {repo.id} 14 | 15 | 16 | {repo.name} 17 | 18 | 19 | {repo.description} 20 | 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/10 LoaderSpinner/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | export * from './repositoryEntity'; 4 | 5 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/model/repositoryEntity.ts: -------------------------------------------------------------------------------- 1 | export interface RepositoryEntity { 2 | id: string; 3 | name: string; 4 | description:string; 5 | } -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/reducers/members.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../common/constants/actionTypes'; 2 | import { MemberEntity } from '../model'; 3 | 4 | export const membersReducer = (state: MemberEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_MEMBERS_COMPLETED: 7 | return handleFetchMembersCompleted(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchMembersCompleted = (state: MemberEntity[], payload: MemberEntity[]) => { 14 | return payload; 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/reducers/repositories.ts: -------------------------------------------------------------------------------- 1 | import {actionTypes} from '../common/constants/actionTypes'; 2 | import {RepositoryEntity} from '../model/repositoryEntity'; 3 | 4 | export const repositoriesReducer = (state: RepositoryEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_REPOSITORIES_COMPLETED: 7 | return handleFetchRepositoriesCompleted(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchRepositoriesCompleted = (state: RepositoryEntity[], payload: RepositoryEntity[]) => { 14 | return payload; 15 | }; -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/src/store.ts: -------------------------------------------------------------------------------- 1 | import { Store, createStore, compose, applyMiddleware } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { state, State } from './reducers'; 4 | 5 | export const store: Store = createStore( 6 | state, 7 | compose( 8 | applyMiddleware(reduxThunk), 9 | ) 10 | ); 11 | -------------------------------------------------------------------------------- /old_class_components_samples/10 LoaderSpinner/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "emotion" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/config/test/jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "rootDir": "../../", 3 | "testRegex": "\\.spec\\.tsx?$", 4 | "moduleFileExtensions": [ 5 | "js", 6 | "jsx", 7 | "json", 8 | "ts", 9 | "tsx" 10 | ], 11 | "setupFiles": [ 12 | "/config/test/polyfills.js" 13 | ], 14 | "testURL": "http://localhost/", 15 | "transform": { 16 | ".tsx?": "/node_modules/ts-jest/preprocessor.js" 17 | }, 18 | "restoreMocks": true 19 | 20 | } -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/config/test/polyfills.js: -------------------------------------------------------------------------------- 1 | // Polyfill requestAnimationFrame required by React >=16.0.0 2 | require('raf/polyfill'); -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/sample.test.ts: -------------------------------------------------------------------------------- 1 | describe('Sample tests', () => { 2 | it('should pass spec', () => { 3 | // Arrange 4 | 5 | // Act 6 | 7 | // Assert 8 | expect(true).toBeTruthy(); 9 | }); 10 | 11 | 12 | it('should fail spec', () => { 13 | // Arrange 14 | 15 | // Act 16 | 17 | // Assert 18 | expect(false).toBeTruthy(); 19 | }); 20 | }); -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | import {LoadingSpinnerComponent} from '../src/common/components/spinner/loadingSpinner'; 4 | 5 | export const App: React.StatelessComponent<{}> = (props) => { 6 | return ( 7 | <> 8 | 9 |
10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/common/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export {LoadingSpinnerComponent} from './loadingSpinner'; -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/common/components/spinner/loadingSpinner.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/common/constants/actionTypes.ts: -------------------------------------------------------------------------------- 1 | export const actionTypes = { 2 | FETCH_MEMBERS_COMPLETED: 'FETCH_MEMBERS_COMPLETED', 3 | FETCH_MEMBER_BY_ID_COMPLETED: 'FETCH_MEMBER_BY_ID_COMPLETED', 4 | UPDATE_MEMBER_FIELD: 'UPDATE_MEMBER_FIELD', 5 | SAVE_MEMBER: 'SAVE_MEMBER', 6 | }; 7 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ], 14 | avatar_url: [ 15 | { validator: Validators.required }, 16 | ] 17 | }, 18 | }; 19 | 20 | export const memberFormValidation = createFormValidation(validationConstraints); 21 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/members/actions/fetchMembers.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../../../common/constants/actionTypes'; 2 | import { MemberEntity } from '../../../model'; 3 | import { memberAPI } from '../../../api/member'; 4 | import { trackPromise } from 'react-promise-tracker'; 5 | 6 | export const fetchMembersAction = () => (dispatch) => { 7 | trackPromise( 8 | memberAPI.fetchMembersAsync() 9 | .then((members) => { 10 | dispatch(fetchMembersCompleted(members)); 11 | }) 12 | ); 13 | }; 14 | 15 | const fetchMembersCompleted = (members: MemberEntity[]) => ({ 16 | type: actionTypes.FETCH_MEMBERS_COMPLETED, 17 | payload: members, 18 | }); 19 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/components/members/pageContainer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { State } from '../../reducers'; 4 | import { fetchMembersAction } from './actions/fetchMembers'; 5 | import { MembersPage } from './page'; 6 | 7 | const mapStateToProps = (state: State) => ({ 8 | members: state.members, 9 | }); 10 | 11 | const mapDispatchToProps = (dispatch) => ({ 12 | fetchMembers: () => dispatch(fetchMembersAction()), 13 | }); 14 | 15 | export const MembersPageContainer = connect( 16 | mapStateToProps, 17 | mapDispatchToProps, 18 | )(MembersPage); 19 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/11 TestReducer/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { MemberEntity, MemberErrors } from '../model'; 3 | import { membersReducer } from './members'; 4 | import { memberReducer } from './member'; 5 | import { memberErrorsReducer } from './memberErrors'; 6 | 7 | export interface State { 8 | members: MemberEntity[]; 9 | member: MemberEntity; 10 | memberErrors: MemberErrors; 11 | }; 12 | 13 | export const state = combineReducers({ 14 | members: membersReducer, 15 | member: memberReducer, 16 | memberErrors: memberErrorsReducer, 17 | }); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/reducers/members.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../common/constants/actionTypes'; 2 | import { MemberEntity } from '../model'; 3 | 4 | export const membersReducer = (state: MemberEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_MEMBERS_COMPLETED: 7 | return handleFetchMembersCompleted(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchMembersCompleted = (state: MemberEntity[], payload: MemberEntity[]) => { 14 | return payload; 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/src/store.ts: -------------------------------------------------------------------------------- 1 | import { Store, createStore, compose, applyMiddleware } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { state, State } from './reducers'; 4 | 5 | export const store: Store = createStore( 6 | state, 7 | compose( 8 | applyMiddleware(reduxThunk), 9 | ) 10 | ); 11 | -------------------------------------------------------------------------------- /old_class_components_samples/11 TestReducer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "emotion" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/config/test/jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "rootDir": "../../", 3 | "testRegex": "\\.spec\\.tsx?$", 4 | "moduleFileExtensions": [ 5 | "js", 6 | "jsx", 7 | "json", 8 | "ts", 9 | "tsx" 10 | ], 11 | "setupFiles": [ 12 | "/config/test/polyfills.js" 13 | ], 14 | "testURL": "http://localhost/", 15 | "transform": { 16 | ".tsx?": "/node_modules/ts-jest/preprocessor.js" 17 | }, 18 | "restoreMocks": true 19 | 20 | } -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/config/test/polyfills.js: -------------------------------------------------------------------------------- 1 | // Polyfill requestAnimationFrame required by React >=16.0.0 2 | require('raf/polyfill'); 3 | global.fetch = require('jest-fetch-mock'); -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | import {LoadingSpinnerComponent} from '../src/common/components/spinner/loadingSpinner'; 4 | 5 | export const App: React.StatelessComponent<{}> = (props) => { 6 | return ( 7 | <> 8 | 9 |
10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/common/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export {LoadingSpinnerComponent} from './loadingSpinner'; -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/common/components/spinner/loadingSpinner.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/common/constants/actionTypes.ts: -------------------------------------------------------------------------------- 1 | export const actionTypes = { 2 | FETCH_MEMBERS_COMPLETED: 'FETCH_MEMBERS_COMPLETED', 3 | FETCH_MEMBER_BY_ID_COMPLETED: 'FETCH_MEMBER_BY_ID_COMPLETED', 4 | UPDATE_MEMBER_FIELD: 'UPDATE_MEMBER_FIELD', 5 | SAVE_MEMBER: 'SAVE_MEMBER', 6 | }; 7 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ], 14 | avatar_url: [ 15 | { validator: Validators.required }, 16 | ] 17 | }, 18 | }; 19 | 20 | export const memberFormValidation = createFormValidation(validationConstraints); 21 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/components/members/pageContainer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { State } from '../../reducers'; 4 | import { fetchMembersAction } from './actions/fetchMembers'; 5 | import { MembersPage } from './page'; 6 | 7 | const mapStateToProps = (state: State) => ({ 8 | members: state.members, 9 | }); 10 | 11 | const mapDispatchToProps = (dispatch) => ({ 12 | fetchMembers: () => dispatch(fetchMembersAction()), 13 | }); 14 | 15 | export const MembersPageContainer = connect( 16 | mapStateToProps, 17 | mapDispatchToProps, 18 | )(MembersPage); 19 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/12 TestAction/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { MemberEntity, MemberErrors } from '../model'; 3 | import { membersReducer } from './members'; 4 | import { memberReducer } from './member'; 5 | import { memberErrorsReducer } from './memberErrors'; 6 | 7 | export interface State { 8 | members: MemberEntity[]; 9 | member: MemberEntity; 10 | memberErrors: MemberErrors; 11 | }; 12 | 13 | export const state = combineReducers({ 14 | members: membersReducer, 15 | member: memberReducer, 16 | memberErrors: memberErrorsReducer, 17 | }); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/reducers/members.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../common/constants/actionTypes'; 2 | import { MemberEntity } from '../model'; 3 | 4 | export const membersReducer = (state: MemberEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_MEMBERS_COMPLETED: 7 | return handleFetchMembersCompleted(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchMembersCompleted = (state: MemberEntity[], payload: MemberEntity[]) => { 14 | return payload; 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/src/store.ts: -------------------------------------------------------------------------------- 1 | import { Store, createStore, compose, applyMiddleware } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { state, State } from './reducers'; 4 | 5 | export const store: Store = createStore( 6 | state, 7 | compose( 8 | applyMiddleware(reduxThunk), 9 | ) 10 | ); 11 | -------------------------------------------------------------------------------- /old_class_components_samples/12 TestAction/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "emotion" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/config/test/polyfills.js: -------------------------------------------------------------------------------- 1 | // Polyfill requestAnimationFrame required by React >=16.0.0 2 | require('raf/polyfill'); 3 | global.fetch = require('jest-fetch-mock'); -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/config/test/setupTest.js: -------------------------------------------------------------------------------- 1 | const enzyme = require('enzyme'); 2 | const Adapter = require('enzyme-adapter-react-16'); 3 | 4 | // Setup enzyme's react adapter 5 | enzyme.configure({ adapter: new Adapter() }); -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | import {LoadingSpinnerComponent} from '../src/common/components/spinner/loadingSpinner'; 4 | 5 | export const App: React.StatelessComponent<{}> = (props) => { 6 | return ( 7 | <> 8 | 9 |
10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/common/components/form/__snapshots__/button.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`common/components/form/button specs should render as expected when passing required properties 1`] = ` 4 | 11 | `; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/common/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export {LoadingSpinnerComponent} from './loadingSpinner'; -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/common/components/spinner/loadingSpinner.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/common/constants/actionTypes.ts: -------------------------------------------------------------------------------- 1 | export const actionTypes = { 2 | FETCH_MEMBERS_COMPLETED: 'FETCH_MEMBERS_COMPLETED', 3 | FETCH_MEMBER_BY_ID_COMPLETED: 'FETCH_MEMBER_BY_ID_COMPLETED', 4 | UPDATE_MEMBER_FIELD: 'UPDATE_MEMBER_FIELD', 5 | SAVE_MEMBER: 'SAVE_MEMBER', 6 | }; 7 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/about.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {About} from './about'; 3 | import { shallow } from 'enzyme'; 4 | 5 | describe ('components/about tests', () =>{ 6 | it('should render as expected ',()=>{ 7 | //Arrange 8 | //Act 9 | const component = shallow( 10 | 11 | ); 12 | //Assert 13 | expect (component).toMatchSnapshot(); 14 | }); 15 | }); -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/header.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Header} from './header'; 3 | 4 | import { shallow} from 'enzyme'; 5 | 6 | 7 | describe('/src/components/header test',()=>{ 8 | it ('should render as expected', ()=>{ 9 | //Arrange 10 | //act 11 | const component = shallow( 12 |
13 | ); 14 | 15 | //assert 16 | expect(component).toMatchSnapshot(); 17 | }); 18 | }); -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/member/__snapshots__/page.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/components/member/page specs should return as expected when props are passed 1`] = ` 4 | 25 | `; 26 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ], 14 | avatar_url: [ 15 | { validator: Validators.required }, 16 | ] 17 | }, 18 | }; 19 | 20 | export const memberFormValidation = createFormValidation(validationConstraints); 21 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/__snapshots__/memberHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`./components/members/memberHeader should render memberHeader as expected 1`] = ` 4 | 5 | 6 | Avatar 7 | 8 | 9 | Id 10 | 11 | 12 | Name 13 | 14 | 15 | `; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/__snapshots__/memberRow.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/components/members/memberRow should render as expected whenprops are passed 1`] = ` 4 | 5 | 6 | 10 | 11 | 12 | 16 | -1 17 | 18 | 19 | 20 | 21 | 22 | 23 | `; 24 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/__snapshots__/page.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`components/members/page specs should return as expected when props are passed 1`] = ` 4 |
7 |

8 | Members Page 9 |

10 | 14 | New Member 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | `; 26 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/__snapshots__/pageContainer.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/components/members/pageContainer should call to fetchMembers action creator when call to fetchMembers prop 1`] = `[MockFunction]`; 4 | 5 | exports[`/components/members/pageContainer should render as spected passing state 1`] = ` 6 | 10 | `; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/memberHeader.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {MemberHeader} from './memberHeader'; 3 | import {shallow} from 'enzyme'; 4 | 5 | describe('./components/members/memberHeader',()=>{ 6 | it('should render memberHeader as expected',()=>{ 7 | //arrange 8 | //act 9 | const component = shallow( 10 | 11 | ); 12 | //Assert 13 | expect (component).toMatchSnapshot(); 14 | 15 | }); 16 | }); -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/memberRow.spec.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {MemberRow,Props} from './memberRow'; 3 | import {shallow} from 'enzyme'; 4 | import { createEmptyMember } from '../../reducers/member'; 5 | 6 | describe('/components/members/memberRow',()=>{ 7 | it('should render as expected whenprops are passed',()=>{ 8 | //arrange 9 | let member: Props = {member:createEmptyMember()}; 10 | //act 11 | let component = shallow( 12 | 13 | ); 14 | //assert 15 | expect (component).toMatchSnapshot(); 16 | }); 17 | }) 18 | 19 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/components/members/pageContainer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { State } from '../../reducers'; 4 | import { fetchMembersAction } from './actions/fetchMembers'; 5 | import { MembersPage } from './page'; 6 | 7 | const mapStateToProps = (state: State) => ({ 8 | members: state.members, 9 | }); 10 | 11 | const mapDispatchToProps = (dispatch) => ({ 12 | fetchMembers: () => dispatch(fetchMembersAction()), 13 | }); 14 | 15 | export const MembersPageContainer = connect( 16 | mapStateToProps, 17 | mapDispatchToProps, 18 | )(MembersPage); 19 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/13 TestComponents/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { MemberEntity, MemberErrors } from '../model'; 3 | import { membersReducer } from './members'; 4 | import { memberReducer } from './member'; 5 | import { memberErrorsReducer } from './memberErrors'; 6 | 7 | export interface State { 8 | members: MemberEntity[]; 9 | member: MemberEntity; 10 | memberErrors: MemberErrors; 11 | }; 12 | 13 | export const state = combineReducers({ 14 | members: membersReducer, 15 | member: memberReducer, 16 | memberErrors: memberErrorsReducer, 17 | }); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/reducers/members.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../common/constants/actionTypes'; 2 | import { MemberEntity } from '../model'; 3 | 4 | 5 | export const createEmptyMembers = (): MemberEntity[] =>( 6 | [] 7 | ) 8 | export const membersReducer = (state: MemberEntity[] = [], action) => { 9 | switch (action.type) { 10 | case actionTypes.FETCH_MEMBERS_COMPLETED: 11 | return handleFetchMembersCompleted(state, action.payload); 12 | } 13 | 14 | return state; 15 | }; 16 | 17 | const handleFetchMembersCompleted = (state: MemberEntity[], payload: MemberEntity[]) => { 18 | return payload; 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/src/store.ts: -------------------------------------------------------------------------------- 1 | import { Store, createStore, compose, applyMiddleware } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { state, State } from './reducers'; 4 | 5 | export const store: Store = createStore( 6 | state, 7 | compose( 8 | applyMiddleware(reduxThunk), 9 | ) 10 | ); 11 | -------------------------------------------------------------------------------- /old_class_components_samples/13 TestComponents/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "emotion" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | import {LoadingSpinnerComponent} from './common/components/spinner/loadingSpinner'; 4 | 5 | export const App: React.StatelessComponent<{}> = (props) => { 6 | return ( 7 | <> 8 | 9 |
10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/common/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export {LoadingSpinnerComponent} from './loadingSpinner'; -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/common/components/spinner/loadingSpinner.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/common/constants/actionTypes.ts: -------------------------------------------------------------------------------- 1 | export const actionTypes = { 2 | FETCH_MEMBER_BY_ID_COMPLETED: 'FETCH_MEMBER_BY_ID_COMPLETED', 3 | UPDATE_MEMBER_FIELD: 'UPDATE_MEMBER_FIELD', 4 | SAVE_MEMBER: 'SAVE_MEMBER', 5 | FETCH_REPOSITORIES_COMPLETED:'FETCH_REPOSITORIES_COMPLETED', 6 | FETCH_MEMBER_REQUEST_START : 'FETCH_MEMBER_START', 7 | FETCH_MEMBER_REQUEST_COMPLETED : 'FETCH_MEMBER_REQUEST', 8 | }; 9 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ], 14 | avatar_url: [ 15 | { validator: Validators.required }, 16 | ] 17 | }, 18 | }; 19 | 20 | export const memberFormValidation = createFormValidation(validationConstraints); 21 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/members/actions/fetchMembers.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../../../common/constants/actionTypes'; 2 | import { MemberEntity } from '../../../model'; 3 | import { memberAPI } from '../../../api/member'; 4 | import { trackPromise } from 'react-promise-tracker'; 5 | 6 | 7 | export const fetchMembersStartAction = () => ( 8 | { 9 | type: actionTypes.FETCH_MEMBER_REQUEST_START, 10 | } 11 | ); 12 | 13 | 14 | 15 | 16 | export const fetchMembersCompletedAction = (members: MemberEntity[]) => ( 17 | { 18 | type: actionTypes.FETCH_MEMBER_REQUEST_COMPLETED, 19 | payload: members, 20 | } 21 | ); 22 | 23 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/members/actions/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fetchMembers'; 2 | export * from '../../repos/actions/fetchRepositories'; 3 | 4 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/repos/repoHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const RepoHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | id 7 | Name 8 | Description 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/components/repos/repoRow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { RepositoryEntity } from '../../model'; 3 | 4 | 5 | interface Props { 6 | repo: RepositoryEntity; 7 | } 8 | 9 | export const RepoRow: React.StatelessComponent = ({ repo }) => { 10 | return ( 11 | 12 | 13 | {repo.id} 14 | 15 | 16 | {repo.name} 17 | 18 | 19 | {repo.description} 20 | 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/14 AsyncCalls_Redux_Saga/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | export * from './repositoryEntity'; 4 | 5 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/model/repositoryEntity.ts: -------------------------------------------------------------------------------- 1 | export interface RepositoryEntity { 2 | id: string; 3 | name: string; 4 | description:string; 5 | } -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/reducers/members.ts: -------------------------------------------------------------------------------- 1 | import { actionTypes } from '../common/constants/actionTypes'; 2 | import { MemberEntity } from '../model'; 3 | 4 | export const membersReducer = (state: MemberEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_MEMBER_REQUEST_COMPLETED: 7 | return handleFetchMembersStartedSaga(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchMembersStartedSaga = (state: MemberEntity[], payload: MemberEntity[]) => { 14 | return payload; 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/reducers/repositories.ts: -------------------------------------------------------------------------------- 1 | import {actionTypes} from '../common/constants/actionTypes'; 2 | import {RepositoryEntity} from '../model/repositoryEntity'; 3 | 4 | export const repositoriesReducer = (state: RepositoryEntity[] = [], action) => { 5 | switch (action.type) { 6 | case actionTypes.FETCH_REPOSITORIES_COMPLETED: 7 | return handleFetchRepositoriesCompleted(state, action.payload); 8 | } 9 | 10 | return state; 11 | }; 12 | 13 | const handleFetchRepositoriesCompleted = (state: RepositoryEntity[], payload: RepositoryEntity[]) => { 14 | return payload; 15 | }; -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/sagas/membersSaga.tsx: -------------------------------------------------------------------------------- 1 | import "regenerator-runtime/runtime"; 2 | import { call, put } from 'redux-saga/effects'; 3 | import {memberAPI} from '../api/member'; 4 | import {fetchMembersCompletedAction} from '../components/members/actions'; 5 | import {MemberEntity} from '../model/memberEntity'; 6 | 7 | // worker Saga: will be fired on LOAD_MEMBERS_REQUESTED actions 8 | export function* fetchMembers() { 9 | let members: Array; 10 | members = yield call(memberAPI.fetchMembersAsync); 11 | yield put(fetchMembersCompletedAction(members)); 12 | } -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/src/store.ts: -------------------------------------------------------------------------------- 1 | import { Store, createStore, compose, applyMiddleware } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { state, State } from './reducers'; 4 | import createSagaMiddleware from 'redux-saga'; 5 | import membersSagaWatcher from './sagas/membersSagaWatcher'; 6 | 7 | const sagaMiddleware = createSagaMiddleware(); 8 | 9 | export const store: Store = createStore( 10 | state, 11 | compose( 12 | applyMiddleware(reduxThunk, sagaMiddleware), 13 | ) 14 | ); 15 | sagaMiddleware.run(membersSagaWatcher); 16 | -------------------------------------------------------------------------------- /old_class_components_samples/14 AsyncCalls_Redux_Saga/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true, 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/assignMembers.ts: -------------------------------------------------------------------------------- 1 | 2 | const assignMembers = (members : any) => { 3 | return { 4 | type: 'MEMBERS_ASSIGN' 5 | ,members: members 6 | } 7 | } 8 | 9 | export default assignMembers; 10 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/initializeNewMember.ts: -------------------------------------------------------------------------------- 1 | const initializeNewMember = () => { 2 | return { 3 | type: 'MEMBER_INITIALIZE_NEW' 4 | } 5 | } 6 | 7 | export default initializeNewMember; 8 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/loadMember.ts: -------------------------------------------------------------------------------- 1 | import memberAPI from '../api/memberAPI'; 2 | 3 | const loadMember = (id : number) => { 4 | return { 5 | type: 'MEMBER_LOAD' 6 | ,member: memberAPI.getMemberById(id) 7 | } 8 | } 9 | 10 | export default loadMember; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/loadMembers.ts: -------------------------------------------------------------------------------- 1 | import memberAPI from '../api/memberAPI'; 2 | import assignMembers from './assignMembers'; 3 | 4 | function loadMembers() { 5 | 6 | // Invert control! 7 | // Return a function that accepts `dispatch` so we can dispatch later. 8 | // Thunk middleware knows how to turn thunk async actions into actions. 9 | 10 | return function (dispatch) { 11 | return memberAPI.getAllMembersAsync().then( 12 | data => dispatch(assignMembers(data)) 13 | ); 14 | }; 15 | } 16 | 17 | export default loadMembers; 18 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/resetSaveCompleted.ts: -------------------------------------------------------------------------------- 1 | 2 | const resetSaveCompleted = () => { 3 | return { 4 | type: 'MEMBER_RESET_SAVE_COMPLETED' 5 | } 6 | } 7 | 8 | export default resetSaveCompleted; 9 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/saveMember.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from "../api/MemberEntity"; 2 | import memberAPI from '../api/memberAPI'; 3 | import MemberFormErrors from '../validations/memberFormErrors'; 4 | import MemberFormValidator from '../validations/memberFormValidator'; 5 | 6 | const saveMember = (member : MemberEntity) => { 7 | // Candidate to be splitted 8 | let errorsSave : MemberFormErrors = MemberFormValidator.validateMember(member); 9 | 10 | if(errorsSave.isEntityValid) { 11 | memberAPI.saveAuthor(member); 12 | } 13 | 14 | return { 15 | type: 'MEMBER_SAVE' 16 | ,errors : errorsSave 17 | } 18 | } 19 | 20 | export default saveMember; 21 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/actions/uiInputMember.ts: -------------------------------------------------------------------------------- 1 | 2 | const uiInputMember = (fieldName : string, value: any) => { 3 | return { 4 | type: 'MEMBER_UI_INPUT' 5 | ,fieldName : fieldName 6 | ,value: value 7 | } 8 | } 9 | 10 | export default uiInputMember; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/api/memberEntity.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class MemberEntity { 3 | id: number; 4 | login: string; 5 | avatar_url: string; 6 | 7 | constructor() { 8 | this.id = -1; 9 | this.login = ""; 10 | this.avatar_url = ""; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/api/memberMockData.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from './memberEntity'; 2 | 3 | var MembersMockData : Array = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | 17 | export default MembersMockData; 18 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/reducers/membersReducer.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from "../api/memberEntity"; 2 | 3 | // Just to show how combine reducers work, we have 4 | // divided into two reducers member load + member load/update/delete 5 | export default (state : Array = [], action) => { 6 | switch (action.type) { 7 | case 'MEMBERS_ASSIGN': 8 | 9 | return [...action.members]; 10 | 11 | default: 12 | return state; 13 | } 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/validations/memberFormErrors.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class MemberErrors { 3 | id: string; 4 | login: string; 5 | avatar_url: string; 6 | 7 | isEntityValid : boolean; 8 | 9 | public constructor() { 10 | this.id = ""; 11 | this.login = ""; 12 | this.avatar_url = ""; 13 | 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /old_class_components_samples/15 Lazy Loading/src/validations/memberFormValidator.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from '../api/MemberEntity'; 2 | import MemberFormErrors from './memberFormErrors'; 3 | 4 | class MemberFormValidator { 5 | public validateMember(member : MemberEntity) : MemberFormErrors 6 | { 7 | let memberFormErrors : MemberFormErrors = new MemberFormErrors(); 8 | memberFormErrors.isEntityValid = true; 9 | 10 | if (member.login.length < 3) { 11 | memberFormErrors.login = 'Login must be at least 3 characters.'; 12 | memberFormErrors.isEntityValid = false; 13 | } 14 | 15 | return memberFormErrors; 16 | } 17 | } 18 | 19 | export default new MemberFormValidator(); 20 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/actions/assignMembers.ts: -------------------------------------------------------------------------------- 1 | 2 | const assignMembers = (members : any) => { 3 | return { 4 | type: 'MEMBERS_ASSIGN' 5 | ,members: members 6 | } 7 | } 8 | 9 | export default assignMembers; 10 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/actions/initializeNewMember.ts: -------------------------------------------------------------------------------- 1 | const initializeNewMember = () => { 2 | return { 3 | type: 'MEMBER_INITIALIZE_NEW' 4 | } 5 | } 6 | 7 | export default initializeNewMember; 8 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/actions/loadMember.ts: -------------------------------------------------------------------------------- 1 | import memberAPI from '../api/memberAPI'; 2 | 3 | const loadMember = (id : number) => { 4 | return { 5 | type: 'MEMBER_LOAD' 6 | ,member: memberAPI.getMemberById(id) 7 | } 8 | } 9 | 10 | export default loadMember; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/actions/loadMembers.ts: -------------------------------------------------------------------------------- 1 | import memberAPI from '../api/memberAPI'; 2 | import assignMembers from './assignMembers'; 3 | 4 | function loadMembers() { 5 | 6 | // Invert control! 7 | // Return a function that accepts `dispatch` so we can dispatch later. 8 | // Thunk middleware knows how to turn thunk async actions into actions. 9 | 10 | return function (dispatch) { 11 | return memberAPI.getAllMembersAsync().then( 12 | data => dispatch(assignMembers(data)) 13 | ); 14 | }; 15 | } 16 | 17 | export default loadMembers; 18 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/actions/uiInputMember.ts: -------------------------------------------------------------------------------- 1 | 2 | const uiInputMember = (fieldName : string, value: any) => { 3 | return { 4 | type: 'MEMBER_UI_INPUT' 5 | ,fieldName : fieldName 6 | ,value: value 7 | } 8 | } 9 | 10 | export default uiInputMember; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/api/memberEntity.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class MemberEntity { 3 | id: number; 4 | login: string; 5 | avatar_url: string; 6 | 7 | constructor() { 8 | this.id = -1; 9 | this.login = ""; 10 | this.avatar_url = ""; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/api/memberMockData.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from './memberEntity'; 2 | 3 | var MembersMockData : Array = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | 17 | export default MembersMockData; 18 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/css/site.css: -------------------------------------------------------------------------------- 1 | /* entry point css */ 2 | .avatar { 3 | max-width: 80px 4 | } 5 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/middleware/navigationInfo.ts: -------------------------------------------------------------------------------- 1 | export class NavigationInfo { 2 | successNavigationRoute : string; 3 | errorNavigationRoute : string; 4 | succeeded : boolean; 5 | 6 | constructor() { 7 | this.successNavigationRoute = null; 8 | this.errorNavigationRoute = null; 9 | this.succeeded = true; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/middleware/uiNotificationInfo.ts: -------------------------------------------------------------------------------- 1 | export class UINotificationInfo { 2 | successMessage : string; 3 | errorMessage : string; 4 | succeeded : boolean; 5 | 6 | constructor() { 7 | this.successMessage = null; 8 | this.errorMessage = null; 9 | this.succeeded = true; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/reducers/membersReducer.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from "../api/memberEntity"; 2 | 3 | // Just to show how combine reducers work, we have 4 | // divided into two reducers member load + member load/update/delete 5 | export default (state : Array = [], action) => { 6 | switch (action.type) { 7 | case 'MEMBERS_ASSIGN': 8 | 9 | return [...action.members]; 10 | 11 | default: 12 | return state; 13 | } 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/src/validations/memberFormErrors.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class MemberErrors { 3 | id: string; 4 | login: string; 5 | avatar_url: string; 6 | 7 | isEntityValid : boolean; 8 | 9 | public constructor() { 10 | this.id = ""; 11 | this.login = ""; 12 | this.avatar_url = ""; 13 | 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /old_class_components_samples/16 Custom Middleware/test/test_index.js: -------------------------------------------------------------------------------- 1 | // require all modules ending in ".spec" from the 2 | // current directory and all subdirectories 3 | 4 | var testsContext = require.context("../src", true, /.spec$/); 5 | testsContext.keys().forEach(testsContext); 6 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/assignMembers.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from '../api/memberEntity'; 2 | 3 | 4 | const assignMembers = (members : any) => { 5 | return { 6 | type: 'MEMBERS_ASSIGN' 7 | ,members: members 8 | } 9 | } 10 | 11 | export default assignMembers; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/assignRepos.ts: -------------------------------------------------------------------------------- 1 | import RepoEntity from '../api/repoEntity'; 2 | 3 | const assignRepos = (repos: Array) => { 4 | return { 5 | type: 'REPOS_ASSIGN', 6 | repos: repos 7 | }; 8 | }; 9 | 10 | export default assignRepos; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/httpCallCompleted.ts: -------------------------------------------------------------------------------- 1 | const httpCallCompleted = () => { 2 | return { 3 | type: 'HTTP_GET_CALL_COMPLETED' 4 | } 5 | } 6 | 7 | export default httpCallCompleted; 8 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/httpCallStarted.ts: -------------------------------------------------------------------------------- 1 | const httpCallStarted = () => { 2 | return { 3 | type: 'HTTP_GET_CALL_STARTED' 4 | } 5 | } 6 | 7 | export default httpCallStarted; 8 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/httpInitializeDispatcher.ts: -------------------------------------------------------------------------------- 1 | import http from '../http/http'; 2 | 3 | const httpInitializeDispatcher = (dispatcher) => { 4 | http.Initialize(dispatcher); 5 | 6 | return { 7 | type: 'HTTP_INITIALIZE_DISPATCHER' 8 | } 9 | } 10 | 11 | export { 12 | httpInitializeDispatcher 13 | } 14 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/initializeNewMember.ts: -------------------------------------------------------------------------------- 1 | const initializeNewMember = () => { 2 | return { 3 | type: 'MEMBER_INITIALIZE_NEW' 4 | } 5 | } 6 | 7 | export { 8 | initializeNewMember 9 | }; 10 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/loadMember.ts: -------------------------------------------------------------------------------- 1 | import memberAPI from '../api/memberAPI'; 2 | 3 | const loadMember = (id : number) => { 4 | return { 5 | type: 'MEMBER_LOAD' 6 | ,member: memberAPI.getMemberById(id) 7 | } 8 | } 9 | 10 | export { 11 | loadMember 12 | }; 13 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/loadRepos.ts: -------------------------------------------------------------------------------- 1 | import RepoEntity from '../api/repoEntity'; 2 | import RepoAPI from '../api/repoAPI'; 3 | import assignRepos from './assignRepos'; 4 | 5 | function loadRepos() { 6 | return dispatcher => { 7 | var promise: Q.Promise; 8 | promise = RepoAPI.getAllReposAsync(); 9 | 10 | promise.then( 11 | data => dispatcher(assignRepos(data)) 12 | ); 13 | 14 | return promise; 15 | } 16 | } 17 | 18 | export { 19 | loadRepos 20 | }; 21 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/resetSaveCompleted.ts: -------------------------------------------------------------------------------- 1 | 2 | const resetSaveCompleted = () => { 3 | return { 4 | type: 'MEMBER_RESET_SAVE_COMPLETED' 5 | } 6 | } 7 | 8 | export { 9 | resetSaveCompleted 10 | }; 11 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/spec/httpCallCompleted.spec.ts: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import httpCallCompleted from '../httpCallCompleted'; 3 | 4 | describe('httpCallCompleted', () => { 5 | it('should return http action type: HTTP_GET_CALL_COMPLETED when calling httpCallCompleted', () => { 6 | // Arrange 7 | 8 | // Act 9 | let result = httpCallCompleted(); 10 | 11 | // Assert 12 | expect(result.type).to.be.equal('HTTP_GET_CALL_COMPLETED'); 13 | }); 14 | }) 15 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/spec/httpCallStarted.spec.ts: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import httpCallStarted from '../httpCallStarted'; 3 | 4 | describe('httpCallStarted', () => { 5 | it('should return http action type: HTTP_GET_CALL_STARTED when calling httpCallStarted', () => { 6 | // Arrange 7 | 8 | // Act 9 | let result = httpCallStarted(); 10 | 11 | // Assert 12 | expect(result.type).to.be.equal('HTTP_GET_CALL_STARTED'); 13 | }); 14 | }) 15 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/spec/initializeNewMember.spec.ts: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import { initializeNewMember } from '../initializeNewMember'; 3 | 4 | describe('initializeNewMember', () => { 5 | it('should return http action type: MEMBER_INITIALIZE_NEW when calling initializeNewMember', () => { 6 | // Arrange 7 | 8 | // Act 9 | let result = initializeNewMember(); 10 | 11 | // Assert 12 | expect(result.type).to.be.equal('MEMBER_INITIALIZE_NEW'); 13 | }); 14 | }) 15 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/spec/resetSaveCompleted.spec.ts: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import { resetSaveCompleted } from '../resetSaveCompleted'; 3 | 4 | describe('resetSaveCompleted', () => { 5 | it('should return an action equals { type: MEMBER_RESET_SAVE_COMPLETED } when calling resetSaveCompleted', () => { 6 | // Arrange 7 | 8 | // Act 9 | let result = resetSaveCompleted(); 10 | 11 | // Assert 12 | expect(result.type).to.be.equal('MEMBER_RESET_SAVE_COMPLETED'); 13 | }); 14 | }) 15 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/actions/uiInputMember.ts: -------------------------------------------------------------------------------- 1 | const uiInputMember = (fieldName : string, value: any) => { 2 | return { 3 | type: 'MEMBER_UI_INPUT' 4 | ,fieldName : fieldName 5 | ,value: value 6 | } 7 | } 8 | 9 | export { 10 | uiInputMember 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/api/memberEntity.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class MemberEntity { 3 | id: number; 4 | login: string; 5 | avatar_url: string; 6 | 7 | constructor() { 8 | this.id = -1; 9 | this.login = ""; 10 | this.avatar_url = ""; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/api/memberMockData.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from './memberEntity' 2 | 3 | var MembersMockData : Array = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | 17 | export default MembersMockData; 18 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/api/repoEntity.ts: -------------------------------------------------------------------------------- 1 | export default class RepoEntity { 2 | id: number; 3 | name: string; 4 | 5 | constructor(){ 6 | this.id = -1; 7 | this.name = ""; 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/components/about/spec/aboutPage.spec.tsx: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import * as React from 'react'; 3 | import { shallow } from 'enzyme'; 4 | import { Link } from 'react-router'; 5 | import AboutPage from '../aboutPage'; 6 | 7 | describe('AboutPage presentational component', () =>{ 8 | it('should renders an h2 element with text "About Page"', () => { 9 | let aboutPageWrapper = shallow(); 10 | 11 | expect(aboutPageWrapper.find('h2')).to.be.exist; 12 | expect(aboutPageWrapper.find('h2').text()).to.be.equals('About Page'); 13 | }); 14 | }) 15 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/components/common/spinner.container.tsx: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { httpInitializeDispatcher } from '../../actions/httpInitializeDispatcher'; 3 | import Spinner from './spinner'; 4 | 5 | let mapStateToProps = (state) => { 6 | return { 7 | showSpinner: state.http.httpCallsInProgress 8 | } 9 | } 10 | 11 | let mapDispatchToProps = (dispatch) => { 12 | return { 13 | initializeHttp: () => {return dispatch(httpInitializeDispatcher(dispatch))} 14 | } 15 | } 16 | 17 | let SpinnerContainer = connect( 18 | mapStateToProps, 19 | mapDispatchToProps 20 | )(Spinner) 21 | 22 | export default SpinnerContainer; 23 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/components/repos/repoRow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import RepoEntity from '../../api/repoEntity'; 3 | 4 | interface Props extends React.Props{ 5 | repo : RepoEntity; 6 | } 7 | 8 | export default class RepoRow extends React.Component { 9 | constructor(props: Props){ 10 | super(props); 11 | } 12 | 13 | public render() { 14 | return ( 15 | 16 | 17 | {this.props.repo.id} 18 | 19 | 20 | {this.props.repo.name} 21 | 22 | 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/images/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/17 ReactHotLoader/src/images/spinner.gif -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/reducers/membersReducer.ts: -------------------------------------------------------------------------------- 1 | import MemberEntity from "../api/memberEntity"; 2 | import MemberAPI from "../api/memberAPI"; 3 | 4 | // Just to show how combine reducers work, we have 5 | // divided into two reducers member load + member load/update/delete 6 | export default (state : Array = [], action) => { 7 | switch (action.type) { 8 | case 'MEMBERS_ASSIGN': 9 | return [...action.members]; 10 | 11 | default: 12 | return state; 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/reducers/reposReducer.ts: -------------------------------------------------------------------------------- 1 | import RepoEntity from '../api/repoEntity'; 2 | 3 | export default (state: Array = [], action) => { 4 | switch (action.type){ 5 | case 'REPOS_ASSIGN': 6 | return [...action.repos]; 7 | 8 | default: 9 | return state; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/src/validations/memberFormErrors.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class MemberErrors { 3 | id: string; 4 | login: string; 5 | avatar_url: string; 6 | 7 | isEntityValid : boolean; 8 | 9 | public constructor() { 10 | this.id = ""; 11 | this.login = ""; 12 | this.avatar_url = ""; 13 | 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /old_class_components_samples/17 ReactHotLoader/test/test_index.js: -------------------------------------------------------------------------------- 1 | // require all modules ending in ".spec" from the 2 | // current directory and all subdirectories 3 | 4 | var testsContext = require.context("../src", true, /.spec$/); 5 | testsContext.keys().forEach(testsContext); 6 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Header } from './components'; 3 | 4 | export const App: React.StatelessComponent<{}> = (props) => { 5 | return ( 6 |
7 |
8 | {props.children} 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ] 14 | }, 15 | }; 16 | 17 | export const memberFormValidation = createFormValidation(validationConstraints); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/components/member/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity, MemberErrors } from '../../model'; 3 | import { MemberForm } from './memberForm'; 4 | 5 | interface Props { 6 | member: MemberEntity; 7 | memberErrors: MemberErrors; 8 | onChange: (fieldName: string, value: string) => void; 9 | onSave: () => void; 10 | } 11 | 12 | export const MemberPage: React.StatelessComponent = (props) => { 13 | return ( 14 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/18 Hooks/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/18 Hooks/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/api/login/index.ts: -------------------------------------------------------------------------------- 1 | export { isValidLogin } from './login'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/api/login/login.ts: -------------------------------------------------------------------------------- 1 | import { LoginEntity } from "../../model"; 2 | 3 | export const isValidLogin = (loginInfo: LoginEntity): boolean => 4 | (loginInfo.login === 'admin' && loginInfo.password === 'test'); 5 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/api/member/mockData.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntity } from '../../model'; 2 | 3 | export const members: MemberEntity[] = 4 | [ 5 | { 6 | id: 1457912, 7 | login: "brauliodiez", 8 | avatar_url: "https://avatars.githubusercontent.com/u/1457912?v=3" 9 | }, 10 | { 11 | id: 4374977, 12 | login: "Nasdan", 13 | avatar_url: "https://avatars.githubusercontent.com/u/4374977?v=3" 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.StatelessComponent<{}> = (props) => { 4 | return ( 5 |
6 | {props.children} 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/common/components/form/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | interface Props { 4 | label: string; 5 | className: string; 6 | onClick: () => void; 7 | } 8 | 9 | export const Button: React.StatelessComponent = (props) => { 10 | 11 | return ( 12 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/common/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input'; 2 | export * from './button'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/common/components/notification/index.ts: -------------------------------------------------------------------------------- 1 | export { NotificationComponent } from './notification'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header'; 2 | export * from './about'; 3 | export * from './members'; 4 | export * from './member'; 5 | export * from './login'; 6 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/login/index.ts: -------------------------------------------------------------------------------- 1 | export { Login } from './loginPage'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/login/loginForm.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from "@material-ui/core/styles"; 2 | 3 | export default (theme: Theme) => createStyles({ 4 | '@global': { 5 | 'body, html, #root': { 6 | margin: 0, 7 | padding: 0, 8 | width: '100%', 9 | } 10 | }, 11 | container: { 12 | display: 'flex', 13 | flexDirection: 'column', 14 | justifyContent: 'center', 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/member/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pageContainer'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/member/memberFormValidation.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Validators, ValidationConstraints, createFormValidation 3 | } from 'lc-form-validation'; 4 | 5 | const validationConstraints: ValidationConstraints = { 6 | fields: { 7 | login: [ 8 | { validator: Validators.required }, 9 | { 10 | validator: Validators.minLength, 11 | customParams: { length: 3 }, 12 | }, 13 | ] 14 | }, 15 | }; 16 | 17 | export const memberFormValidation = createFormValidation(validationConstraints); 18 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/member/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { MemberEntity, MemberErrors } from '../../model'; 3 | import { MemberForm } from './memberForm'; 4 | 5 | interface Props { 6 | member: MemberEntity; 7 | memberErrors: MemberErrors; 8 | onChange: (fieldName: string, value: string) => void; 9 | onSave: () => void; 10 | } 11 | 12 | export const MemberPage: React.StatelessComponent = (props) => { 13 | return ( 14 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/members/index.ts: -------------------------------------------------------------------------------- 1 | export * from './page'; 2 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/components/members/memberHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const MemberHeader: React.StatelessComponent<{}> = () => { 4 | return ( 5 | 6 | Avatar 7 | Id 8 | Name 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/images/lemoncode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/clever-web/react-typescript-samples/fc77a646bb5266b4e306ad14a0c7a936c980ec8e/old_class_components_samples/19 LoginForm/src/images/lemoncode.png -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { AppRouter } from './router'; 4 | 5 | ReactDOM.render( 6 | 7 | , document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/layout/appView.component.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { withStyles, WithStyles } from '@material-ui/core/styles'; 3 | import styles from './appView.styles'; 4 | import { Header } from '../components'; 5 | 6 | interface Props extends WithStyles { 7 | } 8 | 9 | const AppViewInner: React.StatelessComponent = (props) => ( 10 |
11 |
12 | {props.children} 13 |
14 | ); 15 | 16 | export const AppView = withStyles(styles)(AppViewInner); 17 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/layout/appView.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from "@material-ui/core/styles"; 2 | 3 | export default (theme: Theme) => createStyles({ 4 | '@global': { 5 | 'body, html, #root': { 6 | margin: 0, 7 | padding: 0, 8 | width: '100%', 9 | } 10 | }, 11 | container: { 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/layout/centeredView.component.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { withStyles, WithStyles } from '@material-ui/core/styles'; 3 | import styles from './centeredView.styles'; 4 | 5 | interface Props extends WithStyles { 6 | } 7 | 8 | const CenteredViewInner: React.StatelessComponent = (props) => ( 9 |
10 | {props.children} 11 |
12 | ); 13 | 14 | export const CenteredView = withStyles(styles)(CenteredViewInner); 15 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/layout/centeredView.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from "@material-ui/core/styles"; 2 | 3 | export default (theme: Theme) => createStyles({ 4 | '@global': { 5 | 'body, html, #root': { 6 | margin: 0, 7 | padding: 0, 8 | width: '100%', 9 | } 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | } 15 | }); 16 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/layout/index.ts: -------------------------------------------------------------------------------- 1 | export { CenteredView } from './centeredView.component'; 2 | export { AppView } from './appView.component'; 3 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './memberEntity'; 2 | export * from './memberErrors'; 3 | export * from './login'; 4 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/model/login.ts: -------------------------------------------------------------------------------- 1 | export interface LoginEntity { 2 | login: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): LoginEntity => ({ 7 | login: '', 8 | password: '', 9 | }); 10 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/model/memberEntity.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/src/model/memberErrors.ts: -------------------------------------------------------------------------------- 1 | import { FieldValidationResult } from 'lc-form-validation'; 2 | 3 | export interface MemberErrors { 4 | login: FieldValidationResult; 5 | } 6 | -------------------------------------------------------------------------------- /old_class_components_samples/19 LoginForm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "suppressImplicitAnyIndexErrors": true 12 | }, 13 | "compileOnSave": false, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } 18 | --------------------------------------------------------------------------------