Drone Market ReactJS Deployment Plans

11_Mission_Progress

Component Structure

App
│───Header
└───Content
│   └───Breadcrumb
│   └───MissionProgressHeader
│   └───MissionProgress
│   │   └───MissionProgressDetail
│   │   └───MissionProgressContact
│   │   └───MissionProgressDroneDetails
│   │   └───MissionProgressDroneEstimation
│   │   └───StatusDetailMapRoute
│   │   │   └───DroneRoutes
│   │   │   └───DroneLocations
│   │   └───StatusDetailFrontCamera
│   │   └───StatusDetailBackCamera
│   └───MissionGallery
└───Footer

PropTypes

-- MissionProgressDetail.jsx --
MissionProgressDetail.propTypes = {
  type: PropTypes.string.isRequired,
  delivereditem: PropTypes.string.isRequired,
  weight: PropTypes.number.isRequired,
  deliverytime: PropTypes.date.isRequired,
  pickuplocation: PropTypes.string.isRequired,
  dropofflocation: PropTypes.string.isRequired,
  distance: PropTypes.number.isRequired,
  payout: PropTypes.number.isRequired,
};

-- MissionProgressContact.jsx --
MissionProgressContact.propTypes = {
  name: PropTypes.string.isRequired,
  address: PropTypes.string.isRequired,
  phone: PropTypes.number.isRequired,
  email: PropTypes.string.isRequired,
};

-- MissionProgressDroneDetails.jsx --
MissionProgressDroneDetails.propTypes = {
  serial: PropTypes.serial.isRequired,
  name: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  launch: PropTypes.date.isRequired,
  estimatedarrival: PropTypes.date.isRequired,
  speed: PropTypes.number.isRequired,
};

-- MissionProgressDroneEstimation.jsx --
MissionProgressDroneEstimation.propTypes = {
  timeoflaunch: PropTypes.string.isRequired,
  speed: PropTypes.number.isRequired,
  distance: PropTypes.number.isRequired,
  time: PropTypes.string.isRequired,
};

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