state fix

packages/app/src/components/Sidebar/RecentChanges.jsx

@@ -131,8 +131,6 @@ class RecentChanges extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      // TODO: 7092 connect to state
-      // eslint-disable-next-line react/no-unused-state
       isRecentChangesSidebarSmall: false,
     };
     this.reloadData = this.reloadData.bind(this);
@@ -161,8 +159,6 @@ class RecentChanges extends React.Component {
   retrieveSizePreferenceFromLocalStorage() {
     if (window.localStorage.isRecentChangesSidebarSmall === 'true') {
       this.setState({
-        // TODO: 7092 connect to state
-        // eslint-disable-next-line react/no-unused-state
         isRecentChangesSidebarSmall: true,
       });
     }
@@ -170,16 +166,12 @@ class RecentChanges extends React.Component {
 
   changeSizeHandler = (e) => {
     this.setState({
-      // TODO: 7092 connect to state
-      // eslint-disable-next-line react/no-unused-state
       isRecentChangesSidebarSmall: e.target.checked,
     });
     window.localStorage.setItem('isRecentChangesSidebarSmall', e.target.checked);
   }
 
   render() {
-    // const { LargePageItem } = this;
-    // const { SmallPageItem } = this;
     const { t } = this.props;
     const { recentlyUpdatedPages } = this.props.appContainer.state;
 
@@ -206,8 +198,9 @@ class RecentChanges extends React.Component {
         </div>
         <div className="grw-sidebar-content-body grw-recent-changes p-3">
           <ul className="list-group list-group-flush">
-            {/* tentative */}
-            { recentlyUpdatedPages.map(page => <LargePageItem key={page.id} page={page} />) }
+            {recentlyUpdatedPages.map(page => (this.state.isRecentChangesSidebarSmall
+              ? <SmallPageItem key={page.id} page={page} />
+              : <LargePageItem key={page.id} page={page} />))}
           </ul>
         </div>
       </>