react-icons/go#GoStar JavaScript Examples

Footer = () => {
    return (
        <FooterContainer>
            <div>
                If you like this project then you can show some love by giving it a <GoStar /> :)
            </div>
            <div>
                <ProjectLink
                    href="https://github.com/khusharth/gitpedia/"
                    target='_blank'
                    rel='noopener noreferrer'>
                    khusharth/gitpedia
                </ProjectLink>
            </div>
        </FooterContainer>
    );
}

TimelineItem = ({ title, description, language, forks, size, stars, url }) => {
    return (
        <>
            <a
                href={url}
                target='_blank'
                rel='noopener noreferrer'>

                <ItemContainer>
                    <h1>
                        <span><GoRepo /></span> {title}
                    </h1>
                    <div>{description}</div>
                    <ItemFooter>
                        <div>
                            <FooterSpan available={language} ><GoPrimitiveDot /> {language}</FooterSpan>
                            <FooterSpan available><GoStar /> {stars}</FooterSpan>
                            <FooterSpan available><GoRepoForked /> {forks}</FooterSpan>
                        </div>
                        <div>{Number(size).toLocaleString()} Kb</div>
                    </ItemFooter>
                </ItemContainer>
            </a>
        </>
    );
}

Repo = ({ repo }) => {
  return(
    <div className='my-3 md:my-0 rounded bg-white p-4 hover:shadow-md'>
        <h3 className='font-bold hover:underline'><a href={'https://github.com/' + repo.full_name}>{repo.full_name}</a></h3>
        <p>Language: {repo.language} / <GoStar className='inline-block' /> Stars: {repo.stargazers_count}</p>
    </div>
  )
}

