Implemented followers list

.gitignore

@@ -2,3 +2,5 @@ build/
 node_modules
 frontend/dist
 frontend/wailsjs
+
+.prettierignore

NOTES.md

@@ -1,5 +1,16 @@
 # Doing
 
+Create loading indicator before API is called
+
+If api query returns error:
+- stop interval
+- show error to user
+- wait for user to press "retry" button to restart interval
+
+Settings
+- allow user to change api key
+- allow user to change api interval time
+
 Get user's: username, password, stream key
 Query API
 Display followers, subscribers, etc.
@@ -7,4 +18,4 @@ Display followers, subscribers, etc.
 User settings:
 - API query timer (default: 2s)
 
-# To Do
+# To Do

app.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 
 	"github.com/tylertravisty/go-utils/random"
+	rumblelivestreamlib "github.com/tylertravisty/rumble-livestream-lib-go"
 )
 
 // App struct
@@ -33,3 +34,16 @@ func (a *App) Greet(name string) string {
 	//return fmt.Sprintf("Hello %s, It's show time!", name)
 	return fmt.Sprintf("Hello %s, It's show time!", random)
 }
+
+func (a *App) QueryAPI(url string) (*rumblelivestreamlib.Followers, error) {
+	fmt.Println("QueryAPI")
+	client := rumblelivestreamlib.Client{StreamKey: url}
+	resp, err := client.Request()
+	if err != nil {
+		// TODO: log error
+		fmt.Println("client.Request err:", err)
+		return nil, fmt.Errorf("API request failed")
+	}
+
+	return &resp.Followers, nil
+}

frontend/src/assets/icons/index.jsx

@@ -0,0 +1,5 @@
+import eye from './eye.png';
+import eye_slash from './eye-slash.png';
+
+export const Eye = eye;
+export const EyeSlash = eye_slash;

frontend/src/screens/Dashboard.css

@@ -3,6 +3,80 @@
     background-color: #f3f5f8;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     height: 100vh;
+    width: 100%;
+}
+
+.followers {
+    background-color: #061726;
+    height: 100%;
+    width: 100%;
+}
+
+.followers-list {
+    overflow-y: auto;
+}
+
+.followers-list-follower {
+    border-bottom: 1px solid #82b1ff;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    font-family: sans-serif;
+    justify-content: space-between;
+    padding: 10px 20px;
+}
+
+.followers-list-follower-username {
+    font-weight: bold;
+}
+
+.followers-list-follower-date {
+    font-family: monospace;
+}
+
+.followers-header {
+    align-items: center;
+    border-bottom: 1px solid #82b1ff;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    padding: 10px 20px;
+}
+
+.followers-header-title {
+    color: white;
+    font-family: sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    padding-bottom: 10px;
+    text-transform: uppercase;
+}
+
+.followers-header-highlights {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    width: 100%;
+}
+
+.followers-header-highlight {
+    align-items: center;
+    color: white;
+    display: flex;
+    background-color: #75a54b;
+    border-radius: 0.5rem;
+    flex-direction: column;
+    font-family: sans-serif;
+    font-weight: bold;
+    min-width: 50px;
+    padding: 10px;
+}
+
+.followers-header-highlight-count {
+    font-size: 16px;
+}
+
+.followers-header-highlight-description {
+    font-size: 12px;
 }

frontend/src/screens/Dashboard.jsx

@@ -1,14 +1,162 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { QueryAPI } from '../../wailsjs/go/main/App';
 
 import './Dashboard.css';
 
 function Dashboard() {
     const location = useLocation();
     const [streamKey, setStreamKey] = useState(location.state.streamKey);
+    const [followers, setFollowers] = useState({});
+    const [totalFollowers, setTotalFollowers] = useState('-');
+    const [channelFollowers, setChannelFollowers] = useState('-');
+    const [latestFollower, setLatestFollower] = useState('-');
+    const [recentFollowers, setRecentFollowers] = useState([]);
+
+    // useEffect(() => {
+    //     QueryAPI(streamKey)
+    //         .then((response) => {
+    //             console.log(response);
+    //             setFollowers(response);
+    //             setChannelFollowers(response.num_followers);
+    //             setTotalFollowers(response.num_followers_total);
+    //             setLatestFollower(response.latest_follower.username);
+    //             setRecentFollowers(response.recent_followers);
+    //         })
+    //         .catch((e) => console.log('Error:', e));
+    // }, []);
+
+    useEffect(() => {
+        let interval = setInterval(() => {
+            console.log('Query API');
+            QueryAPI(streamKey)
+                .then((response) => {
+                    console.log(response);
+                    setFollowers(response);
+                    setChannelFollowers(response.num_followers);
+                    setTotalFollowers(response.num_followers_total);
+                    setLatestFollower(response.latest_follower.username);
+                    setRecentFollowers(response.recent_followers);
+                })
+                .catch((e) => console.log('Error:', e));
+        }, 10000);
+
+        return () => {
+            clearInterval(interval);
+        };
+    }, []);
+
+    const dateDate = (date) => {
+        const options = { month: 'short' };
+        let month = new Intl.DateTimeFormat('en-US', options).format(date);
+        let day = date.getDay();
+        return month + ' ' + day;
+    };
+
+    const dateDay = (date) => {
+        let now = new Date();
+        let today = now.getDay();
+        switch (date.getDay()) {
+            case 0:
+                return 'Sunday';
+            case 1:
+                return 'Monday';
+            case 2:
+                return 'Tuesday';
+            case 3:
+                return 'Wednesday';
+            case 4:
+                return 'Thursday';
+            case 5:
+                return 'Friday';
+            case 6:
+                return 'Saturday';
+        }
+    };
+
+    const dateTime = (date) => {
+        let now = new Date();
+        let today = now.getDay();
+        let day = date.getDay();
+
+        if (today !== day) {
+            return dateDay(date);
+        }
+
+        let hours24 = date.getHours();
+        let hours = hours24 % 12 || 12;
+
+        let minutes = date.getMinutes();
+
+        let mer = 'pm';
+        if (hours24 < 12) {
+            mer = 'am';
+        }
+
+        return hours + ':' + minutes + ' ' + mer;
+    };
+
+    const dateString = (d) => {
+        let now = new Date();
+        let date = new Date(d);
+        // Fix Rumble's timezone problem
+        date.setHours(date.getHours() - 4);
+        let diff = now - date;
+        switch (true) {
+            case diff < 60000:
+                return 'Now';
+            case diff < 3600000:
+                let minutes = Math.floor(diff / 1000 / 60);
+                let postfix = ' minutes ago';
+                if (minutes == 1) {
+                    postfix = ' minute ago';
+                }
+                return minutes + postfix;
+            case diff < 86400000:
+                return dateTime(date);
+            case diff < 604800000:
+                return dateDay(date);
+            default:
+                return dateDate(date);
+        }
+        console.log('Diff:', diff);
+        return d;
+    };
+
     return (
         <div id='Dashboard'>
-            <span>Dashboard: {streamKey}</span>
+            <span>Dashboard:</span>
+            <div className='followers'>
+                <div className='followers-header'>
+                    <span className='followers-header-title'>Followers</span>
+                    <div className='followers-header-highlights'>
+                        <div className='followers-header-highlight'>
+                            <span className='followers-header-highlight-count'>
+                                {channelFollowers}
+                            </span>
+                            <span className='followers-header-highlight-description'>Channel</span>
+                        </div>
+                        <div className='followers-header-highlight'>
+                            <span className='followers-header-highlight-count'>
+                                {totalFollowers}
+                            </span>
+                            <span className='followers-header-highlight-description'>Total</span>
+                        </div>
+                    </div>
+                </div>
+                <div className='followers-list'>
+                    {recentFollowers.map((follower, index) => (
+                        <div className='followers-list-follower'>
+                            <span className='followers-list-follower-username'>
+                                {follower.username}
+                            </span>
+                            <span className='followers-list-follower-date'>
+                                {dateString(follower.followed_on)}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            </div>
         </div>
     );
 }

frontend/src/screens/SignIn.css

@@ -23,13 +23,19 @@
 }
 
 .signin-input {
-    border: 2px solid #D6E0EA;
+    border-bottom: 2px solid #D6E0EA;
+    border-left: 2px solid #D6E0EA;
+    border-right: none;
+    border-top: 2px solid #D6E0EA;
     border-radius: 10rem 0rem 0rem 10rem;
     background-color: white;
     color: #061726;
     outline: none;
-    padding: 0.5rem 1rem;
+    padding-bottom: 0.5rem;
-    width: 80%;
+    padding-left: 1rem;
+    padding-right: 0;
+    padding-top: 0.5rem;
+    width: 70%;
 }
 
 .signin-button {
@@ -47,6 +53,27 @@
     background-color: #77b23b;
 }
 
+.signin-show {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    border-bottom: 2px solid #D6E0EA;
+    border-left: none;
+    border-right: 2px solid #D6E0EA;
+    border-top: 2px solid #D6E0EA;
+    color: #061726;
+    cursor: pointer;
+    font-weight: bold;
+    text-decoration: none;
+    width: 10%;
+}
+
+.signin-show-icon {
+    height: 16px;
+    width: 16px;
+}
+
 .signin-label {
     font-family: sans-serif;
     font-weight: bold;

frontend/src/screens/SignIn.jsx

@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { NavDashboard } from './Navigation';
+import { Eye, EyeSlash } from '../assets/icons';
 import './SignIn.css';
 
 function SignIn() {
     const navigate = useNavigate();
     const [streamKey, setStreamKey] = useState('');
     const updateStreamKey = (event) => setStreamKey(event.target.value);
+    const [showStreamKey, setShowStreamKey] = useState(false);
+    const updateShowStreamKey = () => setShowStreamKey(!showStreamKey);
 
     const saveStreamKey = () => {
         navigate(NavDashboard, { state: { streamKey: streamKey } });
@@ -26,9 +29,15 @@ function SignIn() {
                         className='signin-input'
                         onChange={updateStreamKey}
                         placeholder='Stream Key'
-                        type='text'
+                        type={showStreamKey ? 'text' : 'password'}
                         value={streamKey}
                     />
+                    <button className='signin-show' onClick={updateShowStreamKey}>
+                        <img
+                            className='signin-show-icon'
+                            src={showStreamKey ? EyeSlash : Eye}
+                        ></img>
+                    </button>
                     <button className='signin-button' onClick={saveStreamKey}>
                         Save
                     </button>

go.mod

@@ -4,6 +4,7 @@ go 1.19
 
 require (
 	github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909
+	github.com/tylertravisty/rumble-livestream-lib-go v0.0.0-20231213162428-b33f413975bb
 	github.com/wailsapp/wails/v2 v2.7.1
 )
 
@@ -24,6 +25,7 @@ require (
 	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/rivo/uniseg v0.4.4 // indirect
+	github.com/robertkrimen/otto v0.2.1 // indirect
 	github.com/samber/lo v1.38.1 // indirect
 	github.com/tkrajina/go-reflector v0.5.6 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
@@ -35,6 +37,7 @@ require (
 	golang.org/x/net v0.17.0 // indirect
 	golang.org/x/sys v0.13.0 // indirect
 	golang.org/x/text v0.13.0 // indirect
+	gopkg.in/sourcemap.v1 v1.0.5 // indirect
 )
 
 // replace github.com/wailsapp/wails/v2 v2.7.1 => /home/tyler/dev/go/pkg/mod

go.sum

@@ -44,6 +44,8 @@ github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZN
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
 github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/robertkrimen/otto v0.2.1 h1:FVP0PJ0AHIjC+N4pKCG9yCDz6LHNPCwi/GKID5pGGF0=
+github.com/robertkrimen/otto v0.2.1/go.mod h1:UPwtJ1Xu7JrLcZjNWN8orJaM5n5YEtqL//farB5FlRY=
 github.com/samber/lo v1.38.1 h1:j2XEAqXKb09Am4ebOg31SpvzUTTs6EN3VfgeLUhPdXM=
 github.com/samber/lo v1.38.1/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@@ -53,6 +55,8 @@ github.com/tkrajina/go-reflector v0.5.6 h1:hKQ0gyocG7vgMD2M3dRlYN6WBBOmdoOzJ6njQ
 github.com/tkrajina/go-reflector v0.5.6/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
 github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909 h1:xrjIFqzGQXlCrCdMPpW6+SodGFSlrQ3ZNUCr3f5tF1g=
 github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909/go.mod h1:2W31Jhs9YSy7y500wsCOW0bcamGi9foQV1CKrfvfTxk=
+github.com/tylertravisty/rumble-livestream-lib-go v0.0.0-20231213162428-b33f413975bb h1:nqq0eTr8ocCaENdoryAt9T3g5xJgwcXMW7pYAztb1lc=
+github.com/tylertravisty/rumble-livestream-lib-go v0.0.0-20231213162428-b33f413975bb/go.mod h1:YrfW5N6xVozOzubzfNNsy+v0MIL2GPi9Kx3mTZ/Q9zI=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
@@ -89,6 +93,8 @@ golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k=
 golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/sourcemap.v1 v1.0.5 h1:inv58fC9f9J3TK2Y2R1NPntXEn3/wjWHkonhIUODNTI=
+gopkg.in/sourcemap.v1 v1.0.5/go.mod h1:2RlvNNSMglmRrcvhfuzp4hQHwOtjxlbjX7UPY/GXb78=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=