notifications and style-sheet > function component

lib/components/notifications.tsx

@@ -7,93 +7,90 @@ import type {NotificationsProps} from '../hyper';
 
 const Notification = decorate(Notification_, 'Notification');
 
-export default class Notifications extends React.PureComponent<NotificationsProps> {
-  render() {
+const Notifications: React.FC<NotificationsProps> = (props) => {
   return (
     <div className="notifications_view">
-        {this.props.customChildrenBefore}
-        {this.props.fontShowing && (
+      {props.customChildrenBefore}
+      {props.fontShowing && (
         <Notification
           key="font"
           backgroundColor="rgba(255, 255, 255, .2)"
-            text={`${this.props.fontSize}px`}
+          text={`${props.fontSize}px`}
           userDismissable={false}
-            onDismiss={this.props.onDismissFont}
+          onDismiss={props.onDismissFont}
           dismissAfter={1000}
         />
       )}
 
-        {this.props.resizeShowing && (
+      {props.resizeShowing && (
         <Notification
           key="resize"
           backgroundColor="rgba(255, 255, 255, .2)"
-            text={`${this.props.cols}x${this.props.rows}`}
+          text={`${props.cols}x${props.rows}`}
           userDismissable={false}
-            onDismiss={this.props.onDismissResize}
+          onDismiss={props.onDismissResize}
           dismissAfter={1000}
         />
       )}
 
-        {this.props.messageShowing && (
+      {props.messageShowing && (
         <Notification
           key="message"
           backgroundColor="#FE354E"
           color="#fff"
-            text={this.props.messageText}
-            onDismiss={this.props.onDismissMessage}
-            userDismissable={this.props.messageDismissable}
+          text={props.messageText}
+          onDismiss={props.onDismissMessage}
+          userDismissable={props.messageDismissable}
         >
-            {this.props.messageURL
-              ? [
-                  this.props.messageText,
-                  ' (',
+          {props.messageURL ? (
+            <>
+              {props.messageText} (
               <a
-                    key="link"
                 style={{color: '#fff'}}
                 onClick={(ev) => {
                   void window.require('electron').shell.openExternal(ev.currentTarget.href);
                   ev.preventDefault();
                 }}
-                    href={this.props.messageURL}
+                href={props.messageURL}
               >
                 more
-                  </a>,
-                  ') '
-                ]
-              : null}
+              </a>
+              )
+            </>
+          ) : null}
         </Notification>
       )}
 
-        {this.props.updateShowing && (
+      {props.updateShowing && (
         <Notification
           key="update"
           backgroundColor="#18E179"
           color="#000"
-            text={`Version ${this.props.updateVersion} ready`}
-            onDismiss={this.props.onDismissUpdate}
+          text={`Version ${props.updateVersion} ready`}
+          onDismiss={props.onDismissUpdate}
           userDismissable
         >
-            Version <b>{this.props.updateVersion}</b> ready.
-            {this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (
+          Version <b>{props.updateVersion}</b> ready.
+          {props.updateNote && ` ${props.updateNote.trim().replace(/\.$/, '')}`} (
           <a
             style={{color: '#000'}}
             onClick={(ev) => {
               void window.require('electron').shell.openExternal(ev.currentTarget.href);
               ev.preventDefault();
             }}
-              href={`https://github.com/vercel/hyper/releases/tag/${this.props.updateVersion}`}
+            href={`https://github.com/vercel/hyper/releases/tag/${props.updateVersion}`}
           >
             notes
           </a>
           ).{' '}
-            {this.props.updateCanInstall ? (
+          {props.updateCanInstall ? (
             <a
               style={{
                 cursor: 'pointer',
                 textDecoration: 'underline',
                 fontWeight: 'bold'
               }}
-                onClick={this.props.onUpdateInstall}
+              onClick={props.onUpdateInstall}
             >
               Restart
             </a>
@@ -109,7 +106,7 @@ export default class Notifications extends React.PureComponent<NotificationsProp
                 void window.require('electron').shell.openExternal(ev.currentTarget.href);
                 ev.preventDefault();
               }}
-                href={this.props.updateReleaseUrl!}
+              href={props.updateReleaseUrl!}
             >
               Download
             </a>
@@ -117,7 +114,7 @@ export default class Notifications extends React.PureComponent<NotificationsProp
           .{' '}
         </Notification>
       )}
-        {this.props.customChildren}
+      {props.customChildren}
 
       <style jsx>{`
         .notifications_view {
@@ -128,5 +125,6 @@ export default class Notifications extends React.PureComponent<NotificationsProp
       `}</style>
     </div>
   );
-  }
-}
+};
+
+export default Notifications;

lib/components/style-sheet.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import type {StyleSheetProps} from '../hyper';
 
-export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
-  render() {
-    const {borderColor} = this.props;
+const StyleSheet: React.FC<StyleSheetProps> = (props) => {
+  const {borderColor} = props;
 
   return (
     <style jsx global>{`
@@ -20,5 +19,6 @@ export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
       }
     `}</style>
   );
-  }
-}
+};
+
+export default StyleSheet;