Cleanup Codeclimate smells (#11)

* Cleanup Codeclimate smells

* Add Codeclimate badges

packages/ui-identicon/src/Polkadot.tsx

@@ -9,9 +9,10 @@
 //
 // Here we have done the following to convert the component -
 //   - Converted the code to TypeScript
-//   - Removed the oo7 dependencies (since not initialised properly, it makes additional connections to wrong endpoints)
+//   - Removed the oo7 dependencies (since not initialised properly, it makes calls to wrong endpoints)
 //   - Remove encoding functionality, these are catered for in the base
 //   - Remove copy functionality (this is catered from in the base components)
+//   - Split calculations into relevant functions
 //   - Move constants to file-level
 //   - Overall it is now just a static component, expecting an address as an input value
 
@@ -45,60 +46,11 @@ const schema: { [index: string]: Scheme } = {
   hmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11] }
 };
 
-function findScheme (d: number): Scheme {
-  let cum = 0;
-  const ks = Object.keys(schema);
-
-  for (let i in ks) {
-    cum += schema[ks[i]].freq;
-
-    if (d < cum) {
-      return schema[ks[i]];
-    }
-  }
-
-  throw new Error('Unable to find schema');
-}
-
 export default class Identicon extends React.PureComponent<Props> {
   render () {
-    const { className, sixPoint = false, size, style, value } = this.props;
-
-    const r = sixPoint
-      ? (s / 2 / 8 * 5)
-      : (s / 2 / 4 * 3);
-    const rroot3o2 = r * Math.sqrt(3) / 2;
-    const ro2 = r / 2;
-    const rroot3o4 = r * Math.sqrt(3) / 4;
-    const ro4 = r / 4;
-    const r3o4 = r * 3 / 4;
-    const total = Object.keys(schema).map(k => schema[k].freq).reduce((a, b) => a + b);
-    const id = Array.from(blake2b(decodeAddress(value))).map((x, i) =>
-      (x + 256 - zero[i]) % 256
-    );
-    const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
-    const d = Math.floor((id[30] + id[31] * 256) % total);
-    const scheme = findScheme(d);
-    const palette = Array.from(id).map((x, i) => {
-      const b = (x + i % 28 * 58) % 256;
-
-      if (b === 0) {
-        return '#444';
-      } else if (b === 255) {
-        return 'transparent';
-      }
-
-      const h = Math.floor(b % 64 * 360 / 64);
-      const l = [53, 15, 35, 75][Math.floor(b / 64)];
-
-      return `hsl(${h}, ${sat}%, ${l}%)`;
-    });
-
-    const rot = (id[28] % 6) * 3;
-    const colors = scheme.colors.map((_, i) =>
-      palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]
-    );
-
+    const { className, size, style, value } = this.props;
+    const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = this.getRotation();
+    const colors = this.getColors();
     let i = 0;
 
     return (
@@ -137,4 +89,61 @@ export default class Identicon extends React.PureComponent<Props> {
       </div>
     );
   }
+
+  private getRotation () {
+    const { sixPoint = false } = this.props;
+    const r = sixPoint
+      ? (s / 2 / 8 * 5)
+      : (s / 2 / 4 * 3);
+    const rroot3o2 = r * Math.sqrt(3) / 2;
+    const ro2 = r / 2;
+    const rroot3o4 = r * Math.sqrt(3) / 4;
+    const ro4 = r / 4;
+    const r3o4 = r * 3 / 4;
+
+    return { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 };
+  }
+
+  private getColors () {
+    const { value } = this.props;
+    const total = Object.keys(schema).map(k => schema[k].freq).reduce((a, b) => a + b);
+    const id = Array.from(blake2b(decodeAddress(value))).map((x, i) => (x + 256 - zero[i]) % 256);
+    const d = Math.floor((id[30] + id[31] * 256) % total);
+    const rot = (id[28] % 6) * 3;
+    const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
+    const scheme = this.findScheme(d);
+    const palette = Array.from(id).map((x, i) => {
+      const b = (x + i % 28 * 58) % 256;
+
+      if (b === 0) {
+        return '#444';
+      } else if (b === 255) {
+        return 'transparent';
+      }
+
+      const h = Math.floor(b % 64 * 360 / 64);
+      const l = [53, 15, 35, 75][Math.floor(b / 64)];
+
+      return `hsl(${h}, ${sat}%, ${l}%)`;
+    });
+
+    return scheme.colors.map((_, i) =>
+      palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]
+    );
+  }
+
+  private findScheme (d: number): Scheme {
+    let cum = 0;
+    const ks = Object.keys(schema);
+
+    for (let i in ks) {
+      cum += schema[ks[i]].freq;
+
+      if (d < cum) {
+        return schema[ks[i]];
+      }
+    }
+
+    throw new Error('Unable to find schema');
+  }
 }

packages/ui-identicon/src/index.tsx

@@ -87,13 +87,28 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
     const { address } = this.state;
+    const wrapped = this.getWrapped(address);
 
+    return !address
+      ? wrapped
+      : (
+        <CopyToClipboard
+          onCopy={this.onCopy}
+          text={address}
+        >
+          {wrapped}
+        </CopyToClipboard>
+      );
+  }
+
+  private getWrapped (address?: string | null) {
+    const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
     const Component = !address
       ? Empty
       : Components[theme] || Substrate;
-    const wrapped = (
+
+    return (
       <Wrapper
         className={['ui--IdentityIcon', className].join(' ')}
         key={address || ''}
@@ -106,19 +121,6 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
         />
       </Wrapper>
     );
-
-    if (!address) {
-      return wrapped;
-    }
-
-    return (
-      <CopyToClipboard
-        onCopy={this.onCopy}
-        text={address}
-      >
-        {wrapped}
-      </CopyToClipboard>
-    );
   }
 
   private onCopy = (): void => {