Skip to content

Commit

Permalink
Configure prettier for this project. (#24)
Browse files Browse the repository at this point in the history
  • Loading branch information
anshul137 authored Nov 24, 2022
1 parent 4ab8005 commit 3a1ee4e
Show file tree
Hide file tree
Showing 17 changed files with 525 additions and 397 deletions.
11 changes: 11 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
package.json
package-lock.json
build
coverage
dist
node_modules
npm-debug.log
yarn-error.log
yarn.lock
*.log

14 changes: 14 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"arrowParens": "always",
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"insertPragma": false,
"proseWrap": "preserve",
"requirePragma": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"printWidth": 100
}
3 changes: 3 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"recommendations": ["esbenp.prettier-vscode"]
}
9 changes: 9 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.defaultformatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
6 changes: 6 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ To deploy updated versions:
To run all tests via Jest:
`npm test`

To run Prettier via command line:
`npm run format`

To check if your files are formatted:
`npm run format:check`

# Using Cloudflare Workers

1. Run `npx wrangler dev <filepath>` in your terminal to start a development server
Expand Down
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

## Introduction

**My Photohub** is a web app that makes it easy to share your photos on the web. **My Photohub** takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new [GitHub Repository](https://docs.github.com/en/repositories) owned by you! Your photo web page is made available to the world via [GitHub Pages](https://pages.github.com/). Best of all, everything is free and **you** are in control of the end product.
**My Photohub** is a web app that makes it easy to share your photos on the web. **My Photohub** takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new [GitHub Repository](https://docs.github.com/en/repositories) owned by you! Your photo web page is made available to the world via [GitHub Pages](https://pages.github.com/). Best of all, everything is free and **you** are in control of the end product.

## Overview

There's never been a time where people had to cope with more images. At the same time, most companies take advantage of our desire to share what we create, charging for storage.
There's never been a time where people had to cope with more images. At the same time, most companies take advantage of our desire to share what we create, charging for storage.

**My Photohub** is designed to leverage the open web and make it easy for anyone to take a bunch of photos and turn them into a web page they can share with the world. You don't need to be a programmer to take advantage of the web or GitHub in order to share your photos.
**My Photohub** is designed to leverage the open web and make it easy for anyone to take a bunch of photos and turn them into a web page they can share with the world. You don't need to be a programmer to take advantage of the web or GitHub in order to share your photos.

## How it Works

A **My Photohub** user starts by picking the images they want to share. Imagine you've just gone for a hike, and want to share a page with your favourite images from the day. A new [GitHub Repository](https://docs.github.com/en/repositories) is created on your behalf, and the images are uploaded. Next, the images are automatically optimized for the web and a new HTML web page is created using [GitHub Actions](https://docs.github.com/en/actions). Once the images and page are ready, they are stored in the new [GitHub Repository](https://docs.github.com/en/repositories), and the user is given a URL to their website.
A **My Photohub** user starts by picking the images they want to share. Imagine you've just gone for a hike, and want to share a page with your favourite images from the day. A new [GitHub Repository](https://docs.github.com/en/repositories) is created on your behalf, and the images are uploaded. Next, the images are automatically optimized for the web and a new HTML web page is created using [GitHub Actions](https://docs.github.com/en/actions). Once the images and page are ready, they are stored in the new [GitHub Repository](https://docs.github.com/en/repositories), and the user is given a URL to their website.

## Requirements

**My Photohub** doesn't store any information and isn't a cloud service in the same way that Google Photos or iCloud are. Instead, **My Photohub** uses [GitHub Repositories](https://docs.github.com/en/repositories) and [GitHub Pages](https://pages.github.com/) to generate, store, and share photos.
**My Photohub** doesn't store any information and isn't a cloud service in the same way that Google Photos or iCloud are. Instead, **My Photohub** uses [GitHub Repositories](https://docs.github.com/en/repositories) and [GitHub Pages](https://pages.github.com/) to generate, store, and share photos.

All **My Photohub** users *must have a [GitHub Account](https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account)* to use the service.
All **My Photohub** users _must have a [GitHub Account](https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account)_ to use the service.
50 changes: 25 additions & 25 deletions github-upload.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { Octokit } from "https://cdn.skypack.dev/octokit?dts";

const UPLOAD_DIRECTORY = "raw";

function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () =>
resolve(reader.result.substring(reader.result.indexOf(",") + 1));
reader.onerror = (error) => reject(error);
});
}

export async function githubUpload(token, repository, file) {
const octokit = new Octokit({ auth: token });
const [owner, repo] = repository.split("/");
return await octokit.request("PUT /repos/{owner}/{repo}/contents/{path}", {
owner,
repo,
path: `${UPLOAD_DIRECTORY}/${file.name}`,
message: `Upload File - ${file.name}`,
content: await getBase64(file),
});
}
import { Octokit } from "https://cdn.skypack.dev/octokit?dts";

const UPLOAD_DIRECTORY = "raw";

function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () =>
resolve(reader.result.substring(reader.result.indexOf(",") + 1));
reader.onerror = (error) => reject(error);
});
}

