View All Note(s)

[ndswimming92]

User Story - what the user should see and experience

• The home page displays a list of all notes.

• Each note card shows the Note Title, Note Category, and the time it was submitted.

Acceptance Criteria - illustrates the scope of the individual ticket

Example -

Dependencies -

Dev Notes - dev work that needs to be completed for this ticket

API Call

const getMembers = (uid) => new Promise((resolve, reject) => {
  fetch(`${endpoint}/member.json?orderBy="uid"&equalTo="${uid}"`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => response.json())
    .then((data) => resolve(Object.values(data)))
    .catch(reject);
});

Show All Function

function ShowMembers() {
  // TODO: Set a state for members
  const [members, setMembers] = useState([]);

  // TODO: Get user ID using useAuth Hook
  const { user } = useAuth();

  // TODO: create a function that makes the API call to get all the members
  const getAllTheMembers = () => {
    getMembers(user.uid).then(setMembers);
  };

  // TODO: make the call to the API to get all the members on component render
  useEffect(() => {
    getAllTheMembers();
  }, []);

  return (
    <div className="text-center my-4">
      <div className="d-flex flex-wrap">
        {/* TODO: map over members here using MemberCard component */}
        {members.map((member) => (
          <MemberCard key={member.firebaseKey} memberObj={member} onUpdate={getAllTheMembers} />
        ))}
      </div>
    </div>
  );
}

export default ShowMembers;