Activities = ({ activityData }) => {
    const extractActivity = () => {
        const message = activityData.map((activity) => {
            let icon = "";
            let action = "";
            let actionPerformed; // For Pull req
            let repoName = activity.repo.name;
            let time = new Date(activity.created_at)
                .toDateString()
                .split(" ")
                .slice(1)
                .join(" ");

            switch (activity.type) {
                case "CommitCommentEvent":
                    break;

                case "CreateEvent":
                    if (activity.payload.ref_type === "branch") {
                        icon = <GoGitBranch />;
                        action = `Created a branch ${activity.payload.ref} in `;
                    } else {
                        icon = <GoPlus />;
                        action = `Created a ${activity.payload.ref_type} in `;
                    }
                    break;

                case "DeleteEvent":
                    icon = <GoTrashcan />;
                    action = `Deleted a ${activity.payload.ref_type} ${activity.payload.ref} from `;
                    break;

                case "ForkEvent":
                    icon = <GoRepoForked />;
                    action = `Forked a repository ${repoName} to `;
                    repoName = activity.payload.forkee.full_name;
                    break;

                case "IssueCommentEvent":
                    icon = <GoComment />;
                    actionPerformed =
                        activity.payload.action.charAt(0).toUpperCase() +
                        activity.payload.action.slice(1);

                    action = `${actionPerformed} a comment on an issue in `;
                    break;

                case "IssuesEvent":
                    if (activity.payload.action === "closed") {
                        icon = <GoIssueClosed />;
                    } else {
                        icon = <GoIssueOpened />;
                    }
                    actionPerformed =
                        activity.payload.action.charAt(0).toUpperCase() +
                        activity.payload.action.slice(1);

                    action = `${actionPerformed} an issue in `;
                    break;

                case "PullRequestEvent":
                    if (activity.payload.action === "closed") {
                        icon = <GoTrashcan />;
                    } else {
                        icon = <GoRepoPull />;
                    }

                    actionPerformed =
                        activity.payload.action.charAt(0).toUpperCase() +
                        activity.payload.action.slice(1);

                    action = `${actionPerformed} a pull request in `;
                    break;

                case "PullRequestReviewCommentEvent":
                    icon = <GoComment />;
                    actionPerformed =
                        activity.payload.action.charAt(0).toUpperCase() +
                        activity.payload.action.slice(1);

                    action = `${actionPerformed} a comment on their pull request in `;
                    break;

                case "PushEvent":
                    icon = <GoRepoPush />;
                    let commit = "commit";
                    let branch = activity.payload.ref.slice(11);

                    if (activity.payload.size > 1) {
                        commit = "commits";
                    }

                    action = `Pushed ${activity.payload.size} ${commit} to ${branch} in `;
                    break;

                case "WatchEvent":
                    icon = <GoStar />;
                    action = "Starred the repository ";
                    break;

                case "ReleaseEvent":
                    icon = <GoBook />;
                    actionPerformed =
                        activity.payload.action.charAt(0).toUpperCase() +
                        activity.payload.action.slice(1);

                    action = `${actionPerformed} a release in `;
                    break;

                default:
                    action = "";
            }
            return { icon, action, repoName, time };
        });

        return message;
    };

    const buildActivityList = () => {
        const messages = extractActivity();

        if (messages.length !== 0) {
            return messages.map((message) => (
                <li>
                    <ActivitiesItem>
                        <ActivityDiv>
                            <span>
                                {message.icon} {message.action}
                            </span>
                            <a href={`https://github.com/${message.repoName}`}>
                                {message.repoName}
                            </a>
                        </ActivityDiv>
                        <TimeDiv>{message.time}</TimeDiv>
                    </ActivitiesItem>
                </li>
            ));
        } else {
            return (
                <li>
                    <ActivitiesItem>
                        <FlexContainer>
                            No recent activities found :(
                        </FlexContainer>
                    </ActivitiesItem>
                </li>
            );
        }

    };

    return (
        <>
            <ActivitiesContainer>
                <ul>{buildActivityList()}</ul>
            </ActivitiesContainer>
        </>
    );
}

Stats = ({ userData, repoData }) => {
    const [starData, setStarData] = useState({});
    const [sizeData, setSizeData] = useState({});
    const [totalStars, setTotalStars] = useState(null);

    useEffect(() => {
        const getMostStarredRepos = () => {
            const LIMIT = 5;
            const sortProperty = "stargazers_count";
            const mostStarredRepos = repoData
                .filter((repo) => !repo.fork)
                .sort((a, b) => b[sortProperty] - a[sortProperty])
                .slice(0, LIMIT);

            // Label and data needed for  displaying Charts
            const label = mostStarredRepos.map((repo) => repo.name);
            const data = mostStarredRepos.map((repo) => repo[sortProperty]);

            setStarData({ label, data });
        };

        const getTotalStars = () => {
            const myRepos = repoData
                .filter((repo) => !repo.fork)
                .map((repo) => repo.stargazers_count);
            const totalStars = myRepos.reduce((a, b) => a + b, 0);

            setTotalStars(totalStars);
        };

        const getMaxSizeRepos = () => {
            const LIMIT = 5;
            const sortProperty = "size";
            const mostStarredRepos = repoData
                .filter((repo) => !repo.fork)
                .sort((a, b) => b[sortProperty] - a[sortProperty])
                .slice(0, LIMIT);

            const label = mostStarredRepos.map((repo) => repo.name);
            const data = mostStarredRepos.map((repo) => repo[sortProperty]);

            setSizeData({ label, data });
        };

        if (repoData.length) {
            getMostStarredRepos();
            getMaxSizeRepos();
            getTotalStars();
        }
    }, [repoData]);

    return (
        <>
            <StatsContainer>
                <StatsDiv primary>
                    <div>
                        <GoRepo />
                        <IconSpan>Repositories</IconSpan>
                    </div>
                    <h2>{userData.public_repos}</h2>
                </StatsDiv>
                <StatsDiv secondary>
                    <div>
                        <GoStar />
                        <IconSpan>Total Stars</IconSpan>
                    </div>
                    <h2>{totalStars}</h2>
                </StatsDiv>
                <StatsDiv tertiary>
                    <div>
                        <GoOrganization />
                        <IconSpan>Followers</IconSpan>
                    </div>
                    <h2>{userData.followers}</h2>
                </StatsDiv>
                <StatsDiv quad>
                    <div>
                        <GoPerson />
                        <IconSpan>Following</IconSpan>
                    </div>
                    <h2>{userData.following}</h2>
                </StatsDiv>
            </StatsContainer>

            <RoundChartContainer>
                <ChartDiv chart1>
                    <ChartHeading>Largest in Size(kb)</ChartHeading>
                    <BarChart sizeData={sizeData} />
                </ChartDiv>
                <ChartDiv>
                    <ChartHeading>Top Languages</ChartHeading>
                    <DoughnutChart />
                </ChartDiv>
                <ChartDiv chart3>
                    <ChartHeading>Most Starred</ChartHeading>
                    <PieChart starData={starData} width={100} />
                </ChartDiv>
            </RoundChartContainer>
        </>
    );
}