fabricelements / skeleton-chat Goto Github PK

Try not to use querySelector to obtain values because the Dom is not reliable.
https://github.com/FabricElements/skeleton-chat/blob/master/skeleton-chat-box/skeleton-chat-box.html#L251

• Import and use firebase-auth

<link rel="import" href="../../polymerfire/firebase-auth.html">

<firebase-auth user="{{user}}"></firebase-auth>

• Add property user

           /**
           * The user Object.
           */
          user: {
            type: Object,
            value: {},
          },

• Fix implementation of _leaveChat

⚠️ Don't do this

_leaveChat() {
        const skeletonMessages = this
          .shadowRoot
          .querySelector(
            'skeleton-chat-messages'
          );
        this.leave(skeletonMessages.group, skeletonMessages.user.uid);
      }

✅ This is better

_leaveChat() {
        this.leave(this.group, this.user.uid);
      }

Review changes made on 2.0 and update on master views. No need to validate that is working because we haven't migrated all and those views don't work, but it needs to be consistent.

Rename function removeUserFromChat to: leave.

Docs: https://firebase.google.com/docs/firestore/manage-data/delete-data

Review the Delete fields
Users are not suppose to have permissions to update the users node just like that, but they can remove their uid from that object.

Try this:

`users.${uid}`: firebase.firestore.FieldValue.delete()

• Assign signedIn after this line

      this.signedIn = !(!user);

• Review if the design changes to reflect the owner or keep looking for more issues that are preventing the design update.

Read everything first.

We need to set up the main component with navigation or we will end up creating the same functionality on any app we need to implement the chat.

• Update the links to /chats to /chat in javascript and on the html wherever is implemented.

Work over skeleton-chat.html

• Apply Fabric.ChatMixin
• Learn about app-location and app-route (DOCS)
  We implemented this on play-views
• Implement iron-pages or iron-selector if needed to display the right page. But probably you can end up doing this manually to make it work with what we need. The less components the better.
  We used iron-pages before. Check out this
• By default we should display <skeleton-chat-groups>. If [[routeData.page]]is = to chat and the [[subrouteData.id]] is not null you should show <skeleton-chat-box>. You need to make sure that <skeleton-chat-groups> is displayed always if there is not [[subrouteData.id]].
• Take into considerations the styles used on play-views for now if you need them.

Note: Completing this will help us a lot with the experience for the agents on the texting app.

Basic

• Other
  
• Me
  

Image

• Other
  
• Me
  

Image and Text

• Other
  
• Me
  

Unknown media type

Only when type is undefined or isn't handle by other option

• Other
  
• Me
  

Is media type audio/*

Use skeleton-player

• Other
  
• Me
  

We need a temporary solution for this. We don't have any designs for this.

Please review the most used apps and Google Allo (This is the best for us).

• Show a message when the user doesn't have any massages (skeleton-chat-messages).

• Show a message when the user doesn't have any chats (skeleton-chat-groups).

We are using a component called from-now that is ok for showing the time in the same day but is confusing after that. We need to show a formatted date if it has been more than 1 day.

instead of 2 days ago it should say the date in format dd/mm/yyyy.

• Display the date if it has been more than 1 day and thefrom-now component if not.

After this is done you need to implement the same functionality on connect-views.

• After this line and also this line

• Be sure to use the item.updated property
  paper-item-body. Also change the attribute from two-line to three-line

skeleton-chat

• Add properties

routeChat: {
    type: String,
    value: 'chat',
},
routeLeave: {
    type: String,
    value: null,
},

• Update route pattern here

pattern$="/[[routeChat]]"

• Add close-chat event listener

       /**
       * Connected callback
       */
      connectedCallback() {
        super.connectedCallback();  
        this.addEventListener('close-chat', () => {
          this.routeData.page = this.routeLeave ? this.routeLeave : this.routeChat;
          this.notifyPath('routeData');
          this.notifyPath('routeData.page');
          this.chatBoxActive = false;
        }, true);
      }

chat-mixin

• Replace old code inside then here with this. This event should close the chat the right way.

           this.dispatchEvent(new CustomEvent('close-chat', {
              bubbles: true,
              composed: true,
            }));

• Manually test that all the routes and are working and validate the redirection when you leave a chat.

• Add property linkBack in components: skeleton-chat and skeleton-chat-groups

linkBack: {
type: String,
value: "/"
}

• Pass the value from skeleton-chat too. Here

<skeleton-chat-groups link-back$="[[linkBack]]" ></skeleton-chat-groups>

• Implement it in skeleton-chat-groups. L57

 <a href$="[[linkBack]]" tabindex="-1">

Implement the behavior in skeleton-chat-messages.html. Call _scrollToLast on iron-resize

https://github.com/FabricElements/fabric-imgix/blob/master/fabric-imgix.html#L3

https://github.com/FabricElements/fabric-imgix/blob/master/fabric-imgix.html#L64

https://github.com/FabricElements/fabric-imgix/blob/master/fabric-imgix.html#L423

• Create method _extractHyperlinks(message)

• Extract links and return like this:
  From:
  This is a demo http://test.com
  to:

This is a demo <a href="http://test.com" target="_blak">http://test.com</a>

• Create baseMessage after #L496

const baseMessage = _extractHyperlinks(message.text);
this._setText(baseMessage);

• Use inner-h-t-m-l to print new string in #L255

<div class="text-translation" hidden$="[[showOriginal]]" inner-h-t-m-l$="[[text]]"></div>

skeleton-chat-input

• Move uid from here after this line

uid: this.user.uid,

• and add this line after that

type: "default",

• Remove function _updateGroupTimestamp and where is used;

skeleton-chat-message

• Update owner value. #L433

this._setIsOwner(thi.uid === message.uid);

• Retrieve data for the user when is not available in the message;

1. Add else after this line
2. Get user data (once) from users/uid;
3. apply it to same function this._messageUser(message.user)

• Search and replace all implementations of the path user.image to user.avatar;
  Please review all the components that read the user image.