methodbox
/ RocketApp.tsx
Last active
July 24, 2019 01:05
Get Started with TypeScript - Part 2 - Add a new State type
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from 'react'; | |
| import './styles.css'; | |
| // Rocket Info | |
| import { mission } from './data/rockets'; | |
| import 'bootstrap/dist/css/bootstrap.css'; | |
| // Create a State type below this line | |
| type State = {} | |
| export default class RocketApp extends React.Component<{}, {}> {...} |
methodbox
/ stateType.tsx
Last active
July 24, 2019 01:04
Get Started with TypeScript - Part 2 - New State type
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| type State = { | |
| appTitle: 'SpaceX Launches'; | |
| launchImg: ''; | |
| rocketName: ''; | |
| missionName: ''; | |
| missionLogo: ''; | |
| missionDetails: ''; | |
| missionSuccess: false; | |
| flightNumber: 0; | |
| missionId: ''; |
methodbox
/ stateType.tsx
Last active
July 24, 2019 01:04
Get Started with TypeScript - Part 2 - New State Type - Complete
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| type State = { | |
| appTitle: string; | |
| launchImg: string; | |
| rocketName: string; | |
| missionName: string; | |
| missionLogo: string; | |
| missionDetails: string; | |
| missionSuccess: boolean; | |
| flightNumber: number; | |
| missionId: string; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| type State = { | |
| appTitle: string; | |
| launchImg: string; | |
| rocketName: string; | |
| missionName: string; | |
| missionLogo: string; | |
| missionDetails: string; | |
| missionSuccess: boolean; | |
| flightNumber: number; | |
| missionId: string; |
methodbox
/ getNewMission.tsx
Created
July 24, 2019 01:07
Get Started with TypeScript - Part 2 - _getNewMission complete
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _getNewMission() { | |
| this.setState({ | |
| // Use this to change the state values when the button is clicked. | |
| appTitle: 'SpaceX Launches', | |
| launchImg: require('./assets/2013_-_9_falcon_9_ses_launch-4.jpg'), | |
| rocketName: '', | |
| missionName: '', | |
| missionLogo: require('./assets/mission-logo.png'), | |
| missionDetails: '', | |
| missionSuccess: false, |
methodbox
/ getNewMission.tsx
Last active
July 24, 2019 01:37
Get Started with TypeScript - Part 2 -
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _getNewRocket() { | |
| this.setState({ | |
| rocketName: mission.rocket.rocket_name, | |
| missionName: mission.mission_name, | |
| missionLogo: mission.links.mission_patch_small, | |
| launchImg: mission.links.flickr_images[Math.floor(Math.random() * 5)], | |
| missionDetails: mission.details, | |
| flightNumber: mission.flight_number, | |
| missionId: mission.mission_id, | |
| launchDate: new Date(mission.launch_date_unix * 1000).toDateString(), |
OlderNewer