Skip to content
This repository has been archived by the owner on May 25, 2023. It is now read-only.

Commit

Permalink
feat: Adds Repo suggestions to the onboarding flow (#1444)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chadstewart
chadstewart committed May 24, 2022
1 parent fc9c905 commit 507e047
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 20 deletions.
87 changes: 77 additions & 10 deletions src/components/CreateGoals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,28 @@ import {CreateGoalsContainer, OnBoardingText} from "../styles/Container";
import {Tooltip, TooltipTrigger} from "@radix-ui/react-tooltip";
import {TooltipContainer, TooltipArrowComponent} from "../styles/Tooltip";
import {capturePostHogAnalytics} from "../lib/analytics";
import RepositoryAvatar from "../styles/RepositoryAvatar";
import {diary} from "../illustrations";
import {help} from "../icons";
import { CreateGoalsRepoNav } from "../styles/Header";

const repoInfo = [
{
repoOwner: "open-sauced",
repoName: "open-sauced",
repoDescription: "This is a project to identify your next open source contribution."
},
{
repoOwner: "npm",
repoName: "cli",
repoDescription: "the package manager for JavaScript"
},
{
repoOwner: "tailwindlabs",
repoName: "tailwindcss",
repoDescription: "A utility-first CSS framework for rapid UI development."
},
];

function CreateApp() {
return (
Expand All @@ -33,7 +54,9 @@ function CreateApp() {
);
}

function CreateGoals({installNeeded, user, onRepoCreation}) {
function CreateGoals({installNeeded, databaseCreated, goalsId, onGoalAdded, user, onRepoCreation}) {
const [selectedRepo, setSelectedRepo] = useState(0);
const [repoAdded, setRepoAdded] = useState(false);
const [installReady, setInstallReady] = useState(installNeeded);
const _handleRepoCreation = () => {
capturePostHogAnalytics('Onboarding Flow', 'repoCreationBtn', 'clicked');
Expand Down Expand Up @@ -74,6 +97,19 @@ function CreateGoals({installNeeded, user, onRepoCreation}) {
});
};

const _handleGoalCreation = async( repoUrl ) => {
setRepoAdded(true);
api
.createGoal(goalsId, repoUrl, null)
.then(response => {
onGoalAdded(response.data.gitHub.createIssue.issue);
})
.catch(e => {
setRepoAdded(false);
console.error(e)
});
};

return (
<React.Fragment>
<ContextStyle>
Expand All @@ -82,24 +118,24 @@ function CreateGoals({installNeeded, user, onRepoCreation}) {
<CreateApp />
</SpaceBetween>
</SpaceBetweenTop>
<Cards disabled={installReady}>
<Cards disabled={installReady || databaseCreated}>
<SpaceBetween>
<OnBoardingText>
<h1>1</h1>
<p>Let's sync Open Sauced with your GitHub Repos</p>
</OnBoardingText>
<Button primary minWidth={175} maxWidth={175} onClick={_handleRepoCreation} disabled={installReady}>
<Button primary minWidth={175} maxWidth={175} onClick={_handleRepoCreation} disabled={installReady || databaseCreated}>
Sync Repos
</Button>
</SpaceBetween>
</Cards>
<Cards disabled={!installReady}>
<Cards disabled={!installReady || databaseCreated}>
<SpaceBetween>
<OnBoardingText>
<h1>2</h1>
<p>Now let's create the Open Sauced database on GitHub</p>
<Tooltip delayDuration={200}>
<TooltipTrigger asChild>
<TooltipTrigger asChild disabled={!installReady || databaseCreated}>
<IconButton>
<img className="svg" alt="tool-tip" src={help} />
</IconButton>
Expand All @@ -125,18 +161,49 @@ function CreateGoals({installNeeded, user, onRepoCreation}) {
</a>
</SpaceBetween>
</Cards>
{/* TODO: This is the beginning of the implementation to solve issue #1428 in open-sauced
https://github.com/open-sauced/open-sauced/issues/1428

<Cards disabled={true}>
<Cards disabled={!databaseCreated || repoAdded}>
<SpaceBetween>
<OnBoardingText>
<h1>3</h1>
<p>And finally, it's time to follow some repos</p>
</OnBoardingText>
<Button primary minWidth={175} disabled={true}>Add Repos</Button>
</SpaceBetween>
</Cards> */}
{databaseCreated && (
<>
<CreateGoalsRepoNav>
{
repoInfo.map((repo, index) =>
<Button key={`repoNav${index + 1}`} onClick={() => setSelectedRepo(index)}>
{`${repo.repoOwner} / ${repo.repoName}`}
</Button>
)}
</CreateGoalsRepoNav>
<SpaceBetweenTop>
<div>
<a style={{textDecoration: "none"}} href={`https://github.com/${repoInfo[selectedRepo].repoOwner}/${repoInfo[selectedRepo].repoName}`} rel="noreferrer" target="_blank">
<h1>
<RepositoryAvatar alt="avatar" src={`https://avatars.githubusercontent.com/${repoInfo[selectedRepo].repoOwner}`} />
{`${repoInfo[selectedRepo].repoOwner} / ${repoInfo[selectedRepo].repoName}`}
</h1>
</a>
<p>{repoInfo[selectedRepo].repoDescription}</p>
<small>
<em>
<a href="https://opensource.guide/how-to-contribute/" rel="noreferrer" target="_blank">
Learn how to contribute to open source projects
</a>
</em>
</small>
<div style={{ paddingTop: 30 }}>
<Button primary minWidth={175} disabled={repoAdded} onClick={() => _handleGoalCreation(`${repoInfo[selectedRepo].repoOwner}/${repoInfo[selectedRepo].repoName}`)}>{repoAdded ? "Repo added" : "Add Repo"}</Button>
</div>
</div>
<Illustration className="productive-developer" alt="Done checking add repo" src={diary} />
</SpaceBetweenTop>
</>
)}
</Cards>
</ContextStyle>
</React.Fragment>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/RepositoryGoals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function RepositoryGoals({user}) {

return (
<section>
{repository && repository.issues ? (
{repository && repository.issues.totalCount > 0 ? (
<React.Fragment>
<Flex>
<RepositoryContext>
Expand Down Expand Up @@ -109,7 +109,7 @@ function RepositoryGoals({user}) {
</Card>
</React.Fragment>
) : (
<CreateGoals installNeeded={!!repository && !!error} user={(user && user) || ""} onRepoCreation={onRepoCreation} />
<CreateGoals installNeeded={!!repository && !!error} databaseCreated={!!(repository && repository.issues)} goalsId={goalsId} onGoalAdded={onGoalAdded} user={(user && user) || ""} onRepoCreation={onRepoCreation} />
)}
</section>
);
Expand Down
18 changes: 18 additions & 0 deletions src/styles/Header/CreateGoalsRepoNav.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import styled from "styled-components";
import MEDIA from "../mediaTemplates";

const Container = styled.nav`
display: flex;
flex-direction: row;
${MEDIA.TABLET`
display: block;
padding-bottom: 10px;
`};
* {
padding-right: 10px;
}
`;

export default Container;
2 changes: 2 additions & 0 deletions src/styles/Header/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from "styled-components";
import Heading from "./Heading";
import HomeNav from "./HomeNav";
import CreateGoalsRepoNav from "./CreateGoalsRepoNav";
import AdminNav from "./AdminNav";
import SimpleHeader from "./SimpleHeader";
import SubHeading from "./SubHeading";
Expand All @@ -24,6 +25,7 @@ export {
SubHeading,
HomeNav,
SimpleHeader,
CreateGoalsRepoNav,
PizzaPosition,
Wrapper,
};
73 changes: 65 additions & 8 deletions stories/8-Onboarding.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,32 @@ import {Tooltip, TooltipTrigger} from "@radix-ui/react-tooltip";
import {TooltipContainer, TooltipArrowComponent} from "../src/styles/Tooltip";
import {help} from "../src/icons";
import {appInstall} from "../src/images";
import { CreateGoalsRepoNav } from "../src/styles/Header";
import RepositoryAvatar from "../src/styles/RepositoryAvatar";
import {diary} from "../src/illustrations";

export default {
title: "Onboardring"
};

const repoInfo = [
{
repoOwner: "open-sauced",
repoName: "open-sauced",
repoDescription: "This is a project to identify your next open source contribution."
},
{
repoOwner: "npm",
repoName: "cli",
repoDescription: "the package manager for JavaScript"
},
{
repoOwner: "tailwindlabs",
repoName: "tailwindcss",
repoDescription: "A utility-first CSS framework for rapid UI development."
},
];

function CreateApp() {
return (
<>
Expand All @@ -35,10 +56,15 @@ function CreateApp() {
}

export function OnboardingFlow() {
const [selectedRepo, setSelectedRepo] = useState(0);
const [installReady, setInstallReady] = useState(false);
const [databaseCreated, setDatabaseCreated] = useState(false);
const _handleRepoCreation = () => {
setInstallReady(prevState => true);
};
const _handleDatabaseCreation = () => {
setDatabaseCreated(prevState => true);
};

return (
<React.Fragment>
Expand All @@ -48,7 +74,7 @@ function CreateApp() {
<CreateApp />
</SpaceBetween>
</SpaceBetweenTop>
<Cards disabled={installReady}>
<Cards disabled={installReady || databaseCreated}>
<SpaceBetween>
<OnBoardingText>
<h1>1</h1>
Expand All @@ -59,7 +85,7 @@ function CreateApp() {
</Button>
</SpaceBetween>
</Cards>
<Cards disabled={!installReady}>
<Cards disabled={!installReady || databaseCreated}>
<SpaceBetween>
<OnBoardingText>
<h1>2</h1>
Expand All @@ -80,21 +106,52 @@ function CreateApp() {
<a
rel="noreferrer"
target="_blank">
<Button primary minWidth={175} maxWidth={175} disabled={!installReady}>Create database</Button>
<Button primary minWidth={175} maxWidth={175} disabled={!installReady} onClick={_handleDatabaseCreation}>Create database</Button>
</a>
</SpaceBetween>
</Cards>
{/* TODO: issue #1428
<Cards disabled={true}>
<Cards disabled={!databaseCreated}>
<SpaceBetween>
<OnBoardingText>
<h1>3</h1>
<p>And finally, it's time to follow some repos</p>
</OnBoardingText>
<Button primary minWidth={175} disabled={true}>Add Repos</Button>
</SpaceBetween>
</Cards> */}
{databaseCreated && (
<>
<CreateGoalsRepoNav>
{
repoInfo.map((repo, index) =>
<Button key={`repoNav${index + 1}`} onClick={() => setSelectedRepo(index)}>
{`${repo.repoOwner}/${repo.repoName}`}
</Button>
)}
</CreateGoalsRepoNav>
<SpaceBetweenTop>
<div>
<a style={{textDecoration: "none"}} href={`https://github.com/${repoInfo[selectedRepo].repoOwner}/${repoInfo[selectedRepo].repoName}`} rel="noreferrer" target="_blank">
<h1>
<RepositoryAvatar alt="avatar" src={`https://avatars.githubusercontent.com/${repoInfo[selectedRepo].repoOwner}`} />
{`${repoInfo[selectedRepo].repoOwner} / ${repoInfo[selectedRepo].repoName}`}
</h1>
</a>
<p>{repoInfo[selectedRepo].repoDescription}</p>
<small>
<em>
<a href="https://opensource.guide/how-to-contribute/" rel="noreferrer" target="_blank">
Learn how to contribute to open source projects
</a>
</em>
</small>
<div style={{ paddingTop: 30 }}>
<Button primary minWidth={175} >Add Repo"</Button>
</div>
</div>
<Illustration className="productive-developer" alt="productive developer image" src={diary} />
</SpaceBetweenTop>
</>
)}
</Cards>
</ContextStyle>
</React.Fragment>
);
Expand Down

0 comments on commit 507e047

Please sign in to comment.