/endorsements-react-vite-pwa-firebase

Primary LanguageTypeScriptMIT LicenseMIT


We are the Champions

My solo project - We are the Champions (from The Frontend Developer Career Path of Scrimba)
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Roadmap
  4. Issues and solutions
  5. License
  6. Contact
  7. Acknowledgments

About The Project

My solo project - We are the Champions.

(back to top)

Built With

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

Install packages

yarn

Launch at localhost in development mode

yarn dev

(back to top)

Roadmap

  • Setup and ESLint, Prettier, Husky
  • Setup UnoCSS
  • Setup Font Awesome
  • Setup Firebase
  • Form to input fields
  • Like feature (same card can only be liked by the same person for one time, same person can like many cards)
  • Reverse cards order by created Date time (latest created card should be on the top)
  • Setup and config PWA
  • Refactor
    • Manage firebase related files
    • Lazy load cards on scrolling to view
    • Firebase helpers
    • Cache static components

See the open issues for a full list of proposed features (and known issues).

(back to top)

Issues and solutions

Incorrect data type when setting data array using snapshot.val() from onValue function of firebase

Solution

Extract childSnapshot from the snapshot object

const dataArray: EndorsementData[] = [];

snapshot.forEach(function (childSnapshot) {
    const item = childSnapshot.val();
    item.key = childSnapshot.key;

    dataArray.push(item);
});

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. When update state in onValue function of firebase

Solution

Wrap onValue in useEffect,

const [endorsementData, setEndorsementData] = useState<EndorsementData[]>([]);

...

useEffect(() => {
    return onValue(endorsementsRef, (snapshot) => {

      if (!snapshot.exists()) {
        console.log("Cannot find snapshot");
        return;
      }

      const dataArray: EndorsementData[] = [];

      snapshot.forEach(function (childSnapshot) {
        const item = childSnapshot.val();
        item.key = childSnapshot.key;

        dataArray.push(item);
      });

      setEndorsementData(dataArray);
    });
  }, []);

Push empty array to firebase become undefined value

Solution

push boolean instead, make field likedBy to be false when the array is empty

export type EndorsementData = {
    id: string;
    from: string;
    to: string;
    text: string;
    likedBy: string[] | boolean;
};

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Jen Chen

Project Link: https://github.com/yujhenchen/endorsements-react-vite-pwa-firebase

(back to top)

Acknowledgments

(back to top)