Merge pull request #174 from mgilangjanuar/staging

add numbers in home page

server/src/api/v1/Utils.ts

@@ -1,6 +1,8 @@
 import { Request, Response } from 'express'
 import { readFileSync } from 'fs'
 import { lookup } from 'geoip-lite'
+import { Files } from '../../model/entities/Files'
+import { Users } from '../../model/entities/Users'
 import { Endpoint } from '../base/Endpoint'
 
 @Endpoint.API()
@@ -20,4 +22,15 @@ export class Utils {
   public async version(_: Request, res: Response): Promise<any> {
     return res.send({ version: JSON.parse(readFileSync(`${__dirname}/../../../package.json`, 'utf8')).version })
   }
+
+  @Endpoint.GET()
+  public async simpleAnalytics(_: Request, res: Response): Promise<any> {
+    return res.send({
+      analytics: {
+        users: await Users.count(),
+        files: await Files.count(),
+        premiumUsers: await Users.count({ where: { plan: 'premium' } }),
+      }
+    })
+  }
 }

web/package.json

@@ -13,6 +13,7 @@
     "js-cookie": "^3.0.1",
     "less": "^4.1.2",
     "lessc": "^1.0.2",
+    "millify": "^4.0.0",
     "mime-types": "^2.1.32",
     "pretty-bytes": "^5.6.0",
     "qs": "^6.10.1",
@@ -100,4 +101,4 @@
     "workbox-strategies": "^5.1.3",
     "workbox-streams": "^5.1.3"
   }
-}
+}

web/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined, CloudOutlined, DollarCircleOutlined, SecurityScanOutlined } from '@ant-design/icons'
-import { Avatar, Button, Carousel, Col, Image, Layout, Row, Space, Tooltip, Typography } from 'antd'
+import { Avatar, Button, Card, Carousel, Col, Image, Layout, Row, Space, Tooltip, Typography } from 'antd'
+import millify from 'millify'
 import React, { useEffect, useState } from 'react'
 import GitHubButton from 'react-github-btn'
 import { useHistory } from 'react-router-dom'
@@ -14,6 +15,7 @@ interface Props {
 
 const Home: React.FC<Props> = ({ me }) => {
   const { data } = useSWRImmutable('/github/contributors', fetcher)
+  const { data: dataAnalytics } = useSWRImmutable('/utils/simpleAnalytics', fetcher)
   const [visiblePreview, setVisiblePreview] = useState<boolean>()
   const history = useHistory()
 
@@ -190,16 +192,40 @@ const Home: React.FC<Props> = ({ me }) => {
         </Col>
       </Row>
 
-      <Row style={{ marginTop: '50px', padding: '100px 0 150px', textAlign: 'center' }}>
-        <Col lg={{ span: 6, offset: 9 }} md={{ span: 10, offset: 7 }} span={20} offset={2}>
-          <Typography.Paragraph>
+
+      <Row gutter={24} style={{ margin: '50px 20px 0', padding: '100px 0 0', textAlign: 'center' }}>
+        <Col lg={{ span: 8, offset: 8 }} md={{ span: 10, offset: 7 }} span={20} offset={2}>
+          <Typography.Title level={2}>
             Join now! 🚀
-          </Typography.Paragraph>
-          <Button shape="round" block href="#top" size="large" type="primary">
-            Getting Started
+          </Typography.Title>
+          <Button shape="round" block size="large" type="primary" onClick={() => history.push('/login')}>
+            Getting Started <ArrowRightOutlined />
           </Button>
         </Col>
       </Row>
+      <Row gutter={24} style={{ margin: '50px 20px 0', padding: '0 0 150px', textAlign: 'center' }}>
+        <Col lg={8} span={24} style={{ marginBottom: '20px' }}>
+          <Card title="Total Users" style={{ fontSize: '1rem' }}>
+            <Typography.Title style={{ textAlign: 'center', fontSize: '3em', fontWeight: 300 }}>
+              {millify(dataAnalytics?.analytics?.users || 0)}
+            </Typography.Title>
+          </Card>
+        </Col>
+        <Col lg={8} span={24} style={{ marginBottom: '20px' }}>
+          <Card title="Total Files" style={{ fontSize: '1rem' }}>
+            <Typography.Title ellipsis style={{ textAlign: 'center', fontSize: '3em', fontWeight: 300 }}>
+              {millify(dataAnalytics?.analytics?.files || 0)}
+            </Typography.Title>
+          </Card>
+        </Col>
+        <Col lg={8} span={24} style={{ marginBottom: '20px' }}>
+          <Card title="Total Premium Users" style={{ fontSize: '1rem' }}>
+            <Typography.Title style={{ textAlign: 'center', fontSize: '3em', fontWeight: 300 }}>
+              {millify(dataAnalytics?.analytics?.premiumUsers || 0)}
+            </Typography.Title>
+          </Card>
+        </Col>
+      </Row>
 
     </Layout.Content>
   </div>

yarn.lock

@@ -9756,6 +9756,13 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
+millify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/millify/-/millify-4.0.0.tgz#b4120a2af5761695d6a700bd61b741318635c0f8"
+  integrity sha512-Rf+nt4jca468yAqTIFfMSWMGiSqcdwotj3h25XvXjSIuRf4YWykuGDMj/SAOHrvjwrSNoQd0GC9vJCOG8a+BHg==
+  dependencies:
+    yargs "^17.0.1"
+
 mime-db@1.49.0, "mime-db@>= 1.43.0 < 2":
   version "1.49.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"