export async function githubUpload(token, repository, file) {
const octokit = new Octokit({ auth: token });
const [owner, repo] = repository.split("/");
return await octokit.request("PUT /repos/{owner}/{repo}/contents/{path}", {
owner,
repo,
path: `${UPLOAD_DIRECTORY}/${file.name}`,
message: `Upload File - ${file.name}`,
content: await getBase64(file),
});
}
24 changes: 23 additions & 1 deletion package-lock.json

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

7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
"eject": "react-scripts eject",
"auth-worker": "wrangler dev ./worker/index",
"auth-worker:login": "wrangler login",
"lint": "eslint src/**/*.js"
"lint": "eslint src/**/*.js",
"format": "npx prettier --write .",
"format:check": "npx prettier --check ."
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -47,7 +49,8 @@
"eslint": "^8.27.0",
"eslint-plugin-react": "^7.31.11",
"isomorphic-fetch": "^3.0.0",
"jest": "^27.5.1"
"jest": "^27.5.1",
"prettier": "2.7.1"
},
"browserslist": {
"production": [
Expand Down
148 changes: 74 additions & 74 deletions src/AuthDialog.js
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
import React, { useRef } from "react";
import { Button, Form, Modal } from "react-bootstrap";
import PropTypes from 'prop-types';

function AuthDialog({ show, setShow, setToken, setRepository }) {
const tokenEl = useRef(null);
const repoEl = useRef(null);

return (
<Modal
show={show}
onHide={() => {
setShow(false);
}}
>
<Modal.Header closeButton>
<Modal.Title>Authenticate with GitHub</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3">
<Form.Label>GitHub Token</Form.Label>
<Form.Control type="password" ref={tokenEl} autoFocus />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Repository (username/repository_name)</Form.Label>
<Form.Control type="text" ref={repoEl} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
setShow(false);
}}
>
Close
</Button>
<Button
variant="success"
onClick={() => {
let token = tokenEl.current;
let repo = repoEl.current;

const validRepo =
/^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}\/[a-zA-Z0-9_.-]+$/i;

if (token.value === "") {
token.focus();
return;
} else if (repo.value === "" || !repo.value.match(validRepo)) {
repo.focus();
return;
}
setToken(token.value);
setRepository(repo.value);
setShow(false);
}}
>
Use Credentials
</Button>
</Modal.Footer>
</Modal>
);
}

AuthDialog.propTypes = {
show: PropTypes.bool,
setToken: PropTypes.func,
setRepository: PropTypes.func,
setShow: PropTypes.func
}

import React, { useRef } from "react";
import { Button, Form, Modal } from "react-bootstrap";
import PropTypes from 'prop-types';

function AuthDialog({ show, setShow, setToken, setRepository }) {
const tokenEl = useRef(null);
const repoEl = useRef(null);

return (
<Modal
show={show}
onHide={() => {
setShow(false);
}}
>
<Modal.Header closeButton>
<Modal.Title>Authenticate with GitHub</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3">
<Form.Label>GitHub Token</Form.Label>
<Form.Control type="password" ref={tokenEl} autoFocus />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Repository (username/repository_name)</Form.Label>
<Form.Control type="text" ref={repoEl} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
setShow(false);
}}
>
Close
</Button>
<Button
variant="success"
onClick={() => {
let token = tokenEl.current;
let repo = repoEl.current;

const validRepo =
/^[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}\/[a-zA-Z0-9_.-]+$/i;

if (token.value === "") {
token.focus();
return;
} else if (repo.value === "" || !repo.value.match(validRepo)) {
repo.focus();
return;
}
setToken(token.value);
setRepository(repo.value);
setShow(false);
}}
>
Use Credentials
</Button>
</Modal.Footer>
</Modal>
);
}

AuthDialog.propTypes = {
show: PropTypes.bool,
setToken: PropTypes.func,
setRepository: PropTypes.func,
setShow: PropTypes.func
}

export default AuthDialog
Loading

0 comments on commit 3a1ee4e

Please sign in to comment.