Pinflux

Pinflux is a Pinterest clone. Pinflux is a platform that enables users to explore and share various pins by creating personalized boards. Similar to Pinterest, it serves as a hub for people to find inspiration and connect with others.

Technologies

Site Views

Main Page

Create Pin

Follow Modal

Setting Page

Code Snippets

The solution makes use of FormData to create pins with images using AWS and Redux. A loading page is used, along with chained actions in the dispatch function and useHistory, to provide a smooth user experience. This approach allows pins to be displayed instantly after they are created successfully.

# createpin.jsx

 const handleSubmit = (e)=>{
        e.preventDefault();
        
        setLoading(true)
        const formData = new FormData();
        formData.append('pin[title]', title);
        formData.append('pin[body]', body);
        formData.append('pin[alt_text]', alttext);
        formData.append('pin[destination_link]', deslink);
        formData.append('pin[author_id]', sessionUser.id);
        formData.append('pin[image]', imgfile);
       
        dispatch(createPin(formData)).then(() => {
            setLoading(false)
        }).then(() => {
            history.push('/')
        })
        
        
    }

Utilizing custom hooks for fetching data to improve readability and reuseablility of components, and allows components to automatically re-render when the fetched data changes. Additionally, using useMemo to cache rendering pins, optimizing performance by avoiding unnecessary recalculations of revpins array when the dependencies (pins and boardpins) haven't changed.

#useFetchPins.js

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchPins } from '../store/pins';
export const useFetchPins = (setLoadingPins) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPins()).then(() => {
        setLoadingPins(false);
    });
  }, [dispatch]);
};


#renderPins.jsx

export default function PinIndex({ boardpins, HaveNav = true }){
  const [loadingPins, setLoadingPins] = useState(true);

  useFetchPins(setLoadingPins);//using custom hook to fetch pins

  const pins = useSelector(getPins);

  const revpins = useMemo(() => {//using memo to avoid unnecessary calculation when pins and boardpins are not changed
    if (!boardpins) {//reverse the pins so that the newest pin is on the top
      return pins.slice().reverse();//using slice to avoid mutating the original array
    } else {
      return boardpins.slice().reverse();
    }
  }, [pins, boardpins]);
}

  #showBoard.jsx

  export default function ShowBoard({ userId }) {
  const { id } = useParams();
  const [loadingPins, setLoadingPins] = useState(true);
  const [loadingBoard, setLoadingBoard] = useState(true);

  useFetchPins(setLoadingPins);//reusing useFetchPins here
  useFetchBoard({ id, setLoadingBoard });
  }