Implemented first elements of short codes list

src/utils/ColorGenerator.js

@@ -0,0 +1,32 @@
+import Storage from './Storage';
+
+const buildRandomColor = () => {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++ ) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+export class ColorGenerator {
+  constructor(storage) {
+    this.storage = storage;
+    this.colors = this.storage.get('colors') || {};
+  }
+
+  getColorForKey = key => {
+    let color = this.colors[key];
+    if (color) {
+      return color;
+    }
+
+    // If a color has not been set yet, generate a random one and save it
+    color = buildRandomColor();
+    this.colors[key] = color;
+    this.storage.set('colors', this.colors);
+    return color;
+  };
+}
+
+export default new ColorGenerator(Storage);

src/utils/Storage.js

@@ -0,0 +1,17 @@
+const PREFIX = 'shlink';
+const buildPath = path => `${PREFIX}.${path}`;
+
+export class Storage {
+  constructor(localStorage) {
+    this.localStorage = localStorage;
+  }
+
+  get = key => {
+    const item = this.localStorage.getItem(buildPath(key));
+    return item ? JSON.parse(item) : undefined;
+  };
+
+  set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
+}
+
+export default new Storage(localStorage);

src/utils/Tag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ColorGenerator from '../utils/ColorGenerator';
+import './Tag.scss';
+
+export class Tag extends React.Component {
+  constructor(props) {
+    super(props);
+    this.colorGenerator = props.ColorGenerator;
+  }
+
+  render() {
+    return (
+      <span className="badge tag" style={{ backgroundColor: this.colorGenerator.getColorForKey(this.props.text) }}>
+        {this.props.text}
+      </span>
+    );
+  }
+}
+
+export default connect(state => ({ ColorGenerator }))(Tag);

src/utils/Tag.scss

@@ -0,0 +1,7 @@
+.tag {
+  color: #fff;
+}
+
+.tag:not(:last-child) {
+  margin-right: 3px;
+}