[CALLS-700]Call history design implementation

apply review comment.

Author: danney-chun

lib/components/App.js

@@ -31,11 +31,10 @@ export default class App extends BaseElement {
     for (let i = this.children.length - 1 ; i >= 0 ; i--) {
       const child = this.children[i];
       if(child.element.id === 'header' || child.element.id === 'tabtoolbar') {
-        if(opt.isRemoveHeader === true) {
+        if(opt.isRemoveHeader) {
           child.remove();
         }
-      }
-      else{
+      } else {
         child.remove();
       }
     }

lib/css/styles.js

@@ -1114,6 +1114,12 @@ const styles = {
     listStyle: 'none',
     margin: '0',
     padding: '0',
+    borderRight: 'solid 1px #dee2f2',
+    'li': {
+      '&:first-child': {
+        borderTop: 'unset'
+      }
+    }
   },
 
   callLogListDesc: {
@@ -1172,7 +1178,7 @@ const styles = {
     width: '376px',
     minHeight: '88px',
     height: 'auto',
-    borderRight: 'solid 1px #dee2f2',
+    borderTop: 'solid 1px #dee2f2',
     paddingBottom: '5px',
   },
 
@@ -1231,10 +1237,6 @@ const styles = {
     height: '100%'
   },
 
-  callLogItemWarpBorder: {
-    borderTop: 'solid 1px #dee2f2'
-  },
-
   callLogItemType: {
     display: 'block',
     width: '20px',

lib/utils/domUtil.js

@@ -142,7 +142,4 @@ export function replaceClassName(element, searchValue, newValue) {
 
 export function hasClassName(element, searchValue) {
   return (element.classList.value.indexOf(searchValue) !== -1);
-    return false;
-  }
-  return true;
 }

lib/views/CallLogItem.js

@@ -15,16 +15,13 @@ export class CallLogItem {
       if(callLogInfo.isVideoCall){
         if(callLogInfo.userRole === 'dc_caller'){
           callType = outgoingVideo;
-        }
-        else{
+        } else {
           callType = incomingVideo;
         }
-      }
-      else{
+      } else {
         if(callLogInfo.userRole === 'dc_caller'){
           callType = outgoingVoice;
-        }
-        else{
+        } else {
           callType = incomingVoice;
         }
       }
@@ -34,8 +31,7 @@ export class CallLogItem {
       if(callLogInfo.userRole === 'dc_caller'){
         profileImage = callLogInfo.callee.profileUrl;
         displayName = callLogInfo.callee.userId;
-      }
-      else{
+      } else {
         profileImage = callLogInfo.caller.profileUrl;
         displayName = callLogInfo.caller.userId;
       }
@@ -46,7 +42,7 @@ export class CallLogItem {
 
       const profileImg = createImg({ className: `${classes['callLogProfileImg']}`, src: profileImage, onerror: (error) => {
         error.currentTarget.src = avatarIcon;
-      } });
+      }});
 
       const profileDiv = createDiv({ className: `${classes['callLogProfileDiv']}` });
       profileDiv.appendChild(profileImg);
@@ -81,10 +77,7 @@ export class CallLogItem {
 
 
       let callStartTime = new Date(callLogInfo.startedAt);
-      let callStartTimeLabel = callStartTime.getFullYear() + '/' +
-                              callStartTime.toLocaleString(['en-US'], {month: '2-digit'}) + '/' +
-                              callStartTime.toLocaleString(['en-US'], {day: '2-digit'}) + ' ' +
-                              this.formatAMPM(callStartTime);
+      let callStartTimeLabel = `${callStartTime.getFullYear()}/${callStartTime.toLocaleString(['en-US'], {month: '2-digit'})}/${callStartTime.toLocaleString(['en-US'], {day: '2-digit'})} ${this.formatAMPM(callStartTime)}`;
 
       const callLogStartTime = createLabel({ className: `${classes['callLogStartTime']} ${classes['fontSmall']}`, innerText: callStartTimeLabel});
       const callActionBtnWrap = createDiv({ className: `${classes['callLogActionBtnWrap']}` });
@@ -125,7 +118,7 @@ export class CallLogItem {
     let minutes = date.getMinutes();
     let ampm = hours >= 12 ? 'pm' : 'am';
     hours = hours % 12;
-    hours = hours ? hours : 12; // the hour '0' should be '12'
+    hours = hours || 12; // the hour '0' should be '12'
     minutes = minutes < 10 ? '0'+minutes : minutes;
     let strTime = hours + ':' + minutes + ampm;
     return strTime;

lib/views/CallLogView.js

@@ -31,8 +31,7 @@ export default class CallLogView extends BaseElement{
     if(this.args.isWidget) {
       callLogList.classList.add(classes['widgetCallLog']);
       this.element.appendChild(callLogList);
-    }
-    else{
+    } else {
       const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` });
       const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` });
       const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` });
@@ -50,21 +49,15 @@ export default class CallLogView extends BaseElement{
     if (!this.callLogQuery.hasNext || this.callLogQuery.isLoading) return;
     this.callLogQuery.next((directCallLog) => {
       if( directCallLog.length > 0 ) {
-        for( let i = 0; i < directCallLog.length; i++ ){
-          let callItem = null;
-          if(i === 0){
-            callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']}` });
-          } else {
-            callItem = new CallLogItem({ callLogInfo: directCallLog[i], className: `${classes['callLogItemWrap']} ${classes['callLogItemWarpBorder']}` }); 
-          }
+        for(let callLogItem of directCallLog) {
+          const callItem = new CallLogItem({ callLogInfo: callLogItem, className: `${classes['callLogItemWrap']}` });
           callItem.onclick = (event, args) => {
             this.sendToParent('dial', args);              
           };
 
           element.appendChild(callItem.element);
         }
-      }
-      else{
+      } else {
         // empty call log
         const emptyCallLog = new CallLogItem({ className: `${classes['callLogEmptyWrap']}` });
         element.appendChild(emptyCallLog.element);