not inital commit

package.json

@@ -41,5 +41,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "prettier": {
+    "tabWidth": 4,
+    "printWidth": 120
   }
 }

src/ApiClient.ts

@@ -0,0 +1,30 @@
+import axiosInstance from "./AxiosInstance";
+import { Band } from "./Types";
+
+export class ApiClient {
+    private readonly _cache: { [route: string]: any };
+
+    constructor() {
+        this._cache = {};
+    }
+
+    public async get<T>(route: string, force = false): Promise<T> {
+        if (!force && this._cache[route]) {
+            return this._cache[route];
+        }
+        const res = await axiosInstance.get(route);
+        const data = res.data.response;
+        if (res.status === 200) {
+            this._cache[route] = data;
+        }
+        return data;
+    }
+
+    public async searchBand(name: string): Promise<Band[]> {
+        const res = await this.get<any>(`/bands?query=${encodeURIComponent(name)}`);
+        return res.bands;
+    }
+}
+
+const client = new ApiClient();
+export default client;

src/App.tsx

@@ -1,10 +1,32 @@
-import React from 'react';
+import React, { useRef, useState } from "react";
-import {Container} from "react-bootstrap";
+import { Button, CardGroup, Container, FormControl, FormGroup, FormLabel, Row } from "react-bootstrap";
+import client from "./ApiClient";
 
 function App() {
+    const searchRef = useRef<HTMLInputElement>(null);
+
+    const [bands, setBands] = useState<any[]>([]);
+
+    const search = () => {
+        const input = searchRef.current?.value;
+        if (!input) {
+            return;
+        }
+        client.searchBand(input).then((res) => setBands(res.bands));
+    };
+
     return (
         <Container>
-            hi
+            <Row>
+                <FormGroup>
+                    <FormLabel>Search Band</FormLabel>
+                    <FormControl name="searchBand" type="text" ref={searchRef} />
+                </FormGroup>
+                <Button onClick={search}>Search</Button>
+            </Row>
+            <Row>
+                <CardGroup>{bands && bands.map((band) => <div>{band}</div>)}</CardGroup>
+            </Row>
         </Container>
     );
 }

src/AxiosInstance.ts

@@ -4,7 +4,8 @@ const axiosInstance = axios.create({
     baseURL: "https://api.srgssr.ch/mx3/v2",
     headers: {
         "content-type": "application/json",
-    }
+        Authorization: "Bearer ELBiWACfIgGyJTHtcuGHT6zMQJ1o",
+    },
 });
 
-export default axiosInstance;
+export default axiosInstance;

src/Band.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect, useState } from "react";
+import client from "./ApiClient";
+import { BandById, Option } from "./Types";
+
+const Band = ({ id }: { id: number }) => {
+    const [band, setBand] = useState<Option<BandById>>(null);
+
+    useEffect(() => {
+        client.get<BandById>(`/bands/${id}`).then((data) => setBand(data));
+    }, [id]);
+
+    return <div></div>;
+};
+
+export default Band;

src/Types.ts

@@ -0,0 +1,37 @@
+import band from "./bandByIdRes.json";
+
+export type Option<T> = T | null;
+
+export interface Band {
+    uid: number;
+    id: number;
+    name: string;
+    language: Option<string>;
+    permalink: string;
+    public_page_url: string;
+    permalink_name: string;
+    created_at: string;
+    city: Option<string>;
+    address: Option<string>;
+    country: Option<string>;
+    profile_views_count: number;
+    playlists_count: number;
+    image: string;
+    url_for_image_thumb: string;
+    url_for_image_head: string;
+    url_for_image_list: string;
+    url_for_image_original: string;
+    links: Array<{ name: Option<string>; href: string }>;
+    biographies: Array<{ lang: string; description: string }>;
+    categories: Array<{ id: number; name: string }>;
+    state: {
+        name: string;
+        code: string;
+    };
+    listening_count: number;
+    listening_count_last_period: number;
+    is_broadcasted: boolean;
+    singles_count: number;
+    performances: Array<any>;
+}
+export type BandById = typeof band;

src/index.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import App from './App';
+import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(
     <React.StrictMode>
-        <App/>
+        <App />
     </React.StrictMode>,
-    document.getElementById('root')
+    document.getElementById("root")
 );