Added RaidPal Integration - Easily view your lineup and channel status when participating in raid trains!

Notable Changes
- Added RaidPal tab with event selection and lineup information
- Added follow status to the lineup, so you never need to be _that_ person who follows after raiding
-

Change Log
- AppReducer.js: Added showAmPm preference
- API.js: Also accept text/javascript as a json mimetype
- Loading.js: Added children prop to display errors while loading (if a user has no followers, Twitch API will report 500 Internal Server Error)
- Loading.scss: Fix alerts to the top of the UI
- FollowerActions.js: Added actions for managing follower state
- FollowerReducer.js: Added follower state
- NotFollowingBadgeOfShame.js: Added for indicate that you are not following the given channel
- RaidPalActions.js: Added actions for managing raidpal user and event state, and event streams
- RaidPalReducer.js: Added raidpal user, event, and stream state
- RaidPalView.js: Added RaidPal event / lineup view
- RaidPalView.scss: Added RaidPal event page styling
- StreamInfoModal.js:
  - Refactored to reusable component (was in StreamList)
  - Added fallbacks to show channel info when offline
- StreamList.js:
  - Refactored selected stream modal to own component
  - Exported REFRESH_INTERVAL for use in the RP view
  - Added selectedStreamUserId for modal channel fallback
  - Added fallback to update selectedStream if the stream crashes and a new stream starts
  - Added error to loading view in the event the user has no followed channels (Twitch returns 500 ISE)
  - Added sad message when the user has no followed channels online
  - Added RaidPal view
- StreamList.scss: Added styling for alert links, nav tweaks, and channel modal
- reducers.js: Added raidpal and followers reducers to app state
- package.json: Bumped to 2.0.0 and added react-show-more-text dependency

Author: kfitzgerald

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dirty-raid",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/kfitzgerald/dirty-raid"
@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
+    "react-show-more-text": "^1.6.2",
     "redux-localstorage": "^0.4.1",
     "redux-thunk": "^2.4.2",
     "sass": "^1.60.0",

package.json

@@ -6,7 +6,8 @@ export const initialState = {
     preferences: {
         showTitles: true,
         showTags: true,
-        showProfileImg: true
+        showProfileImg: true,
+        showAmPm: true
     }
 };
 

src/app/AppReducer.js

