Merge branch 'master' of github.com:tubearchivist/tubearchivist-frontend into feat/ci

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<Playlists> => {
   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}`, {
+  const response = await fetch(
-    headers: {
+    `${TA_BASE_URL.server}/api/playlist/${playlistId}`,
-      Accept: "application/json",
+    {
-      "Content-Type": "application/json",
+      headers: {
-      Authorization: `Token ${token}`,
+        Accept: "application/json",
-      mode: "no-cors",
+        "Content-Type": "application/json",
-    },
+        Authorization: `Token ${token}`,
-  });
+        mode: "no-cors",
+      },
+    }
+  );
   if (!response.ok) {
     throw new Error(
       `Error getting playlists information: ${response.statusText}`

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 {
+export function formatNumbers(number: string | number): string | number {
-  var numberUnformatted = parseFloat(number);
+  var numberUnformatted = parseFloat(number as string);
   if (numberUnformatted > 999999999) {
     var numberFormatted =
       (numberUnformatted / 1000000000).toFixed(1).toString() + "B";

src/pages/channel.tsx

@@ -171,7 +171,9 @@ const Channel: NextPage = () => {
                             </a>
                           </h3>
                           {/* {% if channel.source.channel_subs >= 1000000 %} */}
-                          <p>Subscribers: {formatNumbers(channel?.channel_subs)} </p>
+                          <p>
+                            Subscribers: {formatNumbers(channel?.channel_subs)}{" "}
+                          </p>
                           {/* {% else %} */}
                         </div>
                       </div>
@@ -185,10 +187,20 @@ const Channel: NextPage = () => {
                             className="unsubscribe"
                             type="button"
                             id="{{ channel.source.channel_id }}"
-                            onClick={() => console.log("unsubscribe(this.id) -> toggleSubscribe()")}
+                            onClick={() =>
-                            title={`${channel?.channel_subscribed ? "Unsubscribe from" : "Subscribe to"} ${channel?.channel_name}`} 
+                              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"}
                           </button>
                           {/* {% else %} */}
                           {/* <button

src/pages/playlist.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { dehydrate, QueryClient, useQuery } from "react-query";
 import { CustomHead } from "../components/CustomHead";
 import { Layout } from "../components/Layout";
-import { TA_BASE_URL } from "../lib/constants";
+import { getTAUrl } from "../lib/constants";
 import { getPlaylists } from "../lib/getPlaylists";
 import IconAdd from "../images/icon-add.svg";
 import IconListView from "../images/icon-listview.svg";
@@ -13,6 +13,8 @@ import IconGridView from "../images/icon-gridview.svg";
 
 type ViewStyle = "grid" | "list";
 
+const TA_BASE_URL = getTAUrl();
+
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const queryClient = new QueryClient();
   const session = await getSession(context);
@@ -140,7 +142,7 @@ const Playlist = () => {
                   <div className="playlist-thumbnail">
                     <a href="{% url 'playlist_id' playlist.source.playlist_id %}">
                       <img
-                        src={`${TA_BASE_URL}/${playlist.playlist_thumbnail}`}
+                        src={`${TA_BASE_URL.client}/${playlist.playlist_thumbnail}`}
                         alt={`${playlist.playlist_id}-thumbnail`}
                       />
                     </a>