profile home tab - PR cards

apiWrapper.tsx

@@ -54,6 +54,10 @@ const fetchUserPullRequests = async (accessToken: string, login: string) => {
               nameWithOwner
               description
             }
+            author {
+              login
+              avatarUrl
+            }
             createdAt
             mergedAt
             url

components/IamParticipating.tsx

@@ -107,7 +107,7 @@ const IamParticipating = (props: IamParticipatingType) => {
                   color={"gray.400"}
                   style={{ bottom: 0, position: "absolute" }}
                 >
-                  Powered by Hacktobered.com
+                  made with 💖 by hacktobered.com
                 </Text>
               </VStack>
             </Flex>

components/ProfileSections/MaintainerSection.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { OwnedReposSection } from "../OwnedRepos/OwnedReposSection";
-
 import { UserCardPropType } from "../../types/UserCardPropType";
 
 const MaintainerSection = (props: UserCardPropType) => {

components/PullRequests/ProfilePullRequestsSection/PRCheerCard.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  HStack,
+  Icon,
+  Image,
+  Link,
+  SimpleGrid,
+  Stack,
+  Text,
+  VStack,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { BiGitPullRequest } from "react-icons/bi";
+import { BsGithub } from "react-icons/bs";
+import { MdIosShare } from "react-icons/md";
+import { PullRequest } from "../../../types/PullRequest";
+import download from "downloadjs";
+import { toPng } from "html-to-image";
+import { useRef } from "react";
+
+const PRCheerCard = (props: PullRequest) => {
+  const [poweredBy, setPoweredBy] = React.useState("none");
+  const domEl = useRef<HTMLDivElement>(null);
+  const pull = props;
+
+  const downloadPNG = () => {
+    setPoweredBy("normal");
+    if (domEl.current) {
+      toPng(domEl.current).then(function (dataUrl) {
+        download(dataUrl, "my-node.png");
+        setPoweredBy("none");
+      });
+    }
+  };
+  let boxBg = useColorModeValue("white !important", "#111c44 !important");
+  let mainText = useColorModeValue("gray.800", "white");
+  let secondaryText = useColorModeValue("gray.400", "gray.400");
+
+  return (
+    <Box>
+      <VStack mx={"auto"} alignItems={"center"}>
+        <Flex
+          id="domEl"
+          ref={domEl}
+          direction="column"
+          alignItems="center"
+          rounded="md"
+          position="relative"
+          bg={useColorModeValue("white", "gray.700")}
+          shadow={{ md: "base" }}
+        >
+          <Flex bg={boxBg} alignItems="center" direction="column">
+            <Image
+              src="https://i.ibb.co/xmP2pS6/Profile.png"
+              alt="Graded pic"
+              borderRadius="20px"
+              width="100%"
+            />
+            <Flex flexDirection="column" mb="30px">
+              <Image
+                src={pull.author?.avatarUrl}
+                alt={pull.author?.login}
+                border="5px solid red"
+                mx="auto"
+                borderColor={boxBg}
+                width="128px"
+                height="128px"
+                mt="-38px"
+                borderRadius="50%"
+              />
+
+              <Text
+                color={secondaryText}
+                textAlign="center"
+                fontSize="sm"
+                fontWeight="500"
+              >
+                {pull.author?.login}
+              </Text>
+              <Text
+                fontWeight="600"
+                color={mainText}
+                textAlign="center"
+                fontSize="xl"
+              >
+                {" "}
+                Yay! I made an open source contribution.
+              </Text>
+            </Flex>
+          </Flex>
+          <Flex direction="column" bg={boxBg} px={5}>
+            <HStack py="6px">
+              <Text color="muted">
+                <Icon as={BsGithub} color="blue.500" mr={2} />
+              </Text>
+              <Text color="muted">{pull.repository?.nameWithOwner}</Text>
+            </HStack>
+            <HStack py="6px">
+              <Text color="muted">
+                <Icon as={BiGitPullRequest} color="blue.500" mr={2} />
+              </Text>
+              <Text color="muted">{pull.title}</Text>
+            </HStack>
+
+            <Text pt="24px" fontSize="lg" textAlign="center" fontWeight="bold">
+              #HacktoberFest2022
+            </Text>
+
+            <Box alignSelf={"center"} display={"flex"} fontSize="sm" mt={"10"}>
+              <Text fontSize="8px" pt={4} color={"gray.400"}>
+                made with 💖 by hacktobered.com
+              </Text>
+            </Box>
+          </Flex>
+        </Flex>
+        <Button
+          as="a"
+          leftIcon={<MdIosShare fontWeight={"bold"} />}
+          colorScheme="teal"
+          variant="solid"
+          onClick={() => downloadPNG()}
+        >
+          Share
+        </Button>
+      </VStack>
+    </Box>
+  );
+};
+
+export default PRCheerCard;

components/PullRequests/ProfilePullRequestsSection/index.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import {
+  Box,
+  Divider,
+  Heading,
+  SimpleGrid,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { Card } from "../../common/Card";
+import PRCheerCard from "./PRCheerCard";
+import { SearchResults } from "../../../types/SearchResults";
+import { UserCardPropType } from "../../../types/UserCardPropType";
+import { apiWrapper } from "../../../apiWrapper";
+import { useSession } from "next-auth/react";
+
+export const ProfilePullRequestsSection = (props: UserCardPropType) => {
+  const [searchData, setSearchData] = useState<SearchResults>();
+  const { data: session, status } = useSession();
+
+  async function fetchPR(accessToken: any, login: string) {
+    const pullData = await apiWrapper.fetchUserPullRequests(accessToken, login);
+    if (pullData) {
+      setSearchData({
+        issueCount: pullData.issueCount,
+        edges: pullData.edges,
+      });
+    }
+  }
+  useEffect(() => {
+    if (session) {
+      fetchPR(session.accessToken, props.user.login);
+    }
+  }, [session, props.user.login]);
+
+  return (
+    <>
+      {!!searchData?.issueCount && (
+        <>
+          <Divider py={4} />
+          <Text mt={8} fontWeight={"400"}>
+            🎉🎉🎉 {searchData?.issueCount} public Pull Requests found
+          </Text>
+        </>
+      )}
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing="8">
+        {searchData?.edges &&
+          searchData?.edges.map((pullRequest) => (
+            <Box
+              key={pullRequest.node.number}
+              maxW="4xl"
+              bg={"white"}
+              {...props}
+              mt={8}
+            >
+              <PRCheerCard {...pullRequest.node} />
+            </Box>
+          ))}
+      </SimpleGrid>
+    </>
+  );
+};

components/PullRequests/PullRequestDetailCards/CheerCard.tsx

@@ -50,8 +50,8 @@ const CheerCard = (props: PullRequest) => {
         />
         <Flex flexDirection="column" mb="30px">
           <Image
-            src={pull.author.avatarUrl}
-            alt={pull.author.login}
+            src={pull.author?.avatarUrl}
+            alt={pull.author?.login}
             border="5px solid red"
             mx="auto"
             borderColor={boxBg}
@@ -67,7 +67,7 @@ const CheerCard = (props: PullRequest) => {
             fontSize="sm"
             fontWeight="500"
           >
-            {pull.author.login}
+            {pull.author?.login}
           </Text>
           <Text
             fontWeight="600"
@@ -112,8 +112,8 @@ const CheerCard = (props: PullRequest) => {
           </Button>
         </Flex>
         <Box alignSelf={"center"} display={"flex"} fontSize="sm" mt={"10"}>
-          <Text mr={"1"}>made with</Text> 
-          <BsHeartFill fontSize="sm" color={"#DC143C"}/> 
+          <Text mr={"1"}>made with</Text>
+          <BsHeartFill fontSize="sm" color={"#DC143C"} />
           <Text ml={"1"}>by hacktobered</Text>
         </Box>
       </Flex>

pages/profile.tsx

@@ -25,6 +25,7 @@ import IamParticipating from "../components/IamParticipating";
 import { LoginComponent } from "../components/LoginComponent";
 import { NavBar } from "../components/NavBar";
 import type { NextPage } from "next";
+import { ProfilePullRequestsSection } from "../components/PullRequests/ProfilePullRequestsSection";
 import { UserDetails } from "../types/UserDetails";
 import { apiWrapper } from "../apiWrapper";
 
@@ -79,6 +80,7 @@ const Profile: NextPage = () => {
                           completionStatus={completionStatus}
                           user={userDetails}
                         />
+                        <ProfilePullRequestsSection user={userDetails} />
                         <HacktoberFestSection />
                       </TabPanel>
                       <TabPanel>