Skip to content

new feature ⚡ useGitHubFolderDownload #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 29 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# GitHub Folder Tree 🌲

**github-folder-tree** is a React custom hook that allows you to fetch and process the contents of a GitHub folder. It retrieves information about the files and subfolders in the specified folder, including their names, file types, download URLs, SHA hashes, sizes, and paths.
**github-folder-tree** is a React custom hook that allows you to fetch and process the contents of a GitHub folder. It retrieves information about the files and subfolders in the specified folder, including their names, file types, download URLs, SHA hashes, sizes, and paths. In addition, it provides the functionality to download the contents of the folder as a ZIP file and access repository information.

## Installation ⬇️

Expand All @@ -25,29 +25,39 @@ import {useGitHubFolderTree} from 'github-folder-tree';
**repositoryUrl** is the URL of the GitHub repository, and **apiKey** is an optional GitHub API key for authentication.

```jsx
const { repoFiles, error, log, fetchRepositoryContents } = useGitHubFolderTree(repositoryUrl, apiKey);
const { repoFiles, error, log, fetchRepositoryContents, useGitHubFolderDownload, repoInfo } = useGitHubFolderTree(folderUrl, apiKey);
```

### Example

```javascript
import { useState } from 'react';
import {useGitHubFolderTree} from 'github-folder-tree';
import React, { FC, useState } from 'react';
import useGitHubFolderTree from './hooks/useGitHubFolderTree';

const MyComponent = () => {
const [repositoryUrl, setRepositoryUrl] = useState('');
const [folderUrl, setFolderUrl] = useState('');
const [apiKey, setApiKey] = useState('');
const { repoFiles, error, log, fetchRepositoryContents } = useGitHubFolderTree(repositoryUrl, apiKey);
const { repoFiles, error, log, fetchRepositoryContents, useGitHubFolderDownload, repoInfo } = useGitHubFolderTree(folderUrl, apiKey);

const handleFetchClick = () => {
fetchRepositoryContents();
};

const handleDownloadClick = () => {
useGitHubFolderDownload();
};

if (repoFiles.length > 0) {
console.log(repoFiles);
console.log(repoInfo);
}

return (
<div>
<input type="text" value={repositoryUrl} onChange={(e) => setRepositoryUrl(e.target.value)} placeholder="Enter GitHub repository URL" />
<input type="text" value={folderUrl} onChange={(e) => setFolderUrl(e.target.value)} placeholder="Enter GitHub folder URL" />
<input type="text" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="Enter GitHub API key (optional)" />
<button onClick={handleFetchClick}>Fetch Folder Contents</button>
<button onClick={handleDownloadClick}>Download Folder as ZIP</button>
{error && <div>Error: {error}</div>}
{log && <div>Log: {log}</div>}
<table>
Expand Down Expand Up @@ -77,7 +87,11 @@ const MyComponent = () => {
export default MyComponent;
```

In the above example, **repositoryUrl** is the URL of the GitHub repository, and **apiKey** is an optional GitHub API key for authentication.
In the above example, **folderUrl** is the URL of the GitHub folder, and **apiKey** is an optional GitHub API key for authentication.

To fetch the contents of a GitHub folder, enter the folder URL in the input field and click **Fetch Folder Contents**. The files and their details will be displayed in a table. Any errors or log messages will be shown accordingly.

To download the folder as a ZIP file, click the **Download Folder as ZIP** button. The ZIP file will be generated and downloaded.

To fetch the contents of the root folder of a repository, use the repository URL in the following format:

Expand Down Expand Up @@ -109,14 +123,14 @@ Note: Make sure to handle any errors and display them appropriately in your Reac

#### X-Ratelimit-Limit: 60

<img src="https://github.com/sauravhathi/github-folder-tree/assets/61316762/a0896f79-da0e-43af-a7db-230ad27fa5a4" alt="image" width="500px" height="auto" />
<img src="https://github.com/sauravhathi/github-folder-tree/assets/61316762/de10a672-ef74-4388-837d-d165368ec640" alt="image" width="500px" height="auto" />

#### API rate limit exceeded
<img src="https://github.com/sauravhathi/github-folder-tree/assets/61316762/6193d3e7-978c-4c66-b54d-26bf582c2cdb" alt="image" width="500px" height="auto" />
<img src="https://github.com/sauravhathi/github-folder-tree/assets/61316762/5dcd4868-8e2e-4b10-8fd9-a8af788f412d" alt="image" width="500px" height="auto" />

#### Using Github API Key(Personal access tokens) - X-Ratelimit-Limit: 5000

<img src="https://github.com/sauravhathi/github-folder-tree/assets/61316762/38c7453c-b920-446e-90e3-9f41bd7df542" alt="image" width="500px" height="auto" />
<img src="https://github.com/sauravhathi/github-folder-tree/assets/61316762/db552e41-c41d-44b7-b010-4e24a86a6388" alt="image" width="500px" height="auto" />

## Hook Reference 📚

Expand All @@ -128,6 +142,9 @@ The **useGitHubFolderTree** hook returns the following values:
| **error** | **string** | An error message if an error occurred during the fetch. |
| **log** | **string** | Log messages for tracking progress and debugging. |
| **fetchRepositoryContents** | **function** | A function that fetches the contents of the specified GitHub folder. |
| **useGitHubFolderDownload** | **function** | A function that downloads the contents of the specified GitHub folder as a ZIP file. |
| **repoInfo** | **RepoInfo** | An object containing information about the GitHub repository. |


## Contributing 🤝

Expand Down Expand Up @@ -159,4 +176,4 @@ If you have any questions or need further assistance, feel free to reach out to

## License

This project is licensed under the [MIT License](https://github.com/sauravhathi/github-folder-tree/blob/master/LICENSE).
This project is licensed under the [MIT License](https://github.com/sauravhathi/github-folder-tree/blob/master/LICENSE).
16 changes: 4 additions & 12 deletions dist/cjs/hooks/useGitHubFolderTree.d.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
interface RepoFile {
url: string;
name: string;
file_type: string;
download_url: string;
sha: string;
size: string;
path: string;
type?: string;
}
import { RepoFile, RepoInfo } from '../types';
export declare const useGitHubFolderTree: (folderUrl: string, apiKey?: string) => {
repoFiles: RepoFile[];
fetchRepositoryContents: () => Promise<void>;
useGitHubFolderDownload: () => Promise<void>;
error: string;
log: string;
fetchRepositoryContents: () => Promise<void>;
repoInfo: RepoInfo;
};
export {};
94 changes: 36 additions & 58 deletions dist/cjs/hooks/useGitHubFolderTree.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/cjs/hooks/useGitHubFolderTree.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions dist/cjs/index.d.ts
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export * from './hooks';
export * from './types';
export * from './utils';
2 changes: 2 additions & 0 deletions dist/cjs/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/cjs/index.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions dist/cjs/types/RepoFile.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export interface RepoFile {
url: string;
name: string;
file_type: string;
download_url: string;
sha: string;
size: string;
path: string;
type?: string;
}
3 changes: 3 additions & 0 deletions dist/cjs/types/RepoFile.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/cjs/types/RepoFile.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions dist/cjs/types/RepoInfo.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export interface RepoInfo {
user: string;
repo: string;
branch: string;
dir: string;
}
3 changes: 3 additions & 0 deletions dist/cjs/types/RepoInfo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/cjs/types/RepoInfo.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading