diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..58b8433 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,27 @@ +name: Node.js CI + +on: + push: + branches: [master] + pull_request: + branches: [master] + +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.x, 16.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: "yarn" + - run: yarn install --frozen-lockfile + - run: yarn build + - run: yarn lint diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..36af219 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b06c871 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "all", + "bracketSpacing": true, + "arrowParens": "always" +} diff --git a/README.md b/README.md index bd66ba8..6fede4e 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Copy *.env.local.example* to *.env.local* and set: - **NEXTAUTH_URL**: Your frontend, most likely `http://localhost:3000` - **NEXT_PUBLIC_TUBEARCHIVIST_URL**: Your Tube Archivist backend testing server, e.g. `http://localhost:8000` +In general: Use the [unstable builds](https://github.com/tubearchivist/tubearchivist/blob/master/CONTRIBUTING.md#releases) from Tube Archivist or build the image yourself from *testing* branch. + ## Getting Started First, run the development server: @@ -23,7 +25,7 @@ yarn dev ### Errors: - *next command not found*: Install next with `npm install next` - *Error: Invalid src prop [...] hostname [...] is not configured under images in your `next.config.js`*: Add the *NEXT_PUBLIC_TUBEARCHIVIST_URL* to the list of *domains*. -- *CORS errors in console*: In your backend in `tubearchivist/config/settings.py` replace the line containing *CORS_ALLOWED_ORIGIN_REGEXES* with `CORS_ORIGIN_ALLOW_ALL = True` and rebuild the container. NEVER do that on network accessible installation. +- *CORS errors in console*: Set the environment variable `DISABLE_CORS=True` to the Tube Archivist container to circumvent this protection. NEVER do that on network accessible installation. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/package.json b/package.json index 2c938d0..8e68378 100644 --- a/package.json +++ b/package.json @@ -6,18 +6,17 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "prepare": "husky install" }, "dependencies": { - "@plaiceholder/next": "^2.3.0", "next": "12.1.1", - "next-auth": "^4.3.1", - "plaiceholder": "^2.3.0", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "react-player": "^2.10.0", - "react-query": "^3.34.19", - "sharp": "^0.30.3" + "next-auth": "4.3.1", + "react": "18.0.0", + "react-dom": "18.0.0", + "react-player": "2.10.0", + "react-query": "3.34.19", + "sharp": "0.30.3" }, "devDependencies": { "@types/node": "17.0.23", @@ -25,7 +24,13 @@ "@types/react-dom": "17.0.14", "eslint": "8.12.0", "eslint-config-next": "12.1.1", - "prettier": "^2.6.1", - "typescript": ">=3.3.1 <4.6.0" + "husky": "7.0.4", + "lint-staged": "12.4.0", + "prettier": "2.6.1", + "typescript": "4.5.5" + }, + "lint-staged": { + "*.{ts,tsx}": "eslint --cache --fix", + "*.{ts,tsx,css,md}": "prettier --write" } } diff --git a/renovate.json b/renovate.json new file mode 100644 index 0000000..685b3a5 --- /dev/null +++ b/renovate.json @@ -0,0 +1,4 @@ +{ + "extends": ["config:base"], + "dependencyDashboardApproval": true +} diff --git a/src/lib/getPlaylists.ts b/src/lib/getPlaylists.ts index edb6f9c..1b76077 100644 --- a/src/lib/getPlaylists.ts +++ b/src/lib/getPlaylists.ts @@ -1,13 +1,15 @@ import { Playlist } from "../types/playlist"; import { Playlists } from "../types/playlists"; -import { TA_BASE_URL } from "./constants"; +import { getTAUrl } from "./constants"; + +const TA_BASE_URL = getTAUrl(); export const getPlaylists = async (token: string): Promise => { if (!token) { throw new Error(`No token provided when fetching a playlists`); } - const response = await fetch(`${TA_BASE_URL}/api/playlist/`, { + const response = await fetch(`${TA_BASE_URL.server}/api/playlist/`, { headers: { Accept: "application/json", "Content-Type": "application/json", @@ -33,14 +35,17 @@ export const getPlaylist = async ( ); } - const response = await fetch(`${TA_BASE_URL}/api/playlist/${playlistId}`, { - headers: { - Accept: "application/json", - "Content-Type": "application/json", - Authorization: `Token ${token}`, - mode: "no-cors", - }, - }); + const response = await fetch( + `${TA_BASE_URL.server}/api/playlist/${playlistId}`, + { + headers: { + Accept: "application/json", + "Content-Type": "application/json", + Authorization: `Token ${token}`, + mode: "no-cors", + }, + } + ); if (!response.ok) { throw new Error( `Error getting playlists information: ${response.statusText}` diff --git a/src/lib/utils.ts b/src/lib/utils.ts index a00c48a..d17bbbb 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -3,8 +3,8 @@ * @param number A number or string number * @returns A number string with an appropriate letter appended */ -export function formatNumbers(number: string): string { - var numberUnformatted = parseFloat(number); +export function formatNumbers(number: string | number): string | number { + var numberUnformatted = parseFloat(number as string); if (numberUnformatted > 999999999) { var numberFormatted = (numberUnformatted / 1000000000).toFixed(1).toString() + "B"; diff --git a/src/pages/channel.tsx b/src/pages/channel.tsx index 14a6151..646b697 100644 --- a/src/pages/channel.tsx +++ b/src/pages/channel.tsx @@ -171,7 +171,9 @@ const Channel: NextPage = () => { {/* {% if channel.source.channel_subs >= 1000000 %} */} -

Subscribers: {formatNumbers(channel?.channel_subs)}

+

+ Subscribers: {formatNumbers(channel?.channel_subs)}{" "} +

{/* {% else %} */} @@ -185,10 +187,20 @@ const Channel: NextPage = () => { className="unsubscribe" type="button" id="{{ channel.source.channel_id }}" - onClick={() => console.log("unsubscribe(this.id) -> toggleSubscribe()")} - title={`${channel?.channel_subscribed ? "Unsubscribe from" : "Subscribe to"} ${channel?.channel_name}`} + onClick={() => + console.log( + "unsubscribe(this.id) -> toggleSubscribe()" + ) + } + title={`${ + channel?.channel_subscribed + ? "Unsubscribe from" + : "Subscribe to" + } ${channel?.channel_name}`} > - {channel?.channel_subscribed ? "Unsubscribe" : "Subscribe"} + {channel?.channel_subscribed + ? "Unsubscribe" + : "Subscribe"} {/* {% else %} */} {/*