Skip to content
OverviewSolutions
19
Comments
145

Fazza Razaq Amiarso

@fazzaamiarsoIndonesia2,340 points

I love building stuff on the web. I focused on building websites that's inclusive for all users, so everyone can enjoy the website. I've worked as a Front-end Code Reviewer in an Indonesian Tech Education Company for 1+ year. I've also contributed to Indonesia's Ministry of Education

I’m currently learning...

Learning all about Frontend and currently focusing on Web Design with interactions.

Latest solutions

View more solutions

Latest comments

  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi @SoulRvr29! Great work on your project, the README is fantastic!

    You can use 1 state for this project. Example

    // `advice` become an object
const [advice, setAdvice] = useState({});

// then you can get the advice data
const adviceContent = advice.advice;
const adviceId = advice.id

  useEffect(() => {
    clickHandler();
  }, []);

  const clickHandler = () => {
    fetch("https://api.adviceslip.com/advice")
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          console.log("no data");
        }
      })

      .then((data) => {
        setAdvice(data.slip)
      })

      .catch((err) => {
        console.log("Something went wrong!", err);
      });
  };

    I hope it helps! Cheers!

    Marked as helpful
    1
  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi Sam! Great job on completing the project!

    I have a quick tip for you.

    The vote state is excessive because you can derive the Vote value from the cart's quantity. Here's how

    // `cart` is cartItems and `setCart` is setCartItems
const Vote = ({ cart, setCart }) => {
  function handlePlusClick() {
// increment the quantity directly
    setCart((prevCart) => ({ ...prevCart, quantity: prevCart.quantity + 1 }));
  }

  function handleMinusClick() {
    if (cart.quantity <= 0) return;
// decrement the quantity directly
    setCart((prevCart) => ({ ...prevCart, quantity: prevCart.quantity - 1 }));
  }

  return (
    <div className={styles.container_vote}>
      <button className={styles.vote_plus} onClick={handleMinusClick}>
        <img src="icon-minus.svg" alt="downvote" />
      </button>
      <p className={styles.vote_score}>{cart.quantity}</p>
      <button className={styles.vote_minus} onClick={handlePlusClick}>
        <img src="icon-plus.svg" alt="vote" />
      </button>
    </div>
  );
};

    I hope it helps you! Cheers!

    Marked as helpful
    0
  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi @Zy8712! Nice solution!

    Since you use Vercel to deploy your project, you can take a look at Vercel Serverless function to create a simple API endpoint which have access to Environment Variable. Documentation Reference.

    I also highly recommend you to use a bundler like Vite for your projects.

    I hope it helps! Cheers!

    0
  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi @outerpreneur!

    I think Tailwind doesn't have support for grid template area. If you really want to do it with template area, then you may have to resort to write custom CSS. Docs reference.

    Cheers!

    Marked as helpful
    0
  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi @MrDannie! It's awesome that you complete this complex project while learning a new framework!

    I just have a couple suggestions for you:

    • I noticed that you use react-hooks-global-state for Global State. I suggest to take a look at Jotai which do the same thing and same maintainer, but still active and maintained.
    • For some side-effects like inserting item into LocalStorage, it's better to first do it inside Event Handler, rather than useEffect that can be tricky to track. You can refer to this docs. For example in App.jsx
    // instead of this
useEffect(() => {
    localStorage.setItem("BoardData", JSON.stringify(boardData));
  }, [boardData]);

// do this
  const updateAppData = (data) => {
    setAppBoardData(data);
    // here, what trigger the side effect is immediately obvious
     localStorage.setItem("BoardData", JSON.stringify(data));
  };

    I hope it helps! Cheers!

    Marked as helpful
    0
  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi ! Nice Solution!

    I have some quick tips for you

    • For deleting item, you can use .filter to avoid array mutation.
    const handleDeleteItem = (itemToDelete) => {
    const updatedItems = selectedItems.filter(item => item !== itemToDelete)
    setSelectedItems(updatedItems);
    setFilterVisible(updatedItems.length !== 0)
  }
    • You can utilize spread operator to pass props to a component if the props is the same as the object. Example
    // instead of this
            <Jobs
              key={job.id}
              id={job.id}
              company={job.company}
              logo={job.logo}
              new={job.new}
              featured={job.featured}
              position={job.position}
              role={job.role}
              level={job.level}
              postedAt={job.postedAt}
              contract={job.contract}
              location={job.location}
              languages={job.languages}
              tools={job.tools}
              openFiltered={handleOpenFilter}

// more concise, with the tradeoff of must lookup `job` to know what you passing
<Jobs key={job.id}  {...job} openFiltered={handleOpenFilter} />

    I hope it helps! Cheers!

    Marked as helpful
    0
View more comments