Progress

app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js

@@ -1,11 +1,18 @@
-import { injectIntl, FormattedMessage } from 'react-intl'
+import { NavLink } from 'react-router-dom'
+import { injectIntl, defineMessages } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { HotKeys } from 'react-hotkeys'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import StatusContainer from '../../../../containers/status_container'
 import AccountContainer from '../../../../containers/account_container'
-import Button from '../../../../components/button'
+import Avatar from '../../../../components/avatar'
 import Icon from '../../../../components/icon'
+import Text from '../../../../components/text'
+import DisplayName from '../../../../components/display_name'
+
+const messages = defineMessages({
+
+})
 
 const notificationForScreenReader = (intl, message, timestamp) => {
   const output = [message]
@@ -33,18 +40,115 @@ class Notification extends ImmutablePureComponent {
   renderFavorite = () => {
     const { status, notificationType, accounts } = this.props
 
+    return (
+      <div className={[_s.default, _s.paddingHorizontal10PX].join(' ')}>
+        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+
+            <Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
+
+            <div className={[_s.default, _s.marginLeft15PX].join(' ')}>
+              <div className={[_s.default, _s.flexRow].join(' ')}>
+                {
+                  accounts.slice(0, 6).map((account, i) => (
+                    <NavLink
+                      to={`/${account.get('acct')}`}
+                      key={`fav-avatar-${i}`}
+                      className={_s.marginRight5PX}
+                    >
+                      <Avatar size='30' account={account} />
+                    </NavLink>
+                  ))
+                }
+              </div>
+              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+                <div className={[_s.default, _s.flexRow].join(' ')}>
+                  <div className={_s.text}>
+                    {
+                      accounts.slice(0, 1).map((account, i) => (
+                        <DisplayName key={i} account={account} noUsername />
+                      ))
+                    }
+                  </div>
+                  <Text size='medium'>
+                    &nbsp;and 3 others favorited your gab
+                  </Text>
+                </div>
+              </div>
+
+              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+                <Text color='secondary' size='medium'>
+                  post this at 1-14-2020 12:15pm (edited)
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    )
   }
 
   render() {
-    const { notification } = this.props
-    const account = notification.get('account')
+    const {
+      status,
+      notificationType,
+      accounts,
+      intl
+    } = this.props
 
-    switch (notification.get('type')) {
-      case 'favourite':
-        return this.renderFavorite()
-    }
+    // const linkTo = '/admin/posts/123/reblogs' // etc.
 
-    return null
+    return (
+      <NavLink
+        to={`/`}
+        className={[_s.default, _s.paddingHorizontal10PX, _s.backgroundSubtle_onHover].join(' ')}
+      >
+        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+
+            <Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
+
+            <div className={[_s.default, _s.marginLeft15PX].join(' ')}>
+              <div className={[_s.default, _s.flexRow].join(' ')}>
+                {
+                  accounts.slice(0, 6).map((account, i) => (
+                    <NavLink
+                      to={`/${account.get('acct')}`}
+                      key={`fav-avatar-${i}`}
+                      className={_s.marginRight5PX}
+                    >
+                      <Avatar size='30' account={account} />
+                    </NavLink>
+                  ))
+                }
+              </div>
+              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+                <div className={[_s.default, _s.flexRow].join(' ')}>
+                  <div className={_s.text}>
+                    {
+                      accounts.slice(0, 1).map((account, i) => (
+                        <DisplayName key={i} account={account} noUsername />
+                      ))
+                    }
+                  </div>
+                  <Text size='medium'>
+                    &nbsp;and 3 others favorited your gab
+                  </Text>
+                </div>
+              </div>
+
+              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+                <Text color='secondary' size='medium'>
+                  post this at 1-14-2020 12:15pm (edited)
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </NavLink>
+    )
   }
 
 }