chore: Graph , UpVote, Hide feature added

Author: Ashish Kumar

.dockerignore

@@ -4,5 +4,4 @@
 /.git
 .gitignore
 /env
-.env
-dev.env
+.env

.env

@@ -1,4 +1,10 @@
-PORT=3000
-API_URL=https://hn.algolia.com/
-HOST_URL=http://localhost:3000
-TAG=latest
+# add only those variables which are used in docker-compose or Dockerfile
+# These are the default ENV VARS for docker
+
+# If you add multiple env files in docker-compose,
+# default variables will be override
+
+PORT=5000
+TAG=latest
+DOCKER_USERNAME=connectashishk
+DOCKER_IMAGE_NAME=ssr-build-stream

.eslintrc

@@ -30,6 +30,7 @@
     },
     "plugins": ["react"],
     "rules": {
+        "no-param-reassign": 0,
         "no-console": "off",
         "semi": [
             "error", "always"
@@ -46,6 +47,7 @@
                 "checkAttributes": true
             }
         ],
+        "class-methods-use-this": 0,
         "max-len": 0,
         "react/jsx-uses-react": "error",
         "react/jsx-uses-vars": "error",

.github/workflows/lint.yml

@@ -1,24 +1,103 @@
-/* eslint-disable import/prefer-default-export */
 import {
     FETCH_STORIES_FAILURE,
     FETCH_STORIES_PENDING,
-    FETCH_STORIES_SUCCESS
+    FETCH_STORIES_SUCCESS,
+    UPVOTE_STORY,
+    HIDE_STORY
 } from "../constants/ActionTypes";
 
-export const fetchStories = (page = 0) => async (dispatch, getState, api) => {
+const appName = require("../../package.json").name;
+
+const upVoteTableName = `${appName}-upvotes`;
+const hideStoryTableName = `${appName}-hidden`;
+
+export const updateListWithPersistentData = (data = {}) => async (dispatch, getState, { cookies }) => {
+    try {
+        const hiddenStories = cookies.get(hideStoryTableName) || {};
+        const upVoteStories = cookies.get(upVoteTableName) || {};
+        return {
+            ...data,
+            hits: data.hits.map((obj) => {
+                const myObj = obj;
+                if (upVoteStories && upVoteStories[myObj.objectID]) {
+                    myObj.points = parseInt(myObj.points, 10) + parseInt(upVoteStories[myObj.objectID], 10);
+                }
+                if (hiddenStories && hiddenStories[myObj.objectID]) {
+                    myObj.hidden = true;
+                }
+                return myObj;
+            })
+        };
+    } catch (e) {
+        console.log("Running on server, Will Update on App Mount", e);
+        return data;
+    }
+};
+
+export const updateStoriesInStore = (data = {}) => async (dispatch) => {
+    dispatch({
+        type: FETCH_STORIES_SUCCESS,
+        payload: data
+    });
+};
+
+export const fetchStories = (page = 0) => async (dispatch, getState, { api }) => {
     try {
         dispatch({ type: FETCH_STORIES_PENDING });
 
         const res = await api.get(`/search?page=${page}&hitsPerPage=30`);
-        // console.log(res);
-        dispatch({
-            type: FETCH_STORIES_SUCCESS,
-            payload: res.data
-        });
+        const modifiedData = await dispatch(updateListWithPersistentData(res.data));
+        dispatch(updateStoriesInStore(modifiedData));
     } catch (err) {
         console.log(err);
         dispatch({
             type: FETCH_STORIES_FAILURE
         });
     }
 };
+
+export const updateVoteInPersistent = (story) => async (dispatch, getState, { cookies }) => {
+    try {
+        const votes = cookies.get(upVoteTableName);
+        const votesObj = votes || {};
+        if (votesObj[story.objectID]) {
+            votesObj[story.objectID] += 1;
+        } else {
+            votesObj[story.objectID] = 1;
+        }
+        cookies.set(upVoteTableName, JSON.stringify(votesObj), { path: "/" });
+    } catch (e) {
+        console.log(e);
+    }
+};
+
+export const hideStoryInPersistent = (story) => async (dispatch, getState, { cookies }) => {
+    try {
+        const hiddenStories = cookies.get(hideStoryTableName);
+        const stories = hiddenStories || {};
+        stories[story.objectID] = true;
+        cookies.set(hideStoryTableName, JSON.stringify(stories), { path: "/" });
+    } catch (e) {
+        console.log(e);
+    }
+};
+
+export const updateUpVote = (story) => async (dispatch) => {
+    try {
+        dispatch(updateVoteInPersistent(story));
+        dispatch({
+            type: UPVOTE_STORY,
+            payload: story.objectID
+        });
+    } catch (e) {
+        console.log(e);
+    }
+};
+
+export const hideStory = (story) => async (dispatch) => {
+    dispatch(hideStoryInPersistent(story));
+    dispatch({
+        type: HIDE_STORY,
+        payload: story.objectID
+    });
+};

build.sh

@@ -0,0 +1,130 @@
+import React, { Component } from "react";
+import loadable from "@loadable/component";
+import Highcharts from "highcharts";
+import { connect } from "react-redux";
+
+const HighchartsReact = loadable(() => import(/* webpackChunkName: "reacthighchart" */"highcharts-react-official"));
+
+class Graph extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hoverData: null
+        };
+    }
+
+    setHoverData = (e) => {
+        // The chart is not updated because `chartOptions` has not changed.
+        this.setState({ hoverData: e.target.category });
+    }
+
+    updateSeries = () => {
+        // The chart is updated only with new options.
+        this.setState({
+            chartOptions: {
+                series: [
+                    { data: [Math.random() * 5, 2, 1] }
+                ]
+            }
+        });
+    }
+
+    render() {
+        const { data } = this.props;
+        const votes = [];
+        const ids = [];
+        data.forEach((obj) => {
+            if (obj.title) {
+                votes.push(obj.points);
+                ids.push(obj.objectID);
+            }
+            return true;
+        });
+        const chartOptions = {
+            responsive: {
+                rules: [{
+                    condition: {
+                        maxWidth: 500
+                    },
+                    chartOptions: {
+                        chart: {
+                            spacing: [15, 10, 15, 10]
+                        },
+                        yAxis: {
+                            labels: {
+                                align: "left",
+                                x: 0,
+                                y: -5
+                            },
+                            title: {
+                                text: null
+                            }
+                        },
+                        subtitle: {
+                            text: null
+                        },
+                        credits: {
+                            enabled: false
+                        }
+                    }
+                }]
+            },
+            credits: {
+                enabled: false
+            },
+            title: {
+                text: undefined
+            },
+            legend: {
+                enabled: false
+            },
+            yAxis: {
+                title: {
+                    text: "Votes",
+                    style: {
+                        fontWeight: "bold"
+                    }
+                }
+            },
+            xAxis: {
+                title: {
+                    text: "ID",
+                    y: 10,
+                    style: {
+                        fontWeight: "bold"
+                    }
+                },
+                categories: ids,
+                labels: {
+                    rotation: -90
+                }
+            },
+            series: [
+                { data: votes }
+            ],
+            plotOptions: {
+                series: {
+                    point: {
+                        events: {
+                            mouseOver: this.setHoverData.bind(this)
+                        }
+                    }
+                }
+            }
+        };
+        return (
+            <div style={{ width: "100%" }}>
+                <HighchartsReact
+                    allowChartUpdate={true}
+                    highcharts={Highcharts}
+                    options={chartOptions}
+                />
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = ({ stories }) => ({
+    data: stories.data.hits
+});
+export default connect(mapStateToProps, {})(Graph);

client/actions/index.js

@@ -28,9 +28,10 @@ const ListItem = (props) => {
         points, // Vote Count
         title,
         url,
-        author
+        author,
+        hidden
     } = props.data;
-    if (!title) {
+    if (!title || hidden) {
         return null;
     }
     const className = getClassForPoints(points);
@@ -39,7 +40,9 @@ const ListItem = (props) => {
             <td className="row-item__td">{numComments || "-"}</td>
             <td className={`row-item__td ${className}`}>{points || "-"}</td>
             <td className="row-item__td">
-                <span className="caret-upvote"></span>
+                <div className="upvote-btn-wrapper" onClick={(e) => props.onUpVote(e, props.data)}>
+                    <span className="caret-upvote" />
+                </div>
             </td>
             <td className="row-item__td">
                 <div className="row-item__info clearfix">
@@ -55,7 +58,7 @@ const ListItem = (props) => {
                         </div>
                         <div className="row-item__info--meta-block">
                             <small>
-                                <a href="#">hide</a>
+                                <a href="#" onClick={(e) => props.hideStory(e, props.data)}>hide</a>
                             </small>
                         </div>
                     </div>