Pre-release refactor

gilbarbara · May 21, 2019 · 2d0b4e8 · 2d0b4e8
1 parent 7380010
commit 2d0b4e8
Show file tree

Hide file tree

Showing 23 changed files with 615 additions and 497 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2014, Matthew Dapena-Tretter / Gil Barbara
+Copyright (c) 2019, Gil Barbara
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
@@ -37,9 +37,10 @@ const Wrapper = styled('div')(
   ({ styles }: StyledComponentProps) => ({
     height: px(styles.height),
   }),
+  'ActionsRSWP',
 );
 
-const Loader = ({
+const Actions = ({
   currentDeviceId,
   isDevicesOpen,
   onClickDevice,
@@ -62,4 +63,4 @@ const Loader = ({
   );
 };
 
-export default Loader;
+export default Actions;
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -26,6 +26,7 @@ const Wrapper = styled('div')(
   ({ styles }: StyledComponentProps) => ({
     minHeight: px(styles.height),
   }),
+  'ContentRSWP',
 );
 
 const Content = ({ children, styles }: StyledComponentProps) => {

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -20,30 +20,34 @@ interface Props {
   styles: StylesOptions;
 }
 
-const Wrapper = styled('div')({}, ({ styles }: StyledComponentProps) => ({
-  alignItems: 'center',
-  display: 'flex',
-  height: px(styles.height),
-  justifyContent: 'center',
+const Wrapper = styled('div')(
+  {},
+  ({ styles }: StyledComponentProps) => ({
+    alignItems: 'center',
+    display: 'flex',
+    height: px(styles.height),
+    justifyContent: 'center',
 
-  '@media (max-width: 767px)': {
-    padding: px(10),
-  },
+    '@media (max-width: 767px)': {
+      padding: px(10),
+    },
 
-  '> div': {
-    minWidth: px(styles.height),
-    textAlign: 'center',
-  },
+    '> div': {
+      minWidth: px(styles.height),
+      textAlign: 'center',
+    },
 
-  button: {
-    color: styles.color,
-    fontSize: px(16),
+    button: {
+      color: styles.color,
+      fontSize: px(16),
 
-    '&.rswp__toggle': {
-      fontSize: px(28),
+      '&.rswp__toggle': {
+        fontSize: px(28),
+      },
     },
-  },
-}));
+  }),
+  'ControlsRSWP',
+);
 
 export default class Controls extends PureComponent<Props> {
   public render() {

diff --git a/src/components/Devices.tsx b/src/components/Devices.tsx
@@ -57,11 +57,10 @@ const Wrapper = styled('div')(
       color: styles.color,
     },
   }),
+  'DevicesRSWP',
 );
 
 export default class Devices extends PureComponent<Props, State> {
-  private timeout: any;
-
   constructor(props: Props) {
     super(props);
 
@@ -71,12 +70,16 @@ export default class Devices extends PureComponent<Props, State> {
     };
   }
 
-  public componentDidMount() {
+  public async componentDidMount() {
     const { token } = this.props;
 
-    getDevices(token).then(({ devices }) => {
+    try {
+      const { devices } = await getDevices(token);
       this.setState({ devices: devices || [] });
-    });
+    } catch (error) {
+      // tslint:disable-next-line:no-console
+      console.error('getDevices', error);
+    }
   }
 
   private handleClickSetDevice = (e: React.MouseEvent<HTMLElement>) => {
@@ -93,11 +96,7 @@ export default class Devices extends PureComponent<Props, State> {
   private handleClickToggleDevices = () => {
     const { isOpen } = this.state;
 
-    clearTimeout(this.timeout);
-
-    this.timeout = setTimeout(() => {
-      this.setState({ isOpen: !isOpen });
-    }, 100);
+    this.setState({ isOpen: !isOpen });
   };
 
   public render() {

diff --git a/src/components/Error.tsx b/src/components/Error.tsx
@@ -14,6 +14,7 @@ const Wrapper = styled('p')(
     height: px(styles.height),
     lineHeight: px(styles.height),
   }),
+  'ErrorRSWP',
 );
 
 const Error = ({ children, styles }: StyledComponentProps) => {

diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -20,49 +20,53 @@ interface State {
   isSaved: boolean;
 }
 
-const Wrapper = styled('div')({}, ({ styles }: StyledComponentProps) => ({
-  alignItems: 'center',
-  display: 'flex',
-  height: px(styles.height),
-  textAlign: 'left',
-
-  '@media (max-width: 599px)': {
-    borderBottom: '1px solid #ccc',
-    display: 'none',
-    width: '100%',
-  },
+const Wrapper = styled('div')(
+  {},
+  ({ styles }: StyledComponentProps) => ({
+    alignItems: 'center',
+    display: 'flex',
+    height: px(styles.height),
+    textAlign: 'left',
 
-  '&.rswp__active': {
     '@media (max-width: 599px)': {
-      display: 'flex',
+      borderBottom: '1px solid #ccc',
+      display: 'none',
+      width: '100%',
     },
-  },
 
-  img: {
-    height: px(styles.height),
-    width: px(styles.height),
-  },
+    '&.rswp__active': {
+      '@media (max-width: 599px)': {
+        display: 'flex',
+      },
+    },
 
-  p: {
-    '&:first-child': {
-      alignItems: 'center',
-      display: 'inline-flex',
+    img: {
+      height: px(styles.height),
+      width: px(styles.height),
+    },
 
-      button: {
-        fontSize: '110%',
-        marginLeft: px(5),
+    p: {
+      '&:first-child': {
+        alignItems: 'center',
+        display: 'inline-flex',
 
-        '&:focus': {
-          outline: 'none',
-        },
+        button: {
+          fontSize: '110%',
+          marginLeft: px(5),
+
+          '&:focus': {
+            outline: 'none',
+          },
 
-        '&.rswp__active': {
-          color: styles.savedColor,
+          '&.rswp__active': {
+            color: styles.savedColor,
+          },
         },
       },
     },
-  },
-}));
+  }),
+  'InfoRSWP',
+);
 
 const Title = styled('div')({}, ({ styles }: StyledComponentProps) => ({
   marginLeft: px(10),
@@ -84,6 +88,9 @@ const Title = styled('div')({}, ({ styles }: StyledComponentProps) => ({
 }));
 
 export default class Info extends PureComponent<Props, State> {
+  // tslint:disable-next-line:variable-name
+  private _isMounted = false;
+
   constructor(props: Props) {
     super(props);
 
@@ -93,11 +100,13 @@ export default class Info extends PureComponent<Props, State> {
   }
 
   public async componentDidMount() {
+    this._isMounted = true;
+
     const { token, track } = this.props;
 
     if (track.id) {
       await checkTracksStatus(track.id, token).then(d => {
-        const [isSaved] = d;
+        const [isSaved = false] = d || [];
 
         this.setState({ isSaved });
       });
@@ -107,17 +116,28 @@ export default class Info extends PureComponent<Props, State> {
   public async componentDidUpdate(prevProps: Props) {
     const { token, track } = this.props;
 
+    if (!this._isMounted) {
+      return;
+    }
+
     if (prevProps.track.id !== track.id && track.id) {
       this.setState({ isSaved: false });
 
-      await checkTracksStatus(track.id, token).then(d => {
-        const [isSaved] = d;
+      const status = await checkTracksStatus(track.id, token);
+      const [isSaved] = status || [false];
 
-        this.setState({ isSaved });
-      });
+      if (!this._isMounted) {
+        return;
+      }
+
+      this.setState({ isSaved });
     }
   }
 
+  public componentWillUnmount() {
+    this._isMounted = false;
+  }
+
   private handleClickIcon = async () => {
     const { isSaved } = this.state;
     const { token, track } = this.props;

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -51,6 +51,7 @@ const Wrapper = styled('div')(
       },
     };
   },
+  'LoaderRSWP',
 );
 
 const Loader = ({ styles }: StyledComponentProps) => {

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -37,6 +37,7 @@ const Wrapper = styled('div')(
     backgroundColor: styles.bgColor,
     minHeight: px(styles.height),
   }),
+  'PlayerRSWP',
 );
 
 const Player = ({ children, styles }: StyledComponentProps) => {

diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
@@ -23,6 +23,7 @@ const Wrapper = styled('div')(
   ({ styles }: StyledComponentProps) => ({
     height: px(styles.rangeHeight),
   }),
+  'SliderRSWP',
 );
 
 export default class Slider extends PureComponent<Props> {

diff --git a/src/components/Volume.tsx b/src/components/Volume.tsx
@@ -50,11 +50,10 @@ const Wrapper = styled('div')(
       color: styles.color,
     },
   }),
+  'VolumeRSWP',
 );
 
 export default class Volume extends PureComponent<Props, State> {
-  private timeout?: any;
-
   constructor(props: Props) {
     super(props);
 
@@ -66,11 +65,7 @@ export default class Volume extends PureComponent<Props, State> {
   private handleClick = () => {
     const { isOpen } = this.state;
 
-    clearTimeout(this.timeout);
-
-    this.timeout = setTimeout(() => {
-      this.setState({ isOpen: !isOpen });
-    }, 100);
+    this.setState({ isOpen: !isOpen });
   };
 
   private handleChangeSlider = ({ y }: RangeSliderPosition) => {
@@ -90,7 +85,7 @@ export default class Volume extends PureComponent<Props, State> {
 
     if (volume === 0) {
       icon = <VolumeMute />;
-    } else if (volume < 0.5) {
+    } else if (volume <= 0.5) {
       icon = <VolumeLow />;
     }
 
@@ -100,6 +95,7 @@ export default class Volume extends PureComponent<Props, State> {
           <ClickOutside onClick={this.handleClick}>
             <RangeSlider
               axis="y"
+              classNamePrefix="rrs"
               styles={{
                 options: {
                   handleBorderRadius: 12,

diff --git a/src/components/icons/Devices.tsx b/src/components/icons/Devices.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Devices = (props: object) => (
+const DevicesIcon = (props: object) => (
   <svg width="1em" height="1em" viewBox="0 0 128 128" preserveAspectRatio="xMidYMid" {...props}>
     <path
       d="M6.765 89.483h40.412v6.765H6.269C2.765 96.248 0 93.483 0 89.978V20.703c0-3.504 2.765-6.27 6.27-6.27h40.907v6.766H6.765v68.285zm16.327 20.702a3.4 3.4 0 0 1 3.383-3.383h20.702v6.765H26.475c-.915 0-1.72-.347-2.344-1.038a3.064 3.064 0 0 1-1.039-2.344zm46.681-95.752h51.958c3.504 0 6.269 2.765 6.269 6.269v86.596c0 3.504-2.765 6.27-6.27 6.27H69.774c-3.504 0-6.27-2.766-6.27-6.27V20.702c0-3.504 2.766-6.27 6.27-6.27zm-.496 5.842l.07 87.52 52.88-.07-.07-87.45h-52.88zm13.89 45.573c3.464-3.462 7.714-5.23 12.585-5.23 9.827 0 17.815 7.988 17.815 17.815 0 9.827-7.988 17.815-17.815 17.815-9.827 0-17.815-7.988-17.815-17.815 0-4.87 1.768-9.122 5.23-12.585zm4.124 21.045c2.381 2.381 5.195 3.582 8.46 3.582 6.598 0 12.043-5.445 12.043-12.042 0-6.597-5.445-12.043-12.042-12.043-6.597 0-12.042 5.446-12.042 12.043 0 3.266 1.2 6.08 3.581 8.46zm12.935-44.466c-1.247 1.247-2.741 1.863-4.474 1.863-3.504 0-6.27-2.765-6.27-6.269s2.766-6.27 6.27-6.27c3.504 0 6.27 2.766 6.27 6.27 0 1.72-.608 3.218-1.796 4.406z"
@@ -9,4 +9,4 @@ const Devices = (props: object) => (
   </svg>
 );
 
-export default Devices;
+export default DevicesIcon;
diff --git a/src/components/icons/Offline.tsx b/src/components/icons/Offline.tsx
diff --git a/src/components/icons/Repeat.tsx b/src/components/icons/Repeat.tsx