Toggle the status checks open state when statuses update.

Co-Authored-By: [email protected]

Author: Ashi Krishnan

preview-src/merge.tsx

@@ -2,16 +2,25 @@ import * as React from 'react';
 import { PullRequest } from './cache';
 import PullRequestContext from './context';
 import { groupBy } from 'lodash';
-import { useContext, useReducer, useRef, useState } from 'react';
+import { useContext, useReducer, useRef, useState, useEffect } from 'react';
 import { PullRequestStateEnum, MergeMethod } from '../src/github/interface';
 import { checkIcon, deleteIcon, pendingIcon } from './icon';
 import { Avatar, } from './user';
 import { nbsp } from './space';
 
 export const StatusChecks = (pr: PullRequest) => {
 	const { state, status, mergeable } = pr;
-	const [showDetails, toggleDetails] = useReducer(show => !show,
-		status.statuses.some(s => s.state === 'failure'));
+	const [showDetails, toggleDetails] = useReducer(
+		show => !show,
+		status.statuses.some(s => s.state === 'failure')) as [boolean, () => void];
+
+	useEffect(() => {
+		if (status.statuses.some(s => s.state === 'failure')) {
+			if (!showDetails) { toggleDetails(); }
+		} else {
+			if (showDetails) { toggleDetails(); }
+		}
+	}, status.statuses);
 
 	return <div id='status-checks'>{
 		state === PullRequestStateEnum.Merged