intital commit

Author: parthpatel303

.gitignore

@@ -0,0 +1,19 @@
+/.idea
+/.history
+/.vscode
+/.cache
+/.yarn
+.tmp
+node_modules
+build
+.gqlconfig
+.expo
+*.log
+*.sqlite3
+.DS_Store
+jsconfig.json
+public
+*.iml
+.npmrc
+swagger.yml
+deploy.sh

package-lock.json

@@ -0,0 +1,31 @@
+{
+  "name": "dynamic_points_react",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.tsx",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3",
+    "styled-components": "5.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
+    "@types/styled-components": "^5.1.14",
+    "typescript": "4.4.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

package.json

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+
+import streamData from "./data.json";
+import { formatData } from "./helpers";
+import StreamersList from "./components/ItemList";
+import { UPDATE_DATA_FREQUENCY } from "./constants";
+import './styles.css'
+
+function App() {
+  const [data, setData] = useState(formatData(streamData));
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setData(formatData);
+    }, UPDATE_DATA_FREQUENCY);
+    return function cleanup() {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return <StreamersList data={data} />;
+}
+
+export default App;

src/App.tsx

@@ -0,0 +1,61 @@
+import React, { memo } from "react";
+import styled from "styled-components";
+import ScoreRecords from "./ScoreRecords";
+import { RANKING_COLOR } from "../constants";
+
+const Container = styled.div`
+  background-color: #111;
+  position: absolute;
+  width: 90%;
+  height: 800px;
+  left: 50%;
+  top: 30px;
+  transform: translateX(-50%);
+`;
+
+
+const ItemRank = styled.div`
+  width: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  color: white;
+`;
+
+const ItemContainer = styled.div`
+  width: 96%;
+  height: 80px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  transition: all 0.3s ease 0s;
+  border-bottom: 1px solid #424242;`
+
+const ItemList = ({data}: any) => (
+    <div>
+        <Container>
+            {data.map((item: any) => {
+                return (
+                    <ItemContainer key={item.userID} style={{
+                        top: `${80 * ((item.ranking) - 1)}px`
+                    }}>
+                        <ItemRank style={{
+                            backgroundColor: RANKING_COLOR[item.ranking - 1] || "#8eb9f5"
+                        }}>{item.ranking}</ItemRank>
+                        <span style={{
+                            color: 'rgba(255,255,255,0.5)',
+                            paddingLeft: '20px'
+                        }}>{item.displayName}</span>
+                        <ScoreRecords score={item.score}/>
+                    </ItemContainer>
+                )
+            })}
+        </Container>
+    </div>
+);
+
+export default ItemList;

src/components/ItemList.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+
+import {
+  SCORE_INTERVAL,
+  SCORE_INTERVAL_NUMBER,
+  SCORE_DIVISOR,
+  POINT_COLOR
+} from "../constants";
+
+const StyledPoint = styled.div`
+  margin-left: auto;
+  color: ${POINT_COLOR};
+`;
+
+const ScoreRecords = ({ score }: any) => {
+  const [pt, setPt] = useState(score);
+  useEffect(() => {
+    let i = SCORE_INTERVAL_NUMBER;
+    const interval = setInterval(() => {
+      i -= 1;
+      setPt((n: number) => Math.floor(n + (score - n) / SCORE_DIVISOR));
+      if (i <= 0) {
+        setPt(score);
+        clearInterval(interval);
+      }
+    }, SCORE_INTERVAL);
+    return function cleanup() {
+      clearInterval(interval);
+    };
+  }, [score]);
+  return <StyledPoint>{pt}pt</StyledPoint>;
+};
+
+export default ScoreRecords;

src/components/ScoreRecords.tsx

@@ -0,0 +1,11 @@
+export const UPDATE_DATA_FREQUENCY = 1000;
+export const SCORE_INTERVAL = 1;
+export const SCORE_INTERVAL_NUMBER = 1;
+export const SCORE_DIVISOR = 10;
+export const RANDOM_MAX = 25000;
+export const RANDOM_MIN = 1000;
+export const NUMERATOR = 1;
+export const DENOMINATOR = 3;
+export const RANKING_COLOR = ["red", "orange", "grey"];
+
+export const POINT_COLOR = "orange";

src/constants.ts

@@ -0,0 +1,52 @@
+[
+  {
+    "userID": "u-1",
+    "displayName": "James N. Martin",
+    "score": 4210
+  },
+  {
+    "userID": "u-2",
+    "displayName": "Danny A. Austin",
+    "score": 45784
+  },
+  {
+    "userID": "u-3",
+    "displayName": "Paul K. Craig",
+    "score": 65852
+  },
+  {
+    "userID": "u-4",
+    "displayName": "Michelle J. Henderson",
+    "score": 45123
+  },
+  {
+    "userID": "u-5",
+    "displayName": "Kathleen M. Smith",
+    "score": 98745
+  },
+  {
+    "userID": "u-6",
+    "displayName": "Coreen S. Lee",
+    "score": 85697
+  },
+  {
+    "userID": "u-7",
+    "displayName": "Brad L. Coleman",
+    "score": 45789
+  },
+  {
+    "userID": "u-8",
+    "displayName": "Tracey B. Knight",
+    "score": 63258
+  },
+  {
+    "userID": "u-9",
+    "displayName": "Miranda L. Cohn",
+    "score": 1020
+  },
+  {
+    "userID": "u-10",
+    "displayName": "Sunny Soni",
+    "score": 157000
+  }
+]

src/data.json

@@ -0,0 +1,42 @@
+import { RANDOM_MAX, RANDOM_MIN, NUMERATOR, DENOMINATOR } from "./constants";
+
+
+const rank = (userID: any, arr: any) => {
+  let result = null;
+  arr.forEach((item: any, index: any) => {
+    if (item.userID === userID) {
+      result = index + 1;
+    }
+  });
+  return result;
+};
+
+
+const setScore = (key: any) => {
+  return function (objA: any, objB: any) {
+    const valueN = objA[key];
+    const valueM = objB[key];
+    if (valueN < valueM) return 1;
+    else if (valueN > valueM) return -1;
+    else return 0;
+  };
+};
+
+export const formatData = (arr: any) => {
+  const newArr = [...arr].map((item) => {
+    return {
+      ...item,
+      score: item.score +=
+        Math.floor(Math.random() * DENOMINATOR) < NUMERATOR
+          ? Math.floor(Math.random() * RANDOM_MAX + RANDOM_MIN)
+          : 0
+    };
+  });
+  newArr.sort(setScore("score"));
+  return arr.map((item: any) => {
+    return {
+      ...item,
+      ranking: rank(item.userID, newArr)
+    };
+  });
+};

src/helpers.ts

@@ -0,0 +1,6 @@
+import { render } from "react-dom";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+render(<App />, rootElement);

src/index.tsx

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/react-app-env.d.ts

@@ -0,0 +1,5 @@
+body {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  text-align: center;
+}

src/styles.css

@@ -0,0 +1,25 @@
+{
+  "include": [
+    "./src/**/*"
+  ],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "jsx": "react-jsx",
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}