Drone Market ReactJS Deployment Plans

06_Request_Status_Detail

Component Structure

App
│───Header
└───Content
│   └───Breadcrumb
│   └───StatusDetail
│   │   └───StatusDetailHeader
│   │   └───StatusDetailInfo
│   │   └───StatusDetailMap
│   │   │   └───StatusDetailMapRoute
│   │   │   │   └───DroneRoutes
│   │   │   │   └───DroneLocationsLegends
│   │   │   │   └───DroneLocationsETA
│   │   │   └───StatusDetailFrontCamera
│   │   │   └───StatusDetailBackCamera
│   └───MissionGallery
└───Footer

PropTypes

-- StatusDetailInfo.jsx --
StatusDetailInfo.propTypes = {
  timeoflaunch: PropTypes.date.isRequired,
  timecompleted: PropTypes.date.isRequired,
  speed: PropTypes.number.isRequired,
  distance: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
};

-- StatusDetailMapRoute.jsx --
StatusDetailMapRoute.propTypes = {
  routes: PropTypes.string.isRequired,
  dronelocation: PropTypes.string.isRequired,
  eta: PropTypes.string.isRequired,
};