Created VisitsTable

src/utils/DateRangeRow.js

@@ -13,7 +13,7 @@ const propTypes = {
 
 const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }) => (
   <div className="row">
-    <div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
+    <div className="col-md-6">
       <DateInput
         selected={startDate}
         placeholderText="Since"
@@ -22,7 +22,7 @@ const DateRangeRow = ({ startDate, endDate, onStartDateChange, onEndDateChange }
         onChange={onStartDateChange}
       />
     </div>
-    <div className="col-xl-3 col-lg-4 col-md-6">
+    <div className="col-md-6">
       <DateInput
         className="date-range-row__date-input"
         selected={endDate}

src/utils/SearchField.js

@@ -12,10 +12,14 @@ export default class SearchField extends React.Component {
     onChange: PropTypes.func.isRequired,
     className: PropTypes.string,
     placeholder: PropTypes.string,
+    large: PropTypes.bool,
+    noBorder: PropTypes.bool,
   };
   static defaultProps = {
     className: '',
     placeholder: 'Search...',
+    large: true,
+    noBorder: false,
   };
 
   state = { showClearBtn: false, searchTerm: '' };
@@ -41,13 +45,16 @@ export default class SearchField extends React.Component {
   }
 
   render() {
-    const { className, placeholder } = this.props;
+    const { className, placeholder, large, noBorder } = this.props;
 
     return (
       <div className={classNames('search-field', className)}>
         <input
           type="text"
-          className="form-control form-control-lg search-field__input"
+          className={classNames('form-control search-field__input', {
+            'form-control-lg': large,
+            'search-field__input--no-border': noBorder,
+          })}
           placeholder={placeholder}
           value={this.state.searchTerm}
           onChange={(e) => this.searchTermChanged(e.target.value)}

src/utils/SearchField.scss

@@ -9,6 +9,11 @@
   padding-right: 40px;
 }
 
+.search-field__input--no-border.search-field__input--no-border {
+  border: none;
+  border-radius: 0;
+}
+
 .search-field__icon {
   @include vertical-align();
 

src/utils/helpers/visits.js

@@ -0,0 +1,59 @@
+import { hasValue } from '../utils';
+
+const DEFAULT = 'Others';
+
+export const osFromUserAgent = (userAgent) => {
+  if (!hasValue(userAgent)) {
+    return DEFAULT;
+  }
+
+  const lowerUserAgent = userAgent.toLowerCase();
+
+  switch (true) {
+    case lowerUserAgent.includes('linux'):
+      return 'Linux';
+    case lowerUserAgent.includes('windows'):
+      return 'Windows';
+    case lowerUserAgent.includes('mac'):
+      return 'MacOS';
+    case lowerUserAgent.includes('mobi'):
+      return 'Mobile';
+    default:
+      return DEFAULT;
+  }
+};
+
+export const browserFromUserAgent = (userAgent) => {
+  if (!hasValue(userAgent)) {
+    return DEFAULT;
+  }
+
+  const lowerUserAgent = userAgent.toLowerCase();
+
+  switch (true) {
+    case lowerUserAgent.includes('opera') || lowerUserAgent.includes('opr'):
+      return 'Opera';
+    case lowerUserAgent.includes('firefox'):
+      return 'Firefox';
+    case lowerUserAgent.includes('chrome'):
+      return 'Chrome';
+    case lowerUserAgent.includes('safari'):
+      return 'Safari';
+    case lowerUserAgent.includes('edg'):
+      return 'Microsoft Edge';
+    case lowerUserAgent.includes('msie'):
+      return 'Internet Explorer';
+    default:
+      return DEFAULT;
+  }
+};
+
+export const extractDomain = (url) => {
+  if (!hasValue(url)) {
+    return 'Direct';
+  }
+
+  const domain = url.includes('://') ? url.split('/')[2] : url.split('/')[0];
+
+  return domain.split(':')[0];
+};