feat: added topstories analysis, UI components, created analyzer func…

…tions

[past 4h limit]

scss/components/Page2.scss

@@ -1,5 +1,7 @@
 @import "../shared";
-@import "../variables"
+@import "../variables";
+
 .content {
     composes: commonContent;
+    text-align: center;
 }

scss/components/Top10.scss

@@ -0,0 +1,15 @@
+
+.top10 {
+    list-style-position: inside;
+    display: flex;
+    justify-content: center;
+    ol {
+      padding: 0;
+       list-style-type:decimal-leading-zero;
+       li {
+         margin: 10px 0;
+       }
+    }
+    margin: 20px 0;
+    text-align: left;
+}

scss/global.scss

@@ -10,30 +10,35 @@ html {
 }
 
 :global {
-  .button {
-      color: black;
-      font-size: 15px;
-      font-weight: bold;
-      padding: 2px;
-      text-transform: uppercase;
-      border: 2px solid transparent;
-      font-family: Verdana, Geneva, sans-serif;
-      background-color: $orange;
-        transition: border ease-in-out 200ms;
-      &:focus,
-      &:hover {
-          border: 2px solid black;
-          cursor: pointer;
-      }
-      &:hover:disabled,
-      &:disabled {
-        opacity: 0.5;
+    .button {
+        color: black;
+        font-size: 15px;
+        font-weight: bold;
+        padding: 2px;
+        text-transform: uppercase;
         border: 2px solid transparent;
-        background-color: $grey;
-        cursor: not-allowed;
-      }
-  }
-  .warning {
-    color: $orange;
-  }
+        font-family: Verdana, Geneva, sans-serif;
+        background-color: $orange;
+        transition: border ease-in-out 200ms;
+
+        &:focus,
+        &:hover {
+            border: 2px solid black;
+            cursor: pointer;
+        }
+
+        &:disabled,
+        &:hover:disabled {
+            opacity: 0.5;
+            border: 2px solid transparent;
+            background-color: $grey;
+            cursor: not-allowed;
+        }
+    }
+
+    .warning {
+        color: $orange;
+    }
+
+
 }

src/Analyzer/analyzer.js

@@ -0,0 +1,34 @@
+import { ListFetch } from 'Analyzer/functions/firebase';
+import { GetTitlesList } from 'Analyzer/functions/processors';
+import { GetTopTenWords } from 'Analyzer/functions/textparsers';
+import { OPTION4 } from 'Page2/Page2Text';
+
+function Option4Analysis() {
+  return new Promise(function(resolve, reject) {
+    ListFetch('topstories')
+      .then(list => {
+        GetTitlesList(list).then(newlist => {
+          const top10 = GetTopTenWords(newlist);
+          resolve(top10);
+        });
+      })
+      .catch(error => {
+        reject(error);
+      });
+  });
+}
+
+export function Analyzer(value) {
+  return new Promise(function(resolve) {
+    var top10;
+    switch (value) {
+      case OPTION4:
+        top10 = Option4Analysis();
+        break;
+      default:
+        top10 = [];
+    }
+
+    resolve(top10);
+  });
+}

src/Page2/Analyzer/firebase.js → src/Analyzer/functions/firebase.js

@@ -8,9 +8,9 @@ const hackernews = firebase.initializeApp(
   'hackernews'
 );
 
-export function TitleFetch() {
-  return new Promise(function(resolve, reject) {
-    var ref = hackernews.database().ref('v0/topstories');
+export function ListFetch(folder) {
+  return new Promise((resolve, reject) => {
+    var ref = hackernews.database().ref(`v0/${folder}`);
     ref.once('value').then(
       snapshot => {
         resolve(snapshot.val());
@@ -23,7 +23,7 @@ export function TitleFetch() {
 }
 
 export function ItemFetch(id) {
-  return new Promise(function(resolve, reject) {
+  return new Promise((resolve, reject) => {
     var ref = hackernews.database().ref(`v0/item/${id}`);
     ref.once('value').then(
       snapshot => {

src/Analyzer/functions/processors.js

@@ -0,0 +1,47 @@
+import moment from 'moment';
+import { ItemFetch } from './firebase';
+
+export function GetTitlesList(list) {
+  return new Promise(function(resolve, reject) {
+    const titeledPromises = list.map(item => {
+      return ItemFetch(item).then(
+        result => {
+          return result.title;
+        },
+        error => {
+          return error.message;
+        }
+      );
+    });
+    Promise.all(titeledPromises)
+      .then(function(results) {
+        resolve(results);
+      })
+      .catch(reason => {
+        reject(reason);
+      });
+  });
+}
+
+
+
+export function GetThisWeekList(list) {
+  return new Promise(function(resolve) {
+    const filteredPromises = list.map(item => {
+      return ItemFetch(item).then(result => {
+        return {
+          time: result.time,
+          title: result.title
+        };
+      });
+    });
+    Promise.all(filteredPromises).then(function(results) {
+      const weekAgo = moment().subtract(7, 'days');
+
+      const filtered = results.filter(item => {
+        return weekAgo.isBefore(moment.unix(item.time));
+      });
+      resolve(filtered);
+    });
+  });
+}

src/Analyzer/functions/textparsers.js

@@ -0,0 +1,45 @@
+function TransformToWords(list) {
+  return list
+    .reduce(
+      (result, item) => {
+        return result.concat(item.match(/\b[^\d\W]+\b/g));
+      },
+      []
+    )
+    .map(item => {
+      return item.toLowerCase();
+    })
+    .filter(item => {
+      return item.length > 1;
+    });
+}
+
+function SummorizeWords(list) {
+  const wordsAndCountObj = list.reduce(
+    (result, item) => {
+      result[item] = result[item] || {
+        word: item,
+        count: 0
+      };
+      result[item].count += 1;
+
+      return result;
+    },
+    {}
+  );
+
+  return Object.keys(wordsAndCountObj)
+    .map(function(key) {
+      return wordsAndCountObj[key];
+    })
+    .sort(function(a, b) {
+      return b.count - a.count;
+    });
+}
+
+export function GetTopTenWords(list) {
+  const transformedList = TransformToWords(list);
+  const uniqueList = SummorizeWords(transformedList);
+  const top10 = uniqueList.slice(0, 10);
+  return top10;
+}

src/Page2/Page2Container.js

@@ -1,26 +1,42 @@
 import React from 'react';
 
-import style from 'scss/components/Page1.scss';
+import style from 'scss/components/Page2.scss';
 
 import { dropdowntext } from 'Page2/Page2Text';
-import { Analyzer } from 'Page2/Analyzer/analyzer';
+import { Analyzer } from 'Analyzer/analyzer';
 import DropDownList from 'Page2/components/DropDownList';
+import AnalyzeButton from 'Page2/components/AnalyzeButton';
+import Top10 from 'Page2/components/Top10';
 
 export default class Page2Container extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       info: '',
       value: '',
-      ready: false
+      ready: false,
+      processing: false,
+      top10: []
     };
     this.dropdown = dropdowntext;
     this.optionUpdate = this.optionUpdate.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
   handleSubmit(event) {
     event.preventDefault();
-    Analyzer(this.state.value);
+    this.setState(() => {
+      return {
+        processing: true
+      };
+    });
+    Analyzer(this.state.value).then(result => {
+      this.setState(() => {
+        return {
+          processing: false,
+          top10: result
+        };
+      });
+    });
   }
   optionUpdate(value) {
     const { options } = this.dropdown;
@@ -36,21 +52,8 @@ export default class Page2Container extends React.Component {
     });
   }
   render() {
-    const { ready, info } = this.state;
-    let submitButton, infoArea;
-    if (!ready) {
-      submitButton = (
-        <button type="submit" className="button" disabled>
-          Analyze!
-        </button>
-      );
-    } else {
-      submitButton = (
-        <button type="submit" className="button">
-          Analyze!
-        </button>
-      );
-    }
+    const { ready, info, processing, top10 } = this.state;
+    let infoArea;
     if (info) {
       infoArea = (
         <div>
@@ -68,7 +71,8 @@ export default class Page2Container extends React.Component {
             optionUpdate={this.optionUpdate}
           />
           {infoArea}
-          {submitButton}
+          <AnalyzeButton ready={ready} processing={processing} />
+          <Top10 top10={top10} />
         </form>
       </div>
     );

src/Page2/Page2Text.js

@@ -11,15 +11,22 @@ export const dropdowntext = {
       value: 'option2',
       option: 'Last Week Titles',
       info: 'Top 10 most occurring words in the titles of exactly the last week',
-      ready: true
+      ready: false
     },
     {
       value: 'option3',
       option: 'Mega Search',
       info: 'Top 10 most occurring words in the last 600 stories',
       ready: false
+    },
+    {
+      value: 'option4',
+      option: 'Top List Search',
+      info: 'Top 10 most occurring words in the titles of top 500 stories',
+      ready: true
     }
   ]
 };
 
-export const OPTION2 = 'option2';
+
+export const OPTION4 = 'option4';