Collection of utils for coursework-helper
The repository contains a collection of utils for interacting with coursework-helper backend.
Usage
npm
npm install coursework-helper-ui
yarn
yarn add coursework-helper-ui
Components
RedirectWithTimeout
Redirects to the specified path after the specified timeout.
import {RedirectWithTimeout} from 'coursework-helper-ui';
const MyComponent = () => {
return (
<div>
{/* Redirect to "/dashboard" after 5 seconds */}
<RedirectWithTimeout to="/dashboard" timeoutSeconds={5} />
</div>
);
};
SignInButton
Sign in button for Github OAuth. The button uses useAuthentication hook internally.
import { SignInButton } from 'coursework-helper-ui';
const MyComponent = () => {
// Replace 'YOUR_CLIENT_ID' and 'YOUR_API_URL' with your actual values
const clientId = 'YOUR_CLIENT_ID';
const apiUrl = 'YOUR_API_URL';
// Optionally, you can define additional scopes for GitHub OAuth
const scopes = ['user', 'public_repo'];
return (
<div>
{/* Render the sign-in button with custom class names */}
<SignInButton
clientId={clientId}
apiUrl={apiUrl}
scopes={['user', 'read:org']}
classNames={{
signInButton: 'custom-sign-in-btn',
signOutButton: 'custom-sign-out-btn',
}}
/>
</div>
);
};
Hooks
useAuthentication
The useAuthentication
hook is a custom React hook that facilitates handling authentication for your application. It allows you to manage the user's authentication state, store authentication tokens in local storage, and perform the authentication process with an API.
This hook must also be present on /auth
page of your application. It will handle the authentication process and redirect the user back to the application.
import { useAuthentication } from 'coursework-helper-ui';
const MyComponent = () => {
const apiURL = 'YOUR_API_URL';
const { token, loading, error, isAuthenticated, signOut, redirectPath } = useAuthentication(apiURL);
return (
<div>
{loading ? <div>Loading...</div> : null}
{isAuthenticated ? (
<>
<div>Welcome, User!</div>
<button onClick={signOut}>Sign Out</button>
</>
) : (
<div>Please sign in</div>
)}
{error && <div>Error: {error}</div>}
</div>
);
};
useCloneMutation
The useCloneMutation
hook is a custom React hook that facilitates cloning issues from GitHub. It allows you to manage the cloning state and perform the cloning process with an API. It
import { useCloneMutation } from 'coursework-helper-ui';
const CloneButton = () => {
const apiURL = 'YOUR_API_URL';
const accessToken = 'YOUR_ACCESS_TOKEN';
const module = 'YOUR_MODULE_NAME'; // this is github repo name
const sprint = 'YOUR_SPRINT_NAME'; // Optional: Omit if not required
const issueNumber = 1234; // Optional: Omit if not required
const { loading, error, success, clone } = useCloneMutation(apiURL, accessToken, module, sprint, issueNumber);
return (
<div>
<button onClick={clone} disabled={loading}>
{loading ? 'Cloning...' : 'Clone Issue'}
</button>
{error && <div>Error: {error}</div>}
{success && <div>{success.total} issues cloned!</div>}
</div>
);
};
useIssues
The useIssues
hook is a custom React hook that facilitates fetching issues from GitHub. It allows you to manage the issues state and perform the fetching process with an API. It
import { useIssues } from 'coursework-helper-ui';
const YourComponent = () => {
const apiURL = ''; // Replace with your API base URL
const module = 'your-repo-name'; // Replace with the name of your module/repository
const { data, loading, error, reFetch } = useIssues(apiURL, module);
// Your component logic using the fetched data, loading, and error states
};
Functions
cloneIssue
This function is used to clone GitHub issues from a specified module/repository using the GitHub API. It allows cloning a specific issue or cloning all issues related to a sprint, if the sprint parameter is provided.
import { cloneIssue } from 'coursework-helper-ui';
const apiURL = "https://api.example.com";
const token = "YOUR_GITHUB_API_TOKEN";
const module = "example-module";
const issueNumber = 42;
const sprintName = "Sprint 1";
cloneIssue(apiURL, token, module, sprintName, issueNumber)
.then((data) => {
console.log("Successfully cloned issue:", data);
})
.catch((error) => {
console.error("Error cloning issue:", error.message);
});