Move LastfmProvider to TS

Musish · raphaelvigee · Aug 22, 2019 · Aug 4, 2019 · Aug 4, 2019 · Aug 5, 2019
commit 8df1db1e5cd24144d146783644df4e3c0eac8bb0
diff --git a/package.json b/package.json
@@ -16,12 +16,15 @@
     "@symfony/webpack-encore": "^0.27.0",
     "@types/classnames": "^2.2.7",
     "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/js-md5": "^0.4.2",
     "@types/lodash": "^4.14.136",
     "@types/mousetrap": "^1.6.3",
     "@types/prop-types": "^15.7.1",
+    "@types/qs": "^6.5.3",
     "@types/react": "^16.8.18",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.4",
+    "@types/react-s-alert": "^1.3.2",
     "@types/react-virtualized": "^9.21.1",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",

diff --git a/...p/components/Providers/LastfmProvider.jsx → ...p/components/Providers/LastfmProvider.tsx b/...p/components/Providers/LastfmProvider.jsx → ...p/components/Providers/LastfmProvider.tsx
@@ -1,26 +1,41 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import axios, { AxiosRequestConfig } from 'axios';
 import md5 from 'js-md5';
-import axios from 'axios';
 import qs from 'qs';
+import React, { ReactNode, useEffect, useState } from 'react';
 import Alert from 'react-s-alert';
 import withMK from '../../hoc/withMK';
 import translate from '../../utils/translations/Translations';
 
 const apikey = process.env.LASTFM_API_KEY;
 const secret = process.env.LASTFM_SECRET;
 
+const SK_STORAGE_KEY = 'lastfm_sk';
+
+interface ILastfmProviderProps extends IMKProps {
+  children: ReactNode;
+}
+
+export interface ILastfmProviderValue {
+  login: () => void;
+  reset: () => void;
+  connected: boolean;
+}
+
 function getSK() {
-  return localStorage.getItem('lastfm_sk');
+  return localStorage.getItem(SK_STORAGE_KEY);
 }
 
-export const LastfmContext = React.createContext({ connected: !!getSK() });
+export const LastfmContext = React.createContext<ILastfmProviderValue>({
+  connected: !!getSK(),
+  login: () => undefined,
+  reset: () => undefined,
+});
 
-function LastfmProvider({ children, mk }) {
-  const [connected, setConnected] = useState(!!getSK());
+const LastfmProvider: React.FC<ILastfmProviderProps> = ({ children, mk }: ILastfmProviderProps) => {
+  const [connected, setConnected] = useState(() => !!getSK());
 
-  async function request(isWrite, method, callParams = {}, sk = true) {
-    const params = {
+  async function request(isWrite: boolean, method: string, callParams = {}, sk = true) {
+    const params: any = {
       ...callParams,
       method,
       api_key: apikey,
@@ -33,7 +48,7 @@ function LastfmProvider({ children, mk }) {
     params.api_sig = sign(params);
     params.format = 'json';
 
-    const config = {
+    const config: AxiosRequestConfig = {
       url: 'https://ws.audioscrobbler.com/2.0/',
     };
 
@@ -50,7 +65,7 @@ function LastfmProvider({ children, mk }) {
     return data;
   }
 
-  async function scrobble(item) {
+  async function scrobble(item: MusicKit.MediaItem) {
     const params = {
       'artist[0]': item.artistName,
       'track[0]': item.title,
@@ -77,7 +92,7 @@ function LastfmProvider({ children, mk }) {
     }
   }
 
-  function sign(params) {
+  function sign(params: any) {
     const str = Object.keys(params)
       .sort()
       .reduce((result, key) => `${result}${key}${params[key]}`, '');
@@ -94,22 +109,22 @@ function LastfmProvider({ children, mk }) {
     window.location.href = `http://www.last.fm/api/auth/?api_key=${apikey}&cb=${cb}`;
   }
 
-  async function fetchSK(token) {
+  async function fetchSK(token: string) {
     const params = {
       token,
     };
 
     const data = await request(true, 'auth.getSession', params, false);
 
-    localStorage.setItem('lastfm_sk', data.session.key);
+    localStorage.setItem(SK_STORAGE_KEY, data.session.key);
 
     setConnected(true);
   }
 
   function reset() {
     setConnected(false);
 
-    localStorage.removeItem('lastfm_sk');
+    localStorage.removeItem(SK_STORAGE_KEY);
   }
 
   async function fetchToken() {
@@ -153,18 +168,13 @@ function LastfmProvider({ children, mk }) {
     }
   }, [mk.mediaItem]);
 
-  const state = {
+  const state: ILastfmProviderValue = {
     login,
     reset,
     connected,
   };
 
   return <LastfmContext.Provider value={state}>{children}</LastfmContext.Provider>;
-}
-
-LastfmProvider.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  mk: PropTypes.any.isRequired,
 };
 
 const bindings = {

diff --git a/yarn.lock b/yarn.lock
@@ -826,6 +826,11 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/js-md5@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@types/js-md5/-/js-md5-0.4.2.tgz#95b39911e2081bf2915436e61cc345e12459e5bb"
+  integrity sha512-FUPoQkpQTzA5wz9ebrdVRjsjQsFehr+cW1CVhLcI2UwD/SO/4NHPO1esrXPPbx7ux762U0POmWFSrUjQq2ophw==
+
 "@types/lodash@^4.14.136":
   version "4.14.136"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.136.tgz#413e85089046b865d960c9ff1d400e04c31ab60f"
@@ -848,6 +853,11 @@
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18"
 
+"@types/qs@^6.5.3":
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.5.3.tgz#1c3b71b091eaeaf5924538006b7f70603ce63d38"
+  integrity sha512-Jugo5V/1bS0fRhy2z8+cUAHEyWOATaz4rbyLVvcFs7+dXp5HfwpEwzF1Q11bB10ApUqHf+yTauxI0UXQDwGrbA==
+
 "@types/react-dom@^16.8.4":
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.4.tgz#7fb7ba368857c7aa0f4e4511c4710ca2c5a12a88"
@@ -871,6 +881,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-s-alert@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/react-s-alert/-/react-s-alert-1.3.2.tgz#02a0879c83c64f9b8f89053f1879588341109c23"
+  integrity sha512-rrq6WpNtyGLxGMP+eGlLLBOdojHhZWDEbNrLlBca0BkOIuamtfFigkIbPnmVAFkzOcTED3mFuKmYu58D+IIUfQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-virtualized@^9.21.1":
   version "9.21.1"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.1.tgz#c85770f5bb0ccaeb3496d97ff2a2d9028c8ed1fd"