Drone Market ReactJS Deployment Plans

07_Results_View

Component Structure

App
│───Header
└───Content
│   └───Breadcrumb
│   └───StatusDetail
│   │   └───StatusDetailHeader
│   │   └───StatusDetailInfo
│   │   │   └───StatusProjectInfo
│   │   │   └───StatusDetailMapRoute
│   │   └───DeployMissionParameters
│   │   │   └───OverallDronePerformance
│   │   │   └───DroneGraphPerformance
│   │   └───MissionGallery
│   │   │   └───MissionGalleryItem
│   │   │   └───MissionGalleryPagination
└───Footer

Recommended Libraries

PropTypes

-- StatusDetailInfo.jsx --
StatusDetailInfo.propTypes = {
  name: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  address: PropTypes.string.isRequired,
  contactname: PropTypes.string.isRequired,
  telephone: PropTypes.string.isRequired,
};

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

-- OverallDronePerformance.jsx --
OverallDronePerformance.propTypes = {
  speed: PropTypes.number.isRequired,
  easeofuse: PropTypes.number.isRequired,
  flightperformance: PropTypes.number.isRequired,
  cameraperformance: PropTypes.number.isRequired,
};

-- DroneGraphPerformance.jsx --
DroneGraphPerformance.propTypes = {
  time: PropTypes.string.isRequired,
  altitude: PropTypes.number.isRequired,
};

-- MissionGalleryItem.jsx --
MissionGalleryItem.propTypes = {
  photo: PropTypes.string.isRequired,
};