update: messaging system

package.json

@@ -3,7 +3,7 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.4.02",
+  "version": "0.4.03",
   "stage": "dev-pre",
   "description": "",
   "author": "RageStudio",

src/components/Layout/Secondary/index.js

@@ -14,7 +14,8 @@ import {
   __trendings,
   __pro,
   __footer,
-  __chats
+  __chats,
+  __searchBar
 } from './renders.js'
 
 export const SwapMode = {
@@ -215,7 +216,8 @@ export default class Secondary extends React.PureComponent {
       return (
         <>
         <div className={styles.secondary_main}>
-          {ycore.IsThisUser.pro() ? <__pro /> : <__pro />}
+          <__searchBar />
+          {/* {ycore.IsThisUser.pro() ? <__pro /> : <__pro />} */}
           <__trendings data={trending_data} />
           <__chats />
           {__footer()}

src/components/Layout/Secondary/renders.js

@@ -336,3 +336,40 @@ export const __footer = () =>{
     v{ycore.AppInfo.version}  |  About  |  Legal  |  Help
   </div>
 }
+
+
+export class __searchBar extends React.Component{
+  state = {
+    value: '',
+  }
+  openSearcher = () => {
+    const { value } = this.state
+    if (value.length < 1) return false
+    if (value == /\s/) return false
+    ycore.SwapMode.openSearch(value);
+  }
+  onChange = e => {
+    const { value } = e.target
+    this.setState({ value: value })
+    if (ycore.AppSettings.auto_search_ontype == 'true') {
+      this.autosend()
+    }
+  }
+  handleKey = (e) =>{
+    if (e.key == 'Enter') {
+      this.openSearcher()
+    }
+  }
+  render(){
+    return(
+      <div className={styles.search_bar}>
+        <input
+            placeholder="Search on Comty..."
+            onChange={this.onChange}
+            onPressEnter={this.openSearcher}
+            onKeyPress={this.handleKey}
+        />
+     </div>
+    )   
+  }
+}

src/components/Layout/Secondary/renders.less

@@ -369,3 +369,30 @@
   letter-spacing: 2px;
   width: 100%;
 }
+
+
+.search_bar {
+  height: 80px;
+  position: relative;
+ 
+  input {
+   height: 100%;
+   width: 100%;
+   display: block;
+   background-color: transparent;
+   border: none;
+   color: @body-color;
+   padding: 0 54px;
+   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
+   background-repeat: no-repeat;
+   background-size: 16px;
+   background-position: 25px 48%;
+   font-family: @body-font;
+   font-weight: 600;
+   font-size: 15px;
+   &::placeholder {
+    color: @input-chat-color;
+   }
+  }
+ }
+ 

src/components/UserProfile/index.js

@@ -3,7 +3,6 @@ import styles from './styles.less'
 import * as ycore from 'ycore'
 import * as antd from 'antd'
 import { CustomIcons, MainFeed, PostCreator } from 'components'
-import { SetHeaderSearchType } from 'components/HeaderSearch'
 import * as Icons from '@ant-design/icons'
 import Icon from '@ant-design/icons'
 import Follow_btn from './components/Follow_btn.js'
@@ -57,7 +56,7 @@ class UserProfile extends React.PureComponent {
 
   componentDidMount() {
     this.initUser(this.props.regx)
-    SetHeaderSearchType.disable()
+   
   }
 
   initUser = e => {

src/layouts/PrimaryLayout.js

@@ -106,7 +106,6 @@ class PrimaryLayout extends React.Component {
                   id="primaryContent"
                   className={styles.primary_layout_content}
                 >
-                  <HeaderSearch />
                   {children}
                 </Content>
               </PageTransition>

src/pages/chats/chats/ChatContainer.js

@@ -1,10 +1,15 @@
 import React, { Component } from 'react';
 import SideBar from './SideBar'
 import { MESSAGE_SENT, MESSAGE_RECIEVED, TYPING, PRIVATE_MESSAGE } from '../Events'
-import ChatHeading from './ChatHeading'
+
 import Messages from '../messages/Messages'
 import MessageInput from '../messages/MessageInput'
+
 import * as ycore from 'ycore'
+import * as antd from 'antd'
+import * as Icons from '@ant-design/icons'
+import styles from '../styles.less'
+import classnames from 'classnames'
 
 const userData = ycore.userData();
 
@@ -134,10 +139,10 @@ export default class ChatContainer extends Component {
 		this.setState({activeChat})
 	}
 	render() {
-		const { user, logout } = this.props
+		const { user } = this.props
 		const { chats, activeChat } = this.state
 		return (
-			<div className="container">
+			<div className={styles.chats_wrapper}>
 				<SideBar
 					chats={chats}
 					user={user}
@@ -145,39 +150,48 @@ export default class ChatContainer extends Component {
 					setActiveChat={this.setActiveChat}
 					onSendPrivateMessage={this.sendOpenPrivateMessage}
 					/>
-				<div className="chat-room-container">
 					{
 						activeChat !== null ? (
+							<div className={styles.app}>
+            				 <div className={styles.wrapper}>
+            				  <div className={styles.hat_area}>
+            				   <div className={styles.chat_area_main}>
 
-							<div className="chat-room">
+							   	<Messages 
-								<ChatHeading name={activeChat.name} />
-								<Messages 
 									messages={activeChat.messages}
 									user={user}
 									typingUsers={activeChat.typingUsers}
-									/>
+								/> 
-								<MessageInput 
+
-									sendMessage={
+            				   </div>
-										(message)=>{
+					
-											this.sendMessage(activeChat.id, message)
+            				   
-										}
+							   <MessageInput 
-									}
+										sendMessage={
-									sendTyping={
+											(message)=>{
-										(isTyping)=>{
+												this.sendMessage(activeChat.id, message)
-											this.sendTyping(activeChat.id, isTyping)
+											}
-										}
+										}
-									}
+										sendTyping={
-									/>
+											(isTyping)=>{
+												this.sendTyping(activeChat.id, isTyping)
+											}
+										}
+									/>
+            				  </div>
+            				 </div>
+            				</div>
 							
-							</div>
 						):
 						<div className="chat-room choose">
-							<h3>Choose a chat!</h3>
+							 <antd.Result
+   			 					icon={<Icons.SmileOutlined />}
+    							title="Hey, you still haven't started chatting with anyone"
+  							/>
 						</div>
 					}
 				</div>
 
-			</div>
 		);
 	}
 }

src/pages/chats/chats/ChatHeading.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-export default function({name, numberOfUsers}) {
-	
-	return (
-		<div className="chat-header">
-			<div className="user-info">
-				<div className="user-name">{name}</div>
-				<div className="status">
-					<div className="indicator"></div>
-					<span>{numberOfUsers ? numberOfUsers : null}</span>
-				</div>
-			</div>
-	
-		</div>
-	);
-	
-}

src/pages/chats/chats/SideBar.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import * as ycore from 'ycore'
 import * as antd from 'antd'
+import styles from '../styles.less'
 
 const userData = ycore.userData()
 
@@ -25,7 +26,7 @@ export default class SideBar extends React.PureComponent{
 		const { reciever } = this.state
 	
 		return (
-			<div id="side-bar">
+			<div className={styles.chat_sider}>
 
 					<form onSubmit={this.handleSubmit} className="search">
 						<input 

src/pages/chats/index.js

@@ -38,9 +38,9 @@ export default class Chats extends React.Component{
     if(!this.state.conn){
       await socket.on('connect', ()=>{
         console.log(prefix, "Connected");
-        this.setState({ conn: true })
         const payload = { id: userData.UserID, name: userData.username, avatar: userData.avatar }
-        this.setUser(payload)
+        socket.emit(USER_CONNECTED, payload);
+        this.setState({user: payload, conn: true})
       })
     }
 
@@ -55,16 +55,6 @@ export default class Chats extends React.Component{
     })
 	}
 
-	/*
-	* 	Sets the user property in state 
-	*	@param user {id:number, name:string}
-	*/	
-	setUser = (user)=>{
-		const { socket } = this.state
-		socket.emit(USER_CONNECTED, user);
-		this.setState({user})
-	}
-
 	render() {
 		const { socket, user } = this.state
 		return (

src/pages/chats/messages/MessageInput.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import styles from '../styles.less'
 
 export default class MessageInput extends Component {
 	
@@ -66,19 +67,29 @@ export default class MessageInput extends Component {
 	render() {
 		const { message } = this.state
 		return (
-			<div className="message-input">
 				<form 
 					onSubmit={ this.handleSubmit }
 					className="message-form">
-
+						  <div className={styles.chat_area_footer}>
+						  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video">
+     <path d="M23 7l-7 5 7 5V7z" />
+     <rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
+     <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+     <circle cx="8.5" cy="8.5" r="1.5" />
+     <path d="M21 15l-5-5L5 21" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
+     <circle cx="12" cy="12" r="10" />
+     <path d="M12 8v8M8 12h8" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip">
+     <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" /></svg>
 					<input 
 						id = "message"
 						ref = {"messageinput"}
 						type = "text"
-						className = "form-control"
 						value = { message }
 						autoComplete = {'off'}
-						placeholder = "Type something interesting"
+						placeholder = "Type something here..."
 						onKeyUp = { e => { e.keyCode !== 13 && this.sendTyping() } }
 						onChange = {
 							({target})=>{
@@ -86,15 +97,15 @@ export default class MessageInput extends Component {
 							}
 						}
 						/>
-					<button
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
-						disabled = { message.length < 1 }
+     <circle cx="12" cy="12" r="10" />
-						type = "submit"
+     <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" /></svg>
-						className = "send"
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up">
+     <path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3" /></svg>
+						  </div>
 
-					> Send </button>
 				</form>
 
-			</div>
 		);
 	}
 }

src/pages/chats/messages/Messages.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import styles from '../styles.less'
+import classnames from 'classnames'
 
 export default class Messages extends Component {
 	constructor(props) {
@@ -23,22 +25,19 @@ export default class Messages extends Component {
 	render() {
 		const { messages, user, typingUsers } = this.props
 		return (
-			<div ref='container'
+			<div ref='container' style={{ width: '100%' }}>
-				className="thread-container">
-				<div className="thread">
 					{
 						messages.map((mes)=>{
 							return (
-								<div
+								<div className={classnames(styles.chat_msg, {[styles.owner]: mes.sender == user.name? true : false })} key={mes.id}>
-									key={mes.id}
+								<div className={styles.chat_msg_profile}>
-									className={`message-container ${mes.sender === user.name && 'right'}`}
+								 <img className={styles.chat_msg_img} src={mes.avatar} />
-								>
+								 <div className={styles.chat_msg_date}>{mes.time}</div>
-									<div className="time">{mes.time}</div>
-									<div className="data">
-										<div className="message">{mes.message}</div>
-										<div className="name">{mes.sender}</div>
-									</div>
 								</div>
+								<div className={styles.chat_msg_content}>
+								 <div className={styles.chat_msg_text}>{mes.message}</div>
+								</div>
+							   </div>
 
 								)
 						})
@@ -52,7 +51,6 @@ export default class Messages extends Component {
 							)
 						})
 					}
-				</div>
 
 
 			</div>

src/pages/chats/styles.less

@@ -0,0 +1,361 @@
+@import '~themes/index.less';
+
+.hat_area{
+    width: 100%;
+}
+
+.chats_wrapper{
+    display: flex;
+    flex-direction: row;
+    height: 80vh;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 9px;
+}
+
+.chat_sider{
+    border-right: 1px #eef2f4 solid;
+    padding: 30px;
+}
+
+.dark-mode {
+    @body-bg-color: #1d1d1d;
+    @theme-bg-color: #27292d;
+    @border-color: #323336;
+    @body-color: #d1d1d2;
+    @active-conversation-bg: linear-gradient(
+     to right,
+     rgba(47, 50, 56, 0.54),
+     rgba(238, 242, 244, 0) 100%
+    );
+    @msg-hover-bg: rgba(47, 50, 56, 0.54);
+    @chat-text-bg: #383b40;
+    @chat-text-color: #b5b7ba;
+    @msg-date: #626466;
+    @msg-message: var(@msg-date);
+    @overlay-bg: linear-gradient(
+     to bottom,
+     rgba(0, 0, 0, 0) 0%,
+     #27292d 65%,
+     #27292d 100%
+    );
+    @input-bg: #2f3236;
+    @chat-header-bg: linear-gradient(
+     to bottom,
+     #27292d 0%,
+     #27292d 78%,
+     rgba(255, 255, 255, 0) 100%
+    );
+    @settings-icon-color: #7c7e80;
+    @developer-color: var(@border-color);
+    @button-bg-color: #393b40;
+    @button-color: var(@body-color);
+    @input-chat-color: #6f7073;
+    @detail-font-color: var(@input-chat-color);
+}
+   
+* {
+ outline: none;
+ box-sizing: border-box;
+}
+
+img {
+ max-width: 100%;
+}
+
+body {
+ background-color: @body-bg-color;
+ font-family: @body-font;
+ color: @body-color;
+}
+
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+}
+
+.app {
+ display: flex;
+ flex-direction: column;
+ background-color: @theme-bg-color;
+ max-width: 1600px;
+ height: 100%;
+ width: 100%;
+ margin: 0 auto;
+ overflow: hidden;
+}
+
+.wrapper {
+ width: 100%;
+ display: flex;
+ flex-grow: 1;
+ overflow: hidden;
+}
+
+.conversation_area{
+ width: 340px;
+ flex-shrink: 0;
+}
+
+.chat_area {
+ flex-grow: 1;
+}
+
+.conversation_area {
+ border-right: 1px solid @border-color;
+ overflow-y: auto;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+}
+
+.msg_profile {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin-right: 15px;
+ &.group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: @border-color;
+
+  svg {
+   width: 60%;
+  }
+ }
+}
+
+.msg {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+ cursor: pointer;
+ transition: 0.2s;
+ position: relative;
+ &:hover {
+  background-color: @msg-hover-bg;
+ }
+ &.active {
+  background: @active-conversation-bg;
+  border-left: 4px solid @theme-color;
+ }
+ &.online:before {
+  content: "";
+  position: absolute;
+  background-color: #23be7e;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 2px solid @theme-bg-color;
+  left: 50px;
+  bottom: 19px;
+ }
+}
+
+.msg_username {
+ margin-bottom: 4px;
+ font-weight: 600;
+ font-size: 15px;
+}
+
+.msg_detail {
+ overflow: hidden;
+}
+
+.msg_content {
+ font-weight: 500;
+ font-size: 13px;
+ display: flex;
+}
+
+.msg_message {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: @msg-message;
+}
+
+.msg_date {
+ font-size: 14px;
+ color: @msg-date;
+ margin-left: 3px;
+ &:before {
+  content: "•";
+  margin-right: 2px;
+ }
+}
+
+.chat_area {
+ display: flex;
+ flex-direction: column;
+ overflow: auto;
+ &.profile {
+  width: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+ }
+ &.title {
+  font-size: 18px;
+  font-weight: 600;
+ }
+ &.main {
+  flex-grow: 1;
+ }
+}
+
+.chat_msg_img {
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.chat_area_main{
+ overflow-y: scroll;
+ overflow-x: hidden;
+ padding: 30px 0 30px 0;
+ height: calc(100% - @chat_footer_height);
+}
+
+.chat_msg_profile {
+ flex-shrink: 0;
+ margin-top: auto;
+ margin-bottom: -20px;
+ position: relative;
+}
+
+.chat_msg_date {
+ position: absolute;
+ left: calc(100% + 12px);
+ bottom: 0;
+ font-size: 12px;
+ font-weight: 600;
+ color: @msg-date;
+ white-space: nowrap;
+}
+
+.chat_msg {
+ display: flex;
+ padding: 0 20px 45px;
+
+ .chat_msg_content {
+  margin-left: 12px;
+  max-width: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+ }
+ 
+ .chat_msg_text {
+  background-color: @chat-text-bg;
+  padding: 15px;
+  border-radius: 20px 20px 20px 0;
+  line-height: 1.5;
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 10px;
+  
+ }
+
+ &.owner{
+    flex-direction: row-reverse;
+    .chat_msg_content {
+     margin-left: 0;
+     margin-right: 12px;
+     align-items: flex-end;
+    }
+    .chat_msg_text {
+     background-color: @theme-color;
+     color: #fff;
+     border-radius: 20px 20px 0 20px;
+    }
+    .chat_msg_date {
+     left: auto;
+     right: calc(100% + 12px);
+    }
+ }
+}
+
+
+.chat_msg_text {
+    color: @chat-text-color;
+}
+
+.chat_msg_text img {
+ max-width: 300px;
+ width: 100%;
+}
+
+.chat_area_footer {
+ display: flex;
+ border-top: 1px solid @border-color;
+ width: 100%;
+ padding: 10px 20px;
+ height: @chat_footer_height;
+ align-items: center;
+ background-color: @theme-bg-color;
+ position: sticky;
+ bottom: 0;
+ left: 0;
+}
+
+.chat_area_footer svg {
+ color: @settings-icon-color;
+ width: 20px;
+ flex-shrink: 0;
+ cursor: pointer;
+ &:hover {
+  color: @settings-icon-hover;
+ }
+
+ & + svg {
+  margin-left: 12px;
+ }
+}
+
+.chat_area_footer input {
+ border: none;
+ color: @body-color;
+ background-color: @input-bg;
+ padding: 12px;
+ border-radius: 6px;
+ font-size: 15px;
+ margin: 0 12px;
+ width: 100%;
+ &::placeholder {
+  color: @input-chat-color;
+ }
+}
+
+.chat_area_group {
+ flex-shrink: 0;
+ display: flex;
+ * {
+  border: 2px solid @theme-bg-color;
+ }
+ * + * {
+  margin-left: -5px;
+ }
+
+ span {
+  width: 32px;
+  height: 32px;
+  background-color: @button-bg-color;
+  color: @theme-color;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+ }
+}
+
+@media (max-width: 780px) {
+ .conversation_area {
+  display: none;
+ }
+}

src/themes/base/index.less

@@ -2,6 +2,7 @@
 
 // FOR LAYOUTS
 @__Global_general_font_family: "Poppins", sans-serif;
+
 @__Global_layout_backgroud: #F8F6F8;
 @__Global_layout_color: #2d2d2d;
 @__Global_layout_border-rd: 27px 0 0 0;
@@ -226,3 +227,41 @@ body {
 @borderRadius: 6px;
 @boxShadow: 0 2px 5px rgba(#333, 0.2);
 
+// DSP2
+@chat_footer_height: 67px;
+@body-bg-color: #e5ecef;
+@theme-bg-color: #fff;
+@settings-icon-hover: #9fa7ac;
+@developer-color: #f9fafb;
+@input-bg: #f8f8fa;
+@input-chat-color: #a2a2a2;
+@border-color: #eef2f4;
+@body-font: "Manrope", sans-serif;
+@body-color: #273346;
+@settings-icon-color: #c1c7cd;
+@msg-message: #969eaa;
+@chat-text-bg: #f1f2f6;
+@chat-text-color: rgb(39, 51, 70);
+@theme-color: #0086ff;
+@msg-date: #c0c7d2;
+@button-bg-color: #f0f7ff;
+@button-color: var(@theme-color);
+@detail-font-color: #919ca2;
+@msg-hover-bg: rgba(238, 242, 244, 0.4);
+@active-conversation-bg: linear-gradient(
+ to right,
+ rgba(238, 242, 244, 0.4) 0%,
+ rgba(238, 242, 244, 0) 100%
+);
+@overlay-bg: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 1) 65%,
+ rgba(255, 255, 255, 1) 100%
+);
+@chat-header-bg: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 78%,
+ rgba(255, 255, 255, 0) 100%
+);

src/themes/fonts-imports.css

@@ -3,3 +3,4 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext");