init commit,

03_source/mobile.integrated.not_working.del/src/components/ChatItem/index.jsx

@@ -0,0 +1,73 @@
+import {
+  IonIcon,
+  IonItem,
+  IonItemOption,
+  IonItemOptions,
+  IonItemSliding,
+  IonNavLink,
+  IonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { checkmarkDone } from 'ionicons/icons';
+import ChatHelloworld from '../../pages/chat';
+import { ContactStore } from '../../store';
+import { getContacts } from '../../store/Selectors';
+
+import HKPartyIonDeleteIcon from '../HKPartyIonDeleteIcon';
+import './style.scss';
+
+const ChatItem = ({ chat }) => {
+  const contacts = ContactStore.useState(getContacts);
+  const { chats, contact_id } = chat;
+  const { read, date, preview, received } = chats[chats.length - 1];
+  const contact = contacts.filter(c => c.id === contact_id)[0];
+  const notificationCount = chats.filter(chat => chat.read === false).length;
+
+  return (
+    <>
+      <IonItemSliding>
+        {/* 
+          <IonItemOptions side="start">
+            <IonItemOption color="success">Archive</IonItemOption>
+          </IonItemOptions>
+        */}
+
+        {/*  */}
+        <IonNavLink routerDirection="forward" component={() => <ChatHelloworld />}>
+          <IonItem
+            className="chat-row"
+            // routerLink={`/tabs/messages/${contact.id}`}
+
+            lines="full"
+            detail={false}
+          >
+            <IonThumbnail slot="start" style={{ '--border-radius': '50%' }}>
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+            </IonThumbnail>
+            <div className="chat-row-content">
+              <IonText>{contact.name}</IonText>
+              <IonText>{read && received && <IonIcon icon={checkmarkDone} color="primary" />}</IonText>
+              <IonText>{preview}</IonText>
+            </div>
+            <div slot="end">
+              <div>
+                <IonText>{date}</IonText>
+                <IonText>
+                  {notificationCount > 0 && <IonText className="chat-notification">{notificationCount}</IonText>}
+                </IonText>
+              </div>
+            </div>
+          </IonItem>
+        </IonNavLink>
+        {/*  */}
+        <IonItemOptions side="end">
+          <IonItemOption color="danger">
+            <HKPartyIonDeleteIcon size={'large'} />
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </>
+  );
+};
+
+export default ChatItem;