@@ -44,7 +44,7 @@ export function doApiCall(method, path, { payload, query, oauth, bearer, clientI
 
     // Build a fetch request using the given params and options
     const headers = new Headers({
-        'Accept': 'application/json'    // we always want JSON
+        'Accept': 'application/json,text/javascript'    // we always want JSON
     });
 
     const fetchArgs = {
@@ -90,7 +90,7 @@ export function doApiCall(method, path, { payload, query, oauth, bearer, clientI
             .then(res => {
                 // Some API calls do not return JSON or a body at all - only JSON-decode when necessary
                 const contentType = res.headers.get("Content-Type") || '';
-                if (contentType.includes('json')) {
+                if (contentType.includes('json') || contentType.includes('javascript')) {
                     return res.json();
                 } else {
                     // no content - mock a response

src/common/API.js

@@ -6,12 +6,13 @@ import './Loading.scss';
  * @return {JSX.Element}
  * @constructor
  */
-function Loading() {
+function Loading({ children }) {
     return (
         <div className="Loading">
             <header className="Loading-header">
                 <img src={logo} className="Loading-logo" alt="logo" />
             </header>
+            {children}
         </div>
     );
 }

src/common/Loading.js

@@ -1,5 +1,12 @@
 .Loading {
   text-align: center;
+
+  .alert {
+    position: absolute;
+    top: 0;
+    width: 96vw;
+    margin: 2vw;
+  }
 }
 
 .Loading-logo {

src/common/Loading.scss

@@ -0,0 +1,143 @@
+import {apiGet} from "../common/API";
+import {revokeToken} from "../session/SessionActions";
+
+//region Twitch Get Followed Channels
+
+export const REQUEST_FOLLOWED_CHANNELS = 'REQUEST_FOLLOWED_CHANNELS';
+export function requestFollowedChannels() {
+    return {
+        type: REQUEST_FOLLOWED_CHANNELS
+    };
+}
+
+export const RECEIVE_FOLLOWED_CHANNELS_SUCCESS = 'RECEIVE_FOLLOWED_CHANNELS_SUCCESS';
+export function requestFollowedChannelsSuccess(data) {
+    return {
+        type: RECEIVE_FOLLOWED_CHANNELS_SUCCESS,
+        lastUpdated: Date.now(),
+        data
+    };
+}
+
+export const RECEIVE_FOLLOWED_CHANNELS_ERROR = 'RECEIVE_FOLLOWED_CHANNELS_ERROR';
+export function receiveFollowedChannelsError(error) {
+    return {
+        type: RECEIVE_FOLLOWED_CHANNELS_ERROR,
+        error
+    };
+}
+
+export const ENQUEUE_FOLLOWED_CHANNELS = 'ENQUEUE_FOLLOWED_CHANNELS';
+export function enqueueFollowedChannels(user_ids) {
+    return {
+        type: ENQUEUE_FOLLOWED_CHANNELS,
+        user_ids
+    };
+}
+
+export function fetchFollowedChannels(broadcaster_ids) {
+    return async (dispatch, getState) => {
+        const { followers } = getState();
+        const { cache, queue } = followers;
+
+        // only queue if user is not following this broadcaster and not cached
+        const filteredIds = broadcaster_ids.filter(broadcaster_id => {
+            return (!broadcaster_id || // fetch all
+                !cache[broadcaster_id] || // not cached?
+                !cache[broadcaster_id].followed_at) && // not followed
+                queue.indexOf(broadcaster_id) < 0 // not queued
+            ;
+        });
+
+        if (!filteredIds.length) return;
+
+        // Add to the queue
+        dispatch(enqueueFollowedChannels(filteredIds));
+        dispatch(_fetchFollowedChannels());
+    };
+}
+
+
+function _fetchFollowedChannels(callback=() => {}) {
+    return async (dispatch, getState) => {
+        const { followers, session } = getState();
+        const { queue, isFetching } = followers;
+
+        if (isFetching) return; // no dup fetching
+        if (!session.data) return; // no auth, no request
+        if (!queue.length) return; // no users to fetch
+
+        const { access_token } = session.token;
+        const { user_id } = session.data;
+
+        // lock out dup fetch requests
+        dispatch(requestFollowedChannels());
+
+        const pageSize = 100;
+        let followList = [];
+        let broadcaster_id;
+        while (queue.length > 0) {
+
+            broadcaster_id = queue.shift();
+
+            let done = false, body, error, after, query;
+            while (!done) { // ooo scary!
+
+                // Build query
+                query = { user_id, first: pageSize, /*after: ...*/ };
+                if (broadcaster_id) query.broadcaster_id = broadcaster_id;
+                if (after) query.after = after;
+
+                // Execute request
+                ({ error, body } = await apiGet('https://api.twitch.tv/helix/channels/followed', { query, bearer: access_token})
+                        .then(body => {
+                            return { body, error: null };
+                        }, error => {
+                            return { error };
+                        })
+                );
+
+
+                // If the request failed, handle it
+                if (error) {
+                    // If twitch auth fails - it's likely due to an expired token
+                    // Clear the session!
+                    if (error.status === 401) {
+                        dispatch(revokeToken());
+                    }
+
+                    dispatch(receiveFollowedChannelsError(error));
+                    callback(error);
+                    dispatch(_fetchFollowedChannels());
+                    return;
+
+                } else {
+                    // Append the page to the results
+                    if (broadcaster_id && body.data.length === 0) {
+                        // create a stub record for users that are not following
+                        body.data = [
+                            {
+                                broadcaster_id,
+                            }
+                        ];
+                    }
+                    followList = followList.concat(body.data);
+
+                    // Check if there is another page to fetch
+                    after = body.pagination.cursor;
+                    done = !body.pagination.cursor;
+                }
+            }
+
+        }
+
+        // success - update the cache and release the fetch lock
+        dispatch(requestFollowedChannelsSuccess(followList));
+        callback(null, followList);
+
+        // do another follow up just in case the queue is still long
+        dispatch(_fetchFollowedChannels());
+    };
+}
+
+//endregion