temp

Volunteer.tsx

import { useTransition, animated } from 'react-spring';
import React, { useEffect } from 'react';
import ContentLoader from 'react-content-loader';
import { useTranslation } from 'react-i18next';
import useSWR from 'swr';

type Volunteer = {
  name?: string;
  bio?: string;
  socials?: {
    twitter?: string;
    github?: string;
    linkedin?: string;
    instagram?: string;
  };
  image?: string;
};

const VolunteerCard: React.FC<{
  volunteer?: Volunteer;
  onClick?: () => void;
  style: any;
}> = ({ volunteer, onClick, style }) => {
  const [isLoaded, setIsLoaded] = React.useState(false);
  // console.log('❌', style.scale.);

  // not a good idea to use transition inside the component
  // as if component did not render it will be destroyed
  // so to make sure animation always runs we have to render component each time
  // this case we are not destroying the cards as we are not, this will show when the volunteers list is changed.
  // *********************************
  // if you put true or any constant value in the useTransition
  // this mean you are not changing the value of the variable
  // so transition will only run on the first render
  // as to re-render you have to change this value.
  // also transition-out will be impossible, as transition-out is just
  // when the value of the variable is changed,
  // previous component are rendered with transition-out then destroyed after completion which are stored under useRef
  // and the new component are rendered with transition-in
  // so basically the transition function should always be called.
  // if not transition-out will not work.
  // *********************************
  // in array-list it tricky as we have to render elements which are destroyed.
  // that's why there is functionality in react-spring to handle this.
  // const transitionCard = useTransition(true, {
  //   from: { scale: 0, transform: 'translate3d(0, -10px, 0)' },
  //   enter: { scale: 1, transform: 'translate3d(0, 0px, 0)' },
  //   leave: { scale: 0, transform: 'translate3d(0, -10px, 0)' },
  //   config: { mass: 1, tension: 100, friction: 150 },
  // });

  return (
    <animated.div
      className="volunteers__container__item"
      {...{ style }}
      {...{ onClick }}
    >
      <div className="volunteers__container__item__image">
        {/* {console.log('🔥')} */}
        {!isLoaded && (
          <ContentLoader
            backgroundColor="#888"
            foregroundColor="#888"
            backgroundOpacity={0.2}
            foregroundOpacity={0.4}
          >
            <rect x="0" y="0" rx="5" ry="5" width="75" height="75" />
          </ContentLoader>
        )}
        <img
          src={`https://volunteers.covid19india.org/images/${
            volunteer?.image ?? 'placeholder.jpg'
          }`}
          alt="img"
          onLoad={() => setIsLoaded(true)}
        />
      </div>
      <div className="volunteers__container__item__details">
        <h2 className="volunteer__name">{volunteer?.name}</h2>
        <p>{volunteer?.bio}</p>
        <div className="volunteers__container__item__details__socials">
          {volunteer?.socials?.twitter && (
            <a
              href={`${volunteer.socials.twitter}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <i className="fab fa-twitter">
                <span className="sr-only">Twitter</span>
              </i>
            </a>
          )}
        </div>
      </div>
    </animated.div>
  );
};

const Volunteers: React.FC = () => {
  // const { data: initialData } = useSWR<Volunteer[]>(
  //   'https://volunteers.covid19india.org/data.json',
  //   (link) => fetch(link).then((res) => res.json()),
  //   {
  //     revalidateOnMount: true,
  //   }
  // );

  const [data, setData] = React.useState<Volunteer[] | undefined>(undefined);

  useEffect(() => {
    fetch('https://volunteers.covid19india.org/data.json')
      .then((r) => r.json())
      .then((r) => setData(r));
    // .then((r) => setData([r[0]]));
  }, []);

  console.log('✔');
  // const [volunteers, setVolunteers] = React.useState<Volunteer[]>([]);
  // useEffect(() => {
  //   // only downloads the data when the component is mounted.
  //   // This causes a waterfall of requests to the server.
  //   // ii) if we fetch early we would be unessesaly fetching data. which could slow down the important data.
  //   // iii) we want to fetch only what we need, if multiple components
  //   // need data, we can fetch it once and then use it.
  //   // iv) make use of cache to dont load data multiple time.

  //   // reDownload on each mount.
  //   fetch('https://volunteers.covid19india.org/data.json')
  //     .then((d) => d.json())
  //     .then((d) => setVolunteers(d));
  //   console.log('⚡⏬ downloading volunteers');
  // }, []);
  // return <>{JSON.stringify(volunteers)}</>;

  // Animation loading and content loading
  const transitionCard = useTransition(data, {
    from: { scale: 0, transform: 'translate3d(0, -10px, 0)' },
    enter: { scale: 1, transform: 'translate3d(0, 0px, 0)' },
    leave: { scale: 0, transform: 'translate3d(0, -10px, 0)' },
    config: { mass: 1, tension: 100, friction: 150 },
  });
  return (
    <div className="volunteers">
      <p>
        We would like to thank the hundreds of volunteers who, for the last 18
        months, extended their time and effort towards collating and publishing
        COVID-19 data for India.
      </p>
      <button type="button" onClick={() => setData([])}>
        Remove All
      </button>
      <div className="volunteers__container">
        {transitionCard(
          (style, volunteer) =>
            // console.log('🔥', style.scale)  ||
            true ||
            (volunteer && (
              <>
                {/* {item?.map((volunteer) => ( */}
                <VolunteerCard
                  volunteer={volunteer}
                  key={volunteer.name}
                  onClick={() =>
                    setData((d) => d?.filter((v) => v.name !== volunteer.name))
                  }
                  style={style}
                />
                {/* {console.log('🔥')} */}

                {/* ))} */}

                {false && (
                  <div className="volunteers__container__item last">
                    <VolunteerCard style={style} />
                    <VolunteerCard style={style} />
                    <VolunteerCard
                      style={style}
                      volunteer={{ bio: 'And many more...' }}
                    />
                  </div>
                )}
              </>
            ))
        )}
      </div>
      {/* {JSON.stringify(data)} */}
    </div>
  );
};

export default Volunteers;