Sectors Read

[ToddSpainhour]

USER STORY

As a user, when the Planetary Sectors page loads, I should see many different cards with

AC

WHEN the page loads, I should see planetary sectors information displayed on the screen. THEN when I should be able to scroll down to scroll down to see more cards containing even more sectors. AND I should be able to return to the navbar and go to the other pages.

WIREFRAMES

DEV NOTES

---

1. create a folder called sectors
2. create a file inside it called sectors.js

3. in the sectors.js create a domString call sectorMaker()

   
   const sectorMaker = (sector) => {
   let domString = '';
   domString += '<div class="col-3">';
   domString += `<div class="card" id="${sector.id}">`;
   domString += `<img src="${sector.imageUrl}" class="card-img-top" alt="...">`;
   domString += '<div class="card-body">';
   domString += `<h5 class="card-title">This pin has been included on ${sector.boardId}</h5>`;
   domString += '<button class="btn btn-danger delete-pin" id="delete-sector-button">Delete Sector</button>'; 
   domString += '<button class="btn btn-primary" id="edit-sector-button">Edit Sector</button>';
   domString += '</div>';
   domString += '</div>';
   domString += '</div>';
   
   return domString;
   };

export default { sectorMaker };

1. Create a bootstrap card with an image, fields for name, occupied, and explored, and also buttons for edit and delete
1. create a click event for the `Edit` button with the class `edit-sector`
1. create a click event for the `Delete` button with the class `delete-sector`
1. create a click event for the `Add` button with the class `add-sector`

1. create a folder called `sectorArea`
1. inside that folder create a file called `sectorArea.js`
1. The purpose of this file to to store the `buildSector`, `editSector`, and `deleteSector` functions
1. import necessary components
1. the `buildSector` function will look like this...

const buildSectors = () => { sectorsData.getSectors() .then((sectors) => { let domString = ''; domString += '

Planetary Sectors

'; domString += '

'; sectors.forEach((sector) => { domString += sectorComponent.pinMaker(pin); (the first part will depend on import name) }); domString += '

'; utils.printToDom('print-sectors-here', domString); // eslint-disable-next-line no-use-before-define $('body').on('click', '#delete-sector-button', deleteSector); $('body').on('click', '#edit-sector-button', editSector);

})
.catch((err) => console.error('get sectors broke', err));

};

1. create a file called `sectorData.js` in the `data` folder
2. create a function called `getSectors`

const getSectors = () => new Promise((resolve, reject) => { axios.get(${baseUrl}/sectors.json) .then((response) => { const demSectors = response.data; const sectors = []; if (demCows) { Object.keys(demSectors).forEach((sectorId) => { demSectors[cowId].id = sectorId; cows.push(demSectorss[sectorId]); }); }

  resolve(sectors);
})
.catch((err) => reject(err));

});

## RELATED TICKETS
EX. #1