update public folder,
This commit is contained in:
louiscklaw
@@ -1,96 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonRouter,
|
||||
} from '@ionic/react';
|
||||
|
||||
import { Geolocation } from '@capacitor/geolocation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
|
||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
||||
|
||||
function Tab1() {
|
||||
const router = useIonRouter();
|
||||
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getCurrentPosition();
|
||||
}, []);
|
||||
|
||||
const getCurrentPosition = async () => {
|
||||
setCurrentWeather(false);
|
||||
const coordinates = await Geolocation.getCurrentPosition();
|
||||
getAddress(coordinates.coords);
|
||||
};
|
||||
|
||||
const getAddress = async (coords) => {
|
||||
const query = `${coords.latitude},${coords.longitude}`;
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
setCurrentWeather(data);
|
||||
};
|
||||
|
||||
// const router = useIonRouter();
|
||||
function handleBackClick() {
|
||||
router.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>My Weather</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => getCurrentPosition()}>
|
||||
<IonIcon icon={refreshOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => handleBackClick()}>
|
||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Dashboard</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
|
||||
<IonCol size="12">
|
||||
<h4>Here's your location based weather</h4>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-1.5rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<SkeletonDashboard />
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab1;
|
||||
@@ -1,81 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { useState } from 'react';
|
||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
||||
|
||||
function Tab2() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
const performSearch = async () => {
|
||||
getAddress(search);
|
||||
};
|
||||
|
||||
const getAddress = async (city) => {
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
if (data && data.current && data.location) {
|
||||
setCurrentWeather(data);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
|
||||
<IonCol size="7">
|
||||
<IonSearchbar
|
||||
placeholder="Try 'London'"
|
||||
animated
|
||||
value={search}
|
||||
onIonChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="5">
|
||||
<IonButton
|
||||
expand="block"
|
||||
className="ion-margin-start ion-margin-end"
|
||||
onClick={performSearch}
|
||||
>
|
||||
Search
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-0.8rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<h3 className="ion-text-center">Your search result will appear here</h3>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab2;
|
||||
@@ -1,62 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
||||
const [property, setProperty] = useState(false);
|
||||
|
||||
const properties = {
|
||||
wind: {
|
||||
isIcon: false,
|
||||
icon: '/assets/WeatherDemo/wind.png',
|
||||
alt: 'wind',
|
||||
label: 'Wind',
|
||||
value: `${currentWeather.current.wind_mph}mph`,
|
||||
},
|
||||
feelsLike: {
|
||||
isIcon: true,
|
||||
icon: thermometerOutline,
|
||||
alt: 'feels like',
|
||||
label: 'Feels like',
|
||||
value: `${currentWeather.current.feelslike_c}°C`,
|
||||
},
|
||||
indexUV: {
|
||||
isIcon: true,
|
||||
icon: sunnyOutline,
|
||||
alt: 'index uv',
|
||||
label: 'Index UV',
|
||||
value: currentWeather.current.uv,
|
||||
},
|
||||
pressure: {
|
||||
isIcon: true,
|
||||
icon: pulseOutline,
|
||||
alt: 'pressure',
|
||||
label: 'Pressure',
|
||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProperty(properties[type]);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
{!property.isIcon && (
|
||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
||||
)}
|
||||
{property.isIcon && (
|
||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
||||
)}
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
||||
<IonNote>{property.value}</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
||||
import { WeatherProperty } from './WeatherProperty';
|
||||
|
||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
{currentWeather.location.region},{' '}
|
||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<img
|
||||
alt="condition"
|
||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
||||
/>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
{currentWeather.current.temp_c}℃
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,117 +0,0 @@
|
||||
import {
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonGrid,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonRow,
|
||||
IonSkeletonText,
|
||||
IonText,
|
||||
IonThumbnail,
|
||||
} from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
|
||||
export const SkeletonDashboard = () => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<IonThumbnail>
|
||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
||||
</IonThumbnail>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,62 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
||||
const [property, setProperty] = useState(false);
|
||||
|
||||
const properties = {
|
||||
wind: {
|
||||
isIcon: false,
|
||||
icon: '/assets/WeatherDemo/wind.png',
|
||||
alt: 'wind',
|
||||
label: 'Wind',
|
||||
value: `${currentWeather.current.wind_mph}mph`,
|
||||
},
|
||||
feelsLike: {
|
||||
isIcon: true,
|
||||
icon: thermometerOutline,
|
||||
alt: 'feels like',
|
||||
label: 'Feels like',
|
||||
value: `${currentWeather.current.feelslike_c}°C`,
|
||||
},
|
||||
indexUV: {
|
||||
isIcon: true,
|
||||
icon: sunnyOutline,
|
||||
alt: 'index uv',
|
||||
label: 'Index UV',
|
||||
value: currentWeather.current.uv,
|
||||
},
|
||||
pressure: {
|
||||
isIcon: true,
|
||||
icon: pulseOutline,
|
||||
alt: 'pressure',
|
||||
label: 'Pressure',
|
||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProperty(properties[type]);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
{!property.isIcon && (
|
||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
||||
)}
|
||||
{property.isIcon && (
|
||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
||||
)}
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
||||
<IonNote>{property.value}</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
||||
import { WeatherProperty } from './WeatherProperty';
|
||||
|
||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
{currentWeather.location.region},{' '}
|
||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<img
|
||||
alt="condition"
|
||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
||||
/>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
{currentWeather.current.temp_c}℃
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,27 +0,0 @@
|
||||
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
|
||||
import { addOutline, cameraOutline, qrCodeOutline } from 'ionicons/icons';
|
||||
|
||||
export const CustomFab = ({ start }) => {
|
||||
return (
|
||||
<IonFab
|
||||
vertical="bottom"
|
||||
horizontal="end"
|
||||
slot="fixed"
|
||||
className="ion-padding-bottom ion-padding-end"
|
||||
>
|
||||
<IonFabButton>
|
||||
<IonIcon icon={qrCodeOutline} />
|
||||
</IonFabButton>
|
||||
|
||||
<IonFabList side="top" className="ion-padding-bottom">
|
||||
<IonFabButton color="primary" onClick={start}>
|
||||
<IonIcon icon={cameraOutline} />
|
||||
</IonFabButton>
|
||||
|
||||
<IonFabButton color="primary" routerLink="/demo-qr-scanner/manual">
|
||||
<IonIcon icon={addOutline} />
|
||||
</IonFabButton>
|
||||
</IonFabList>
|
||||
</IonFab>
|
||||
);
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
import { IonCol, IonRow, IonText } from '@ionic/react';
|
||||
|
||||
export const NoQRCodes = () => (
|
||||
<IonRow className="ion-text-center ion-justify-content-center">
|
||||
<IonCol size="9">
|
||||
<h3>It looks like you don't have any QR codes stored.</h3>
|
||||
<img src="/assets/icon2.png" alt="icon" />
|
||||
|
||||
<p>
|
||||
Click the <IonText color="primary">button</IonText> in the bottom right to scan a code or
|
||||
generate a code.
|
||||
</p>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
);
|
||||
@@ -1,106 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardHeader,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonToast,
|
||||
} from '@ionic/react';
|
||||
import QRCode from 'react-qr-code';
|
||||
import { addQRCode } from '../store/QRStore';
|
||||
|
||||
import useSound from 'use-sound';
|
||||
import closeSound from '../sounds/close.wav';
|
||||
import { reloadOutline } from 'ionicons/icons';
|
||||
|
||||
export const QRCodeScannedModal = ({ dismiss, code, set, scan }) => {
|
||||
const [play] = useSound(closeSound);
|
||||
const [showToast] = useIonToast();
|
||||
|
||||
const handleDismiss = () => {
|
||||
dismiss();
|
||||
play();
|
||||
};
|
||||
|
||||
const handleScanAgain = () => {
|
||||
handleDismiss();
|
||||
|
||||
setTimeout(() => {
|
||||
scan();
|
||||
}, 10);
|
||||
};
|
||||
|
||||
const handleAdd = async () => {
|
||||
addQRCode(code.text ? code.text : code, true);
|
||||
showToast({
|
||||
header: 'Success!',
|
||||
message: 'QR Code stored successfully.',
|
||||
duration: 3000,
|
||||
color: 'primary',
|
||||
});
|
||||
|
||||
handleDismiss();
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>View QR Code</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={handleDismiss}>Close</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonGrid className="ion-padding-top ion-margin-top">
|
||||
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
<QRCode value={code.text ? code.text : code} />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>QR Code data</IonCardTitle>
|
||||
<IonNote>This is what the code represents</IonNote>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<p>{code.text ? code.text : code}</p>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" fill="outline" onClick={handleScanAgain}>
|
||||
<IonIcon icon={reloadOutline} />
|
||||
Scan again
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" onClick={handleAdd}>
|
||||
Store →
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonGrid,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
// import QrReader from "react-qr-reader";
|
||||
|
||||
export const QRWebModal = ({ dismiss, set, scan, error }) => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Scan QR Code</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={dismiss}>Close</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonGrid className="ion-padding-top ion-margin-top">
|
||||
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
{/*
|
||||
<QrReader
|
||||
delay={ 500 }
|
||||
onError={ error }
|
||||
onScan={ scan }
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
*/}
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
@@ -1,117 +0,0 @@
|
||||
import {
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonGrid,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonRow,
|
||||
IonSkeletonText,
|
||||
IonText,
|
||||
IonThumbnail,
|
||||
} from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
|
||||
export const SkeletonDashboard = () => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<IonThumbnail>
|
||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
||||
</IonThumbnail>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,32 +0,0 @@
|
||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
|
||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
||||
import { Route, Redirect } from 'react-router';
|
||||
|
||||
// import Tab1 from './AppPages/Tab1';
|
||||
// import Tab2 from './AppPages/Tab2';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
function DemoWeatherAppUi() {
|
||||
return (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
<Route exact path="/demo-react-qr-code/home">
|
||||
<Tab1 />
|
||||
</Route>
|
||||
<Route exact path="/demo-react-qr-code/manual">
|
||||
<Tab2 />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/demo-react-qr-code/camera">
|
||||
<Tab3 />
|
||||
</Route>
|
||||
|
||||
<Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/home" />
|
||||
</IonRouterOutlet>
|
||||
</IonTabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default DemoWeatherAppUi;
|
||||
@@ -1,114 +0,0 @@
|
||||
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
|
||||
import { IonContent, IonGrid, IonHeader, IonPage, IonTitle, IonToolbar, useIonModal, getPlatforms } from '@ionic/react';
|
||||
import { useStoreState } from 'pullstate';
|
||||
import { useState } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import useSound from 'use-sound';
|
||||
import { CustomFab } from '../components/CustomFab';
|
||||
import { NoQRCodes } from '../components/NoQRCodes';
|
||||
import { QRCodeList } from '../components/QRCodeList';
|
||||
import { QRCodeScannedModal } from '../components/QRCodeScannedModal';
|
||||
import { QRStore } from '../store';
|
||||
import { getCodes } from '../store/Selectors';
|
||||
import './Tab1.css';
|
||||
|
||||
import openSound from "../sounds/open.wav";
|
||||
import { QRWebModal } from '../components/QRWebModal';
|
||||
|
||||
const Tab1 = () => {
|
||||
|
||||
const pageRef = useRef();
|
||||
const codes = useStoreState(QRStore, getCodes);
|
||||
const [ play ] = useSound(openSound);
|
||||
|
||||
const [ QRData, setQRData ] = useState(false);
|
||||
|
||||
const handleScan = data => {
|
||||
|
||||
if (data) {
|
||||
|
||||
setQRData(data);
|
||||
play();
|
||||
handleSuccess(data);
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = err => {
|
||||
|
||||
console.error(err)
|
||||
}
|
||||
|
||||
const start = async () => {
|
||||
|
||||
const platforms = getPlatforms();
|
||||
const isWeb = (platforms.includes("desktop") || platforms.includes("mobileweb") || platforms.includes("pwa"));
|
||||
|
||||
if (!isWeb) {
|
||||
|
||||
const data = await BarcodeScanner.scan();
|
||||
|
||||
if (data) {
|
||||
handleSuccess(data);
|
||||
}
|
||||
} else {
|
||||
|
||||
presentWebModal({
|
||||
|
||||
presentingElement: pageRef.current
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handleSuccess = data => {
|
||||
|
||||
setQRData(data);
|
||||
console.log(data);
|
||||
dismissWebModal();
|
||||
|
||||
play();
|
||||
present({
|
||||
|
||||
presentingElement: pageRef.current
|
||||
});
|
||||
}
|
||||
|
||||
const [ present, dismiss ] = useIonModal(QRCodeScannedModal, {
|
||||
|
||||
dismiss: () => dismiss(),
|
||||
code: QRData,
|
||||
set: () => setQRData(),
|
||||
scan: () => start()
|
||||
});
|
||||
|
||||
const [ presentWebModal, dismissWebModal ] = useIonModal(QRWebModal, {
|
||||
|
||||
dismiss: () => dismissWebModal(),
|
||||
set: () => setQRData(),
|
||||
scan: handleScan,
|
||||
error: handleError
|
||||
});
|
||||
|
||||
return (
|
||||
<IonPage ref={ pageRef }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>QR Codes</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">QR Codes</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonGrid>
|
||||
{ codes.length < 1 && <NoQRCodes /> }
|
||||
{ codes.length > 0 && <QRCodeList codes={ codes } pageRef={ pageRef } /> }
|
||||
</IonGrid>
|
||||
<CustomFab start={ start } />
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab1;
|
||||
@@ -1,105 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonNote, IonPage, IonRow, IonTextarea, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
|
||||
import './Tab2.css';
|
||||
|
||||
import QRCode from "react-qr-code";
|
||||
import { useState } from 'react';
|
||||
import { addQRCode } from '../store/QRStore';
|
||||
|
||||
const Tab2 = () => {
|
||||
|
||||
const [ data, setData ] = useState("");
|
||||
const [ showToast ] = useIonToast();
|
||||
|
||||
const handleAdd = async () => {
|
||||
|
||||
if (data === "") {
|
||||
|
||||
showToast({
|
||||
|
||||
header: "Error!",
|
||||
message: "Please enter some data to store.",
|
||||
duration: 3000,
|
||||
color: "danger"
|
||||
});
|
||||
} else {
|
||||
|
||||
addQRCode(data);
|
||||
showToast({
|
||||
|
||||
header: "Success!",
|
||||
message: "QR Code stored successfully.",
|
||||
duration: 3000,
|
||||
color: "primary"
|
||||
});
|
||||
|
||||
setData("");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton text="QR Codes" />
|
||||
</IonButtons>
|
||||
<IonTitle>Generate QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Generate QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonGrid>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonItem lines="none">
|
||||
<IonLabel className="ion-text-wrap">
|
||||
<h1>You can generate a QR code to store or share with friends.</h1>
|
||||
<p>You'll see a live preview of the QR Code</p>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonItem>
|
||||
<IonLabel position="stacked">Data to store</IonLabel>
|
||||
<IonTextarea rows="3" placeholder="Enter a URL or secret information" type="text" inputmode="text" value={ data } onIonChange={ e => setData(e.target.value) } />
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-text-center ion-margin-top">
|
||||
<IonCol size="12">
|
||||
{ data !== "" ? <QRCode value={ data } /> : <img src="/assets/placeholder2.png" alt="placeholder qr" height="256" /> }
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-text-center ion-justify-content-center">
|
||||
<IonCol size="10">
|
||||
<IonItem lines="none">
|
||||
<IonLabel className="ion-text-wrap ion-text-center">
|
||||
<p>When you're ready, you can store the generated QR Code</p>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonButton expand="block" onClick={ handleAdd }>Store →</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab2;
|
||||
@@ -1,102 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonNote, IonPage, IonRow, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
|
||||
import './Tab3.css';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { BarcodeScanner } from "@ionic-native/barcode-scanner";
|
||||
import QRCode from 'react-qr-code';
|
||||
import { addQRCode } from '../store/QRStore';
|
||||
import { reloadOutline } from 'ionicons/icons';
|
||||
|
||||
const Tab3 = () => {
|
||||
|
||||
const [ QRData, setQRData ] = useState(false);
|
||||
|
||||
const start = async () => {
|
||||
|
||||
const data = await BarcodeScanner.scan();
|
||||
setQRData(data);
|
||||
}
|
||||
|
||||
const [ showToast ] = useIonToast();
|
||||
|
||||
const handleAdd = async () => {
|
||||
|
||||
addQRCode(QRData.text, true);
|
||||
showToast({
|
||||
|
||||
header: "Success!",
|
||||
message: "QR Code stored successfully.",
|
||||
duration: 3000,
|
||||
color: "primary"
|
||||
});
|
||||
|
||||
setQRData(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonBackButton text="QR Codes" />
|
||||
</IonButtons>
|
||||
<IonTitle>Scan QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Scan QR Code</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonGrid>
|
||||
{ !QRData &&
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonButton expand="block" onClick={ start }>Scan →</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
}
|
||||
|
||||
{ QRData &&
|
||||
<>
|
||||
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
|
||||
<IonCol size="12">
|
||||
<QRCode value={ QRData.text } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="12">
|
||||
<IonCard>
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>QR Code data</IonCardTitle>
|
||||
<IonNote>This is what the code represents</IonNote>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<p>{ QRData.text }</p>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" fill="outline" onClick={ start }>
|
||||
<IonIcon icon={ reloadOutline } />
|
||||
Scan again</IonButton>
|
||||
</IonCol>
|
||||
<IonCol size="6">
|
||||
<IonButton expand="block" onClick={ handleAdd }>Store →</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</>
|
||||
}
|
||||
</IonGrid>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab3;
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,19 +0,0 @@
|
||||
import { Store } from 'pullstate';
|
||||
|
||||
const QRStore = new Store({
|
||||
codes: [],
|
||||
});
|
||||
|
||||
export default QRStore;
|
||||
|
||||
export const addQRCode = (data, scanned = false) => {
|
||||
QRStore.update((s) => {
|
||||
s.codes = [...s.codes, { id: new Date(), data, scanned }];
|
||||
});
|
||||
};
|
||||
|
||||
export const removeQRCode = (id) => {
|
||||
QRStore.update((s) => {
|
||||
s.codes = s.codes.filter((code) => code.id !== id);
|
||||
});
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
const getState = (state) => state;
|
||||
|
||||
// General getters
|
||||
export const getCodes = createSelector(getState, (state) => state.codes);
|
||||
@@ -1 +0,0 @@
|
||||
export { default as QRStore } from './QRStore';
|
||||
@@ -1,103 +0,0 @@
|
||||
#about-page {
|
||||
ion-toolbar {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
--background: transparent;
|
||||
--color: white;
|
||||
}
|
||||
|
||||
ion-toolbar ion-back-button,
|
||||
ion-toolbar ion-button,
|
||||
ion-toolbar ion-menu-button {
|
||||
--color: white;
|
||||
}
|
||||
|
||||
.about-header {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.about-header .about-image {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.about-header .madison {
|
||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
||||
}
|
||||
|
||||
.about-header .austin {
|
||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
||||
}
|
||||
|
||||
.about-header .chicago {
|
||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
||||
}
|
||||
|
||||
.about-header .seattle {
|
||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
||||
}
|
||||
|
||||
.about-info {
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
border-radius: 10px;
|
||||
background: var(--ion-background-color, #fff);
|
||||
z-index: 2; // display rounded border above header image
|
||||
}
|
||||
|
||||
.about-info h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-info ion-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.about-info p {
|
||||
line-height: 130%;
|
||||
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.about-info ion-icon {
|
||||
margin-inline-end: 32px;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Only
|
||||
*/
|
||||
|
||||
.ios .about-info {
|
||||
--ion-padding: 19px;
|
||||
}
|
||||
|
||||
.ios .about-info h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
#date-input-popover {
|
||||
--offset-y: -var(--ion-safe-area-bottom);
|
||||
|
||||
--max-width: 90%;
|
||||
--width: 336px;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
:root {
|
||||
|
||||
/* --ion-background-color: white; */
|
||||
--ion-tab-bar-color: rgb(76, 112, 141);
|
||||
--ion-tab-bar-color-selected: white;
|
||||
}
|
||||
|
||||
ion-tab-bar {
|
||||
|
||||
--background: rgb(1, 72, 131);
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50px !important;
|
||||
|
||||
height: 50px;
|
||||
width: 40%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
bottom: 24px;
|
||||
position: relative;
|
||||
margin: 0 auto !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
ion-tab-button {
|
||||
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
/* Ionic Variables and Theming. For more info, please see:
|
||||
http://ionicframework.com/docs/theming/ */
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import './Calls.css';
|
||||
|
||||
const Calls = () => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Calls</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Calls</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calls;
|
||||
@@ -1,289 +0,0 @@
|
||||
.chat-page ion-header,
|
||||
.chat-page ion-toolbar {
|
||||
|
||||
--min-height: 3.5rem;
|
||||
}
|
||||
|
||||
.chat-page ion-title {
|
||||
|
||||
margin-left: -3.5rem;
|
||||
}
|
||||
|
||||
.chat-page ion-title p {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-contact {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-contact img {
|
||||
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.chat-contact-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-contact-details p {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-contact-details ion-text {
|
||||
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
|
||||
border-radius: 5px;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
padding: 0.5rem;
|
||||
max-width: 80%;
|
||||
clear: both;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transition: 0.2s all linear;
|
||||
}
|
||||
|
||||
.chat-bubble:last-child {
|
||||
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.bubble-sent {
|
||||
|
||||
background-color: var(--chat-bubble-sent-color);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bubble-received {
|
||||
|
||||
background-color: var(--chat-bubble-received-color);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chat-bubble p {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
|
||||
background-color: rgb(22, 22, 22);
|
||||
border-top: 1px solid rgb(47, 47, 47);
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chat-footer ion-textarea {
|
||||
|
||||
background-color: rgb(31, 31, 31);
|
||||
border: 1px solid rgb(36, 36, 36);
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
padding-left: 0.5rem;
|
||||
caret-color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.chat-footer ion-icon {
|
||||
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
|
||||
width: 70%;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-send-button {
|
||||
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
margin-top: -0.2rem !important;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-send-button ion-icon {
|
||||
|
||||
color: white;
|
||||
background-color: var(--ion-color-primary);
|
||||
font-size: 1.1rem;
|
||||
border-radius: 500px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 0.75rem;
|
||||
right: 0;
|
||||
bottom: 0 !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bubble-arrow {
|
||||
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 6px;
|
||||
margin-top: -8px;
|
||||
/* top: 0px; */
|
||||
}
|
||||
|
||||
.bubble-arrow.alt {
|
||||
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: auto;
|
||||
right: -3px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bubble-arrow:after {
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 15px solid var(--chat-bubble-received-color);
|
||||
border-left: 15px solid transparent;
|
||||
border-radius: 4px 0 0 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.bubble-arrow.alt:after {
|
||||
|
||||
border-top: 15px solid var(--chat-bubble-sent-color);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.chat-reply-to-row {
|
||||
|
||||
bottom: 70px !important;
|
||||
position: absolute;
|
||||
|
||||
border-left: 4px solid rgb(224, 176, 18);
|
||||
width: 100%;
|
||||
background-color: rgb(22, 22, 22);
|
||||
border-top: 1px solid rgb(47, 47, 47);
|
||||
padding: 0.5rem;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.chat-reply-to-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-reply-to-name {
|
||||
|
||||
color: rgb(224, 176, 18);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-reply-to-message {
|
||||
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.all-chats {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.chat-bottom-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.chat-bottom-details ion-icon {
|
||||
|
||||
font-size: 0.6rem;
|
||||
color: grey;
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.chat-bottom-details span {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container {
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-left: 3px solid rgb(224, 176, 18);
|
||||
height: fit-content;
|
||||
padding: 0.5rem;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container h1 {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgb(224, 176, 18);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container p {
|
||||
|
||||
color: rgb(167, 167, 167);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
|
||||
position: absolute;
|
||||
bottom: 4.5rem;
|
||||
height: 5rem;
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,378 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonFooter, IonGrid, IonHeader, IonIcon, IonPage, IonRow, IonText, IonTextarea, IonTitle, IonToolbar, CreateAnimation, createGesture, useIonViewWillEnter, IonActionSheet, IonToast } from "@ionic/react";
|
||||
import { addOutline, alertOutline, callOutline, cameraOutline, micOutline, send, shareOutline, starOutline, trashOutline, videocamOutline } from "ionicons/icons";
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { ChatStore, ContactStore } from "../store";
|
||||
import { getNotificationCount, markAllAsRead, sendChatMessage, starChatMessage } from "../store/ChatStore";
|
||||
import { getChat, getChats, getContact } from "../store/Selectors";
|
||||
|
||||
import { useLongPress } from 'react-use';
|
||||
import "./Chat.css"
|
||||
import ReplyTo from "../components/ReplyTo";
|
||||
import { ChatBottomDetails } from "../components/ChatBottomDetails";
|
||||
import { ChatRepliedQuote } from "../components/ChatRepliedQuote";
|
||||
import { useCamera } from "../hooks/useCamera";
|
||||
import { useGallery } from "../hooks/useGallery";
|
||||
|
||||
const Chat = () => {
|
||||
|
||||
const params = useParams();
|
||||
|
||||
// Global State
|
||||
const chat = ChatStore.useState(getChat(params.contact_id));
|
||||
const chats = ChatStore.useState(getChats);
|
||||
const contact = ContactStore.useState(getContact(params.contact_id));
|
||||
const notificationCount = getNotificationCount(chats);
|
||||
|
||||
const { takePhoto } = useCamera();
|
||||
const { prompt } = useGallery();
|
||||
|
||||
// Local state
|
||||
const [ message, setMessage ] = useState("");
|
||||
const [ showSendButton, setShowSendButton ] = useState(false);
|
||||
const [ replyToMessage, setReplyToMessage ] = useState(false);
|
||||
const [ messageSent, setMessageSent ] = useState(false);
|
||||
|
||||
const [ showActionSheet, setShowActionSheet ] = useState(false);
|
||||
const [ actionMessage, setActionMessage ] = useState(false);
|
||||
|
||||
const [ showToast, setShowToast ] = useState(false);
|
||||
const [ toastMessage, setToastMessage ] = useState("");
|
||||
|
||||
// Refs
|
||||
const contentRef = useRef();
|
||||
const swiperRefs = useRef([]);
|
||||
const textareaRef = useRef();
|
||||
const sideRef = useRef();
|
||||
const sendRef = useRef();
|
||||
const replyToAnimationRef = useRef();
|
||||
|
||||
const actionSheetButtons = [
|
||||
|
||||
{
|
||||
text: (actionMessage && actionMessage.starred) ? "Unstar Message" : "Star Message",
|
||||
icon: starOutline,
|
||||
handler: () => starChatMessage(params.contact_id, actionMessage.id)
|
||||
},
|
||||
actionMessage && actionMessage.received ?
|
||||
{
|
||||
text: "Reply To Message",
|
||||
icon: shareOutline,
|
||||
handler: () => showReplyToMessage(actionMessage)
|
||||
}
|
||||
:
|
||||
{
|
||||
text: "Unsend Message",
|
||||
icon: alertOutline,
|
||||
handler: () => toaster("I haven't implemented unsend :) Simple store update though")
|
||||
},
|
||||
{
|
||||
text: "Delete Message",
|
||||
icon: trashOutline,
|
||||
handler: () => toaster("I haven't implemented delete :) Simple store update though"),
|
||||
role: "destructive"
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!showActionSheet && setActionMessage(false);
|
||||
}, [ showActionSheet ]);
|
||||
|
||||
// Scroll to end of content
|
||||
// Mark all chats as read if we come into a chat
|
||||
// Set up our swipe events for animations and gestures
|
||||
useIonViewWillEnter(() => {
|
||||
|
||||
scrollToBottom();
|
||||
setupObserver();
|
||||
markAllAsRead(params.contact_id);
|
||||
setSwipeEvents();
|
||||
});
|
||||
|
||||
// For displaying toast messages
|
||||
const toaster = message => {
|
||||
|
||||
setToastMessage(message);
|
||||
setShowToast(true);
|
||||
}
|
||||
|
||||
// Scroll to end of content
|
||||
const scrollToBottom = async () => {
|
||||
|
||||
contentRef.current.scrollToBottom();
|
||||
}
|
||||
|
||||
// Watch for DOM changes
|
||||
// Then scroll to bottom
|
||||
// This ensures that the new chat message has *actually* been rendered
|
||||
// Check this:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
||||
const setupObserver = () => {
|
||||
|
||||
// Mutation Observers watch for DOM changes
|
||||
// This will ensure that we scroll to bottom AFTER the new chat has rendered
|
||||
const observer = new MutationObserver(() => {
|
||||
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
// We observe the ion-content (or containing element of chats)
|
||||
observer.observe(contentRef.current, {
|
||||
|
||||
childList: true
|
||||
});
|
||||
}
|
||||
|
||||
// Long press callback
|
||||
const onLongPress = (e) => {
|
||||
|
||||
const elementID = e.target.id;
|
||||
const chatMessageID = elementID.includes("chatText") ? parseInt(elementID.replace("chatText_", "")) : elementID.includes("chatTime") ? parseInt(elementID.replace("chatTime_", "")) : parseInt(elementID.replace("chatBubble_", ""));
|
||||
|
||||
const chatMessage = chat.filter(message => parseInt(message.id) === parseInt(chatMessageID))[0];
|
||||
|
||||
setActionMessage(chatMessage);
|
||||
setShowActionSheet(true);
|
||||
};
|
||||
|
||||
const longPressEvent = useLongPress(onLongPress, {
|
||||
|
||||
isPreventDefault: true,
|
||||
delay: 2000,
|
||||
});
|
||||
|
||||
const showReplyToMessage = async message => {
|
||||
|
||||
// Activate reply-to functionality
|
||||
setReplyToMessage(message);
|
||||
await replyToAnimationRef.current.animation.play();
|
||||
contentRef.current.scrollToBottom(300);
|
||||
}
|
||||
|
||||
const checkBubble = async (bubble, message, event) => {
|
||||
|
||||
if (event.deltaX >= 120) {
|
||||
|
||||
// Activate reply-to functionality
|
||||
bubble.style.transform = "none";
|
||||
showReplyToMessage(message);
|
||||
} else {
|
||||
|
||||
// Put chat bubble back to original position
|
||||
bubble.style.transform = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Function to move a bubble with the deltaX swipe
|
||||
const moveBubble = (bubble, event) => {
|
||||
|
||||
if (event.velocityX > 0) {
|
||||
|
||||
bubble.style.transform = `translateX(${ event.deltaX }px)`;
|
||||
}
|
||||
}
|
||||
|
||||
const setSwipeEvents = () => {
|
||||
|
||||
chat.forEach((message, index) => {
|
||||
|
||||
if (!message.sent) {
|
||||
|
||||
const chatBubble = swiperRefs.current[index];
|
||||
|
||||
const swipeGesture = createGesture({
|
||||
el: chatBubble,
|
||||
onEnd: e => checkBubble(chatBubble, message, e),
|
||||
onMove: e => moveBubble(chatBubble, e)
|
||||
});
|
||||
|
||||
swipeGesture.enable();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const widthAnimation = {
|
||||
|
||||
property: "width",
|
||||
fromValue: "110%",
|
||||
toValue: "100%"
|
||||
};
|
||||
|
||||
const fadeAnimation = {
|
||||
|
||||
property: "opacity",
|
||||
fromValue: "100%",
|
||||
toValue: "0%"
|
||||
};
|
||||
|
||||
const sideButtonsAnimation = {
|
||||
|
||||
duration: 200,
|
||||
direction: showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ fadeAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
const sendButtonAnimation = {
|
||||
|
||||
duration: showSendButton ? 300 : 100,
|
||||
direction: !showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ fadeAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
const textareaAnimation = {
|
||||
|
||||
duration: 200,
|
||||
direction: !showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ widthAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
// Set the state value when message val changes
|
||||
useEffect(() => {
|
||||
|
||||
setShowSendButton(message !== "");
|
||||
}, [ message ]);
|
||||
|
||||
// Play the animations when the state value changes
|
||||
useEffect(() => {
|
||||
|
||||
textareaRef.current.animation.play();
|
||||
sideRef.current.animation.play();
|
||||
sendRef.current.animation.play();
|
||||
}, [ showSendButton ]);
|
||||
|
||||
const sendMessage = (image = false, imagePath = false) => {
|
||||
|
||||
if (message !== "" || image === true) {
|
||||
|
||||
sendChatMessage(params.contact_id, message, replyToMessage, replyToMessage ? replyToMessage.id : false, image, imagePath);
|
||||
setMessage("");
|
||||
|
||||
setMessageSent(true);
|
||||
setTimeout(() => setMessageSent(false), 10);
|
||||
image && setTimeout(() => scrollToBottom(), 100);
|
||||
}
|
||||
}
|
||||
|
||||
const handlePhoto = async () => {
|
||||
|
||||
const returnedFilePath = await takePhoto();
|
||||
sendMessage(true, returnedFilePath);
|
||||
}
|
||||
|
||||
const handlePrompt = async () => {
|
||||
|
||||
const returnedFilePath = await prompt();
|
||||
sendMessage(true, returnedFilePath);
|
||||
}
|
||||
|
||||
const replyToProps = {
|
||||
|
||||
replyToAnimationRef,
|
||||
replyToMessage,
|
||||
setReplyToMessage,
|
||||
contact: contact.name,
|
||||
messageSent
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<IonPage className="chat-page">
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonBackButton slot="start" text={ (notificationCount > 0) ? notificationCount : "" } />
|
||||
<IonTitle>
|
||||
|
||||
<div className="chat-contact">
|
||||
<img src={ contact.avatar } alt="avatar" />
|
||||
<div className="chat-contact-details">
|
||||
<p>{ contact.name }</p>
|
||||
<IonText color="medium">last seen today at 22:10</IonText>
|
||||
</div>
|
||||
</div>
|
||||
</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={ () => toaster("As this is a UI only, video calling wouldn't work here.")}>
|
||||
<IonIcon icon={ videocamOutline } />
|
||||
</IonButton>
|
||||
|
||||
<IonButton fill="clear" onClick={ () => toaster("As this is a UI only, calling wouldn't work here.")}>
|
||||
<IonIcon icon={ callOutline } />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent id="main-chat-content" ref={ contentRef }>
|
||||
|
||||
{ chat.map((message, index) => {
|
||||
|
||||
const repliedMessage = chat.filter(subMessage => parseInt(subMessage.id) === parseInt(message.replyID))[0];
|
||||
|
||||
return (
|
||||
<div ref={ ref => swiperRefs.current[index] = ref } id={ `chatBubble_${ message.id }`} key={ index } className={ `chat-bubble ${ message.sent ? "bubble-sent" : "bubble-received" }` } { ...longPressEvent }>
|
||||
<div id={ `chatText_${ message.id }`}>
|
||||
|
||||
<ChatRepliedQuote message={ message } contact={ contact } repliedMessage={ repliedMessage } />
|
||||
|
||||
{ message.preview }
|
||||
{ message.image && message.imagePath && <img src={ message.imagePath } alt="chat message" /> }
|
||||
<ChatBottomDetails message={ message } />
|
||||
</div>
|
||||
|
||||
<div className={ `bubble-arrow ${ message.sent && "alt" }` }></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<IonActionSheet header="Message Actions" subHeader={ actionMessage && actionMessage.preview } isOpen={ showActionSheet } onDidDismiss={ () => setShowActionSheet(false) } buttons={ actionSheetButtons } />
|
||||
|
||||
<IonToast color="primary" isOpen={ showToast } onDidDismiss={ () => setShowToast(false) } message={ toastMessage } position="bottom" duration="3000" />
|
||||
</IonContent>
|
||||
|
||||
{ replyToMessage && <ReplyTo { ...replyToProps } /> }
|
||||
|
||||
<IonFooter className="chat-footer" id="chat-footer">
|
||||
<IonGrid>
|
||||
<IonRow className="ion-align-items-center">
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ addOutline } color="primary" onClick={ handlePrompt } />
|
||||
</IonCol>
|
||||
|
||||
<div className="chat-input-container">
|
||||
<CreateAnimation ref={ textareaRef } { ...textareaAnimation }>
|
||||
<IonTextarea rows="1" value={ message } onIonChange={ e => setMessage(e.target.value) } />
|
||||
</CreateAnimation>
|
||||
</div>
|
||||
|
||||
<CreateAnimation ref={ sideRef } { ...sideButtonsAnimation }>
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ cameraOutline } color="primary" onClick={ handlePhoto } />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ micOutline } color="primary" />
|
||||
</IonCol>
|
||||
</CreateAnimation>
|
||||
|
||||
<CreateAnimation ref={ sendRef } { ...sendButtonAnimation }>
|
||||
<IonCol size="1" className="chat-send-button" onClick={ sendMessage }>
|
||||
<IonIcon icon={ send } />
|
||||
</IonCol>
|
||||
</CreateAnimation>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonFooter>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chat;
|
||||
@@ -1,112 +0,0 @@
|
||||
.chat-row {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
/* align-content: center; */
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.chat-row ion-item {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-row img {
|
||||
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 500px;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-content h2 {
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-content p,
|
||||
.chat-content h2 {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-content p {
|
||||
|
||||
font-size: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
.chat-content p ion-icon {
|
||||
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.chat-name-date {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-details .chat-date {
|
||||
|
||||
color: rgb(153, 153, 153);
|
||||
font-size: 0.8rem;
|
||||
padding-left: 0.5rem;;
|
||||
}
|
||||
|
||||
.chat-details .chat-unread {
|
||||
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.chat-notification-count {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
align-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-notification {
|
||||
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem;
|
||||
background-color: var(--ion-color-primary);
|
||||
border-radius: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.chat-content-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonButtons, IonButton, IonIcon, IonItem, IonModal } from '@ionic/react';
|
||||
import { checkmarkDone, createOutline } from 'ionicons/icons';
|
||||
import './Chats.css';
|
||||
|
||||
import { ChatStore, ContactStore } from '../store';
|
||||
import { getContacts, getChats } from '../store/Selectors';
|
||||
import { useEffect, useState } from 'react';
|
||||
import ChatItem from '../components/ChatItem';
|
||||
import { useRef } from 'react';
|
||||
import ContactModal from '../components/ContactModal';
|
||||
|
||||
const Chats = () => {
|
||||
|
||||
const pageRef = useRef();
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
const latestChats = ChatStore.useState(getChats);
|
||||
|
||||
const [ results, setResults ] = useState(latestChats);
|
||||
const [ showContactModal, setShowContactModal ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
setResults(latestChats);
|
||||
}, [ latestChats ]);
|
||||
|
||||
const search = e => {
|
||||
|
||||
const searchTerm = e.target.value;
|
||||
|
||||
if (searchTerm !== "") {
|
||||
|
||||
const searchTermLower = searchTerm.toLowerCase();
|
||||
|
||||
const newResults = latestChats.filter(chat => contacts.filter(c => c.id === chat.contact_id)[0].name.toLowerCase().includes(searchTermLower));
|
||||
setResults(newResults);
|
||||
} else {
|
||||
|
||||
setResults(latestChats);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage ref={ pageRef }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={ () => setShowContactModal(true) }>
|
||||
<IonIcon icon={ createOutline } />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Chats</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Chats</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonSearchbar onIonChange={ e => search(e) } />
|
||||
</IonHeader>
|
||||
|
||||
|
||||
{ results.map((chat, index) => {
|
||||
|
||||
return <ChatItem chat={ chat } key={ index } />;
|
||||
})}
|
||||
|
||||
<IonModal isOpen={ showContactModal } swipeToClose={ true } presentingElement={ pageRef.current } onDidDismiss={ () => setShowContactModal(false) }>
|
||||
<ContactModal close={ () => setShowContactModal(false) } />
|
||||
</IonModal>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chats;
|
||||
@@ -1,120 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonContent, IonHeader, IonIcon, IonItem, IonList, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import { camera, cloudUpload, cloudUploadOutline, heart, helpOutline, informationOutline, key, laptop, laptopOutline, logoWhatsapp, mailUnreadOutline, notificationsOutline, pencil, qrCodeOutline, star } from 'ionicons/icons';
|
||||
import styles from './Settings.module.scss';
|
||||
|
||||
const Settings = () => {
|
||||
|
||||
const settings = [
|
||||
|
||||
[
|
||||
{
|
||||
title: "Starred Messages",
|
||||
url: "/starred-messages",
|
||||
icon: star,
|
||||
color: "rgb(255, 208, 0)"
|
||||
},
|
||||
{
|
||||
title: "WhatsApp Web/Desktop",
|
||||
icon: laptopOutline,
|
||||
color: "rgb(33, 165, 114)"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Account",
|
||||
icon: key,
|
||||
color: "rgb(0, 81, 255)"
|
||||
},
|
||||
{
|
||||
title: "Chats",
|
||||
icon: logoWhatsapp,
|
||||
color: "rgb(79, 182, 96)"
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
icon: mailUnreadOutline,
|
||||
color: "rgb(233, 46, 46)"
|
||||
},
|
||||
{
|
||||
title: "Storage and Data",
|
||||
icon: cloudUploadOutline,
|
||||
color: "rgb(79, 182, 96)"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Help",
|
||||
icon: informationOutline,
|
||||
color: "rgb(0, 81, 255)"
|
||||
},
|
||||
{
|
||||
title: "Tell a Friend",
|
||||
icon: heart,
|
||||
color: "rgb(228, 70, 70)"
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
return (
|
||||
<IonPage className={ styles.settingsPage }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonItem lines="none" className={ `${ styles.statusAvatar }` }>
|
||||
<img src="https://pbs.twimg.com/profile_images/1383061489469292548/5dhsPd4j_400x400.jpg" alt="avatar" />
|
||||
<IonCol className="ion-padding-start">
|
||||
<IonText color="white">
|
||||
<strong>Alan Montgomery</strong>
|
||||
</IonText>
|
||||
<br />
|
||||
<IonText color="medium" className={ styles.smallText }>This is my status!</IonText>
|
||||
</IonCol>
|
||||
|
||||
<IonRow className={ styles.statusActions }>
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ qrCodeOutline } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonItem>
|
||||
|
||||
{ settings.map((setting, index) => {
|
||||
|
||||
return (
|
||||
|
||||
<IonList key={ `setting_${ index }` } className={ `${ styles.settingsList } ion-margin-top ion-padding-top` }>
|
||||
|
||||
{ setting.map((option, index) => {
|
||||
|
||||
var itemStyle = { "--setting-item-color": option.color };
|
||||
|
||||
return (
|
||||
|
||||
<IonItem routerLink={ option.url ? option.url : "" } key={ `settingOption_${ index }` } lines="none" detail={ true }>
|
||||
<IonIcon icon={ option.icon } color="white" style={ itemStyle } />
|
||||
<p>{ option.title }</p>
|
||||
</IonItem>
|
||||
);
|
||||
})}
|
||||
</IonList>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="ion-text-center ion-justify-content-center ion-margin-top ion-padding-top">
|
||||
<IonText>from</IonText>
|
||||
<IonCardSubtitle className="ion-no-padding ion-no-margin">IONIC React HUB</IonCardSubtitle>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -1,69 +0,0 @@
|
||||
.settingsPage {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsList {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
// border: none !important;
|
||||
border-top: 1px solid rgb(34, 34, 34);
|
||||
border-bottom: 1px solid rgb(36, 36, 36);
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem;
|
||||
font-size: 1.4rem;
|
||||
margin-right: 1.2rem;
|
||||
--setting-item-color: white;
|
||||
background-color: var(--setting-item-color);
|
||||
color: rgb(233, 46, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smallText {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
img {
|
||||
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusActions {
|
||||
|
||||
ion-icon {
|
||||
|
||||
padding: 0.5rem;
|
||||
background-color: rgb(56, 56, 56);
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { IonBackButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonViewWillEnter } from '@ionic/react';
|
||||
import { chevronForward } from 'ionicons/icons';
|
||||
import { useState } from 'react';
|
||||
import { ChatStore, ContactStore } from '../store';
|
||||
import { getChats, getContacts } from '../store/Selectors';
|
||||
|
||||
import "./Starred.scss";
|
||||
|
||||
const Starred = () => {
|
||||
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
const chats = ChatStore.useState(getChats);
|
||||
|
||||
const [ starredMessages, setStarredMessages ] = useState(false);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
|
||||
var tempChats = [ ...chats ];
|
||||
var starred = [];
|
||||
|
||||
tempChats.forEach(tempChat => {
|
||||
|
||||
tempChat.chats.forEach(chat => {
|
||||
|
||||
if (chat.starred) {
|
||||
|
||||
starred.push({
|
||||
|
||||
contact_id: tempChat.contact_id,
|
||||
...chat
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setStarredMessages(starred);
|
||||
});
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonBackButton slot="start" text="Settings" />
|
||||
<IonTitle>Starred Messages</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
|
||||
{ starredMessages && starredMessages.map(starredMessage => {
|
||||
|
||||
const { id, contact_id, date, preview, received } = starredMessage;
|
||||
const contact = contacts.filter(c => c.id === contact_id)[0];
|
||||
|
||||
return (
|
||||
<div key={ `${ contact_id }_${ id }` } className="starred-message">
|
||||
<div className="starred-header">
|
||||
|
||||
<div className="starred-contact">
|
||||
<img src={ contact.avatar } alt="starred avatar" />
|
||||
<p>{ contact.name }</p>
|
||||
</div>
|
||||
|
||||
<p className="starred-date">{ date }</p>
|
||||
|
||||
</div>
|
||||
<div className={ `starred-content ${ received ? "received-starred-content" : "sent-starred-content" }` }>
|
||||
<p>{ preview }</p>
|
||||
<IonIcon icon={ chevronForward } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{ starredMessages.length < 1 &&
|
||||
|
||||
<div className="no-starred">
|
||||
<img src="/assets/nostarred.png" alt="no starred" />
|
||||
<h1>No Starred Messages</h1>
|
||||
<p>Tap and hold on any message to star it, so you can easily find it later.</p>
|
||||
</div>
|
||||
}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Starred;
|
||||
@@ -1,117 +0,0 @@
|
||||
.starred-message {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.starred-header {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.starred-contact {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
|
||||
img {
|
||||
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
margin-left: 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.starred-date {
|
||||
|
||||
margin-right: 1.5rem;
|
||||
color: rgb(138, 138, 138);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.starred-content {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right: 1.5rem;
|
||||
margin-left: 3.2rem;
|
||||
|
||||
ion-icon {
|
||||
|
||||
color: rgb(138, 138, 138);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
border-radius: 10px;
|
||||
max-width: 75%;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.received-starred-content {
|
||||
|
||||
p {
|
||||
|
||||
background-color: var(--chat-bubble-received-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sent-starred-content {
|
||||
|
||||
p {
|
||||
|
||||
background-color: var(--chat-bubble-sent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.starred-content:not(:first-child) {
|
||||
|
||||
border-bottom: 2px solid rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
.no-starred {
|
||||
|
||||
padding: 3rem;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
|
||||
img {
|
||||
|
||||
border-radius: 500px;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { IonContent, IonCardTitle, IonIcon, IonCol, IonItem, IonHeader, IonPage, IonTitle, IonToolbar, IonButtons, IonButton, IonText, IonRow } from '@ionic/react';
|
||||
import { add, camera, pencil } from 'ionicons/icons';
|
||||
import styles from './Status.module.scss';
|
||||
|
||||
const Status = () => {
|
||||
return (
|
||||
<IonPage className={ styles.statusPage }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear">Privacy</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Status</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Status</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonItem lines="none" className={ `${ styles.statusAvatar } ion-margin-top` }>
|
||||
<img src="https://pbs.twimg.com/profile_images/1383061489469292548/5dhsPd4j_400x400.jpg" alt="avatar" />
|
||||
<div className={ styles.imageUpload }>
|
||||
<IonIcon icon={ add } color="white" />
|
||||
</div>
|
||||
<IonCol className="ion-padding-start">
|
||||
<IonText color="white">
|
||||
<strong>My Status</strong>
|
||||
</IonText>
|
||||
<br />
|
||||
<IonText color="medium" className={ styles.smallText }>Add to my status</IonText>
|
||||
</IonCol>
|
||||
|
||||
<IonRow className={ styles.statusActions }>
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ camera } />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ pencil } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonItem>
|
||||
|
||||
<p color="medium" className={ `ion-text-center ${ styles.updates }` }>No recent updates to show right now.</p>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Status;
|
||||
@@ -1,73 +0,0 @@
|
||||
.statusPage {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.updates {
|
||||
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 1rem;
|
||||
color: rgb(144, 144, 144);
|
||||
|
||||
ion-text {
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.smallText {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
img {
|
||||
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusActions {
|
||||
|
||||
ion-icon {
|
||||
|
||||
padding: 0.5rem;
|
||||
background-color: rgb(56, 56, 56);
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.imageUpload {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background-color: var(--ion-color-primary);
|
||||
border-radius: 500px;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
margin-left: 2.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# TODO
|
||||
|
||||
need to resolve path problem
|
||||
|
||||
`demo-react-whatsapp-clone` sub path from the main
|
||||
@@ -1,10 +0,0 @@
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import { checkmarkDone, star } from 'ionicons/icons';
|
||||
|
||||
export const ChatBottomDetails = ({ message }) => (
|
||||
<span className="chat-bottom-details" id={`chatTime_${message.id}`}>
|
||||
<span>{message.date}</span>
|
||||
{message.sent && <IonIcon icon={checkmarkDone} color="primary" style={{ fontSize: '0.8rem' }} />}
|
||||
{message.starred && <IonIcon icon={star} />}
|
||||
</span>
|
||||
);
|
||||
@@ -1,38 +0,0 @@
|
||||
import { IonIcon, IonItem } from '@ionic/react';
|
||||
import { checkmarkDone } from 'ionicons/icons';
|
||||
import { ContactStore } from '../store';
|
||||
import { getContacts } from '../store/Selectors';
|
||||
|
||||
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 (
|
||||
<div className="chat-row" id="chat-row">
|
||||
<img src={contact.avatar} alt="avatar" />
|
||||
|
||||
<IonItem className="chat-content-container" routerLink={`/view-chat/${contact.id}`} detail={false}>
|
||||
<div className="chat-content">
|
||||
<div className="chat-name-date">
|
||||
<h2>{contact.name}</h2>
|
||||
</div>
|
||||
<p className="ion-text-wrap">
|
||||
{read && received && <IonIcon icon={checkmarkDone} color="primary" />}
|
||||
{preview}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="chat-details">
|
||||
<p className={`chat-date ${notificationCount > 0 && 'chat-unread'}`}>{date}</p>
|
||||
|
||||
{notificationCount > 0 && <div className="chat-notification">{notificationCount}</div>}
|
||||
</div>
|
||||
</IonItem>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatItem;
|
||||
@@ -1,14 +0,0 @@
|
||||
const Quote = ({ message, contact, repliedMessage }) => (
|
||||
<div className="in-chat-reply-to-container">
|
||||
<h1>{contact.name}</h1>
|
||||
<p>{repliedMessage.preview}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ChatRepliedQuote = ({ message, contact, repliedMessage }) => {
|
||||
if (message.reply && repliedMessage) {
|
||||
return <Quote message={message} contact={contact} repliedMessage={repliedMessage} />;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
import { IonButton, IonButtons, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import { ContactStore } from '../store';
|
||||
import { getContacts } from '../store/Selectors';
|
||||
|
||||
import './ContactModal.scss';
|
||||
|
||||
const ContactModal = ({ close }) => {
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>New Chat</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={close}>
|
||||
Cancel
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonList>
|
||||
{contacts.map((contact) => {
|
||||
return (
|
||||
<IonItem key={`contact_${contact.id}`} lines="full" className="contact-item">
|
||||
<img src={contact.avatar} alt="contact avatar" />
|
||||
<IonLabel>
|
||||
<h1>{contact.name}</h1>
|
||||
<p>Available</p>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
);
|
||||
})}
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactModal;
|
||||
@@ -1,14 +0,0 @@
|
||||
.contact-item {
|
||||
img {
|
||||
border-radius: 500px;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
ion-label {
|
||||
h1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { CreateAnimation, IonButton, IonCol, IonIcon, IonLabel, IonRow } from '@ionic/react';
|
||||
import { closeCircleOutline } from 'ionicons/icons';
|
||||
import { useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const ReplyTo = ({ contact, replyToMessage = false, replyToAnimationRef, setReplyToMessage, messageSent }) => {
|
||||
const [cancellingReplyTo, setCancellingReplyTo] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
messageSent && cancelReplyTo();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [messageSent]);
|
||||
|
||||
const slideAnimation = {
|
||||
property: 'transform',
|
||||
fromValue: 'translateY(100px)',
|
||||
toValue: 'translateY(0px)',
|
||||
};
|
||||
|
||||
const replyToAnimation = {
|
||||
duration: 300,
|
||||
direction: !cancellingReplyTo ? 'normal' : 'reverse',
|
||||
iterations: '1',
|
||||
fromTo: [slideAnimation],
|
||||
easing: 'ease-in-out',
|
||||
};
|
||||
|
||||
// Cancel the reply-to
|
||||
const cancelReplyTo = async () => {
|
||||
setCancellingReplyTo(true);
|
||||
await replyToAnimationRef.current.animation.play();
|
||||
setCancellingReplyTo(false);
|
||||
setReplyToMessage(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<CreateAnimation ref={replyToAnimationRef} {...replyToAnimation}>
|
||||
<IonRow className="ion-align-items-center chat-reply-to-row" id="replyTo">
|
||||
<IonCol size="10" className="chat-reply-to-container">
|
||||
<IonLabel className="chat-reply-to-name">{contact}</IonLabel>
|
||||
<IonLabel className="chat-reply-to-message">{replyToMessage.preview}</IonLabel>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="1">
|
||||
<IonButton fill="clear" onClick={cancelReplyTo}>
|
||||
<IonIcon size="large" icon={closeCircleOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</CreateAnimation>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReplyTo;
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Route } from 'react-router-dom';
|
||||
|
||||
const SubPages = (props) => {
|
||||
return (
|
||||
<>
|
||||
{props.routes.map((route, i) => {
|
||||
const RouteComponent = route.component;
|
||||
|
||||
return <Route key={i} path={route.path} render={(props) => <RouteComponent {...props} />} exact={false} />;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubPages;
|
||||
@@ -1,35 +0,0 @@
|
||||
import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs, IonRouterOutlet } from '@ionic/react';
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
|
||||
const Tabs = (props) => {
|
||||
return (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
{props.tabs.map((tab, i) => {
|
||||
const TabComponent = tab.component;
|
||||
|
||||
if (tab.isTab) {
|
||||
return <Route key={`tab_route_${i}`} path={tab.path} render={(props) => <TabComponent {...props} />} exact={true} />;
|
||||
} else {
|
||||
return <Route key={`child_tab_route_${i}`} path={tab.path} render={(props) => <TabComponent {...props} />} exact={false} />;
|
||||
}
|
||||
})}
|
||||
</IonRouterOutlet>
|
||||
|
||||
<IonTabBar slot={props.position}>
|
||||
{props.tabs.map((tab, i) => {
|
||||
if (tab.isTab) {
|
||||
return (
|
||||
<IonTabButton key={`tab_button_${i + 1}`} tab={`tab_${i + 1}`} href={tab.path}>
|
||||
<IonIcon icon={tab.icon} />
|
||||
{tab.label && <IonLabel>{tab.label}</IonLabel>}
|
||||
</IonTabButton>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
@@ -1,14 +0,0 @@
|
||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
|
||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
||||
import { Route, Redirect } from 'react-router';
|
||||
|
||||
import NavRoutes from './nav/NavRoutes.jsx';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
function DemoReactWhatsAppClone() {
|
||||
return <NavRoutes />;
|
||||
}
|
||||
|
||||
export default DemoReactWhatsAppClone;
|
||||
@@ -1,73 +0,0 @@
|
||||
// Main Tabs
|
||||
import Status from '../pages/Status';
|
||||
import Calls from '../pages/Calls';
|
||||
import Chats from '../pages/Chats';
|
||||
import Settings from '../pages/Settings';
|
||||
|
||||
// Main tab children
|
||||
import Chat from '../pages/Chat';
|
||||
import Starred from '../pages/Starred';
|
||||
|
||||
// Sub pages
|
||||
// import InboxItem from "../../pages/InboxItem";
|
||||
|
||||
// Tab icons
|
||||
import { callOutline, cameraOutline, chatbubblesOutline, discOutline, settingsOutline } from 'ionicons/icons';
|
||||
|
||||
// Import custom tab menu
|
||||
import Tabs from '../components/Tabs';
|
||||
import SubPages from '../components/SubPages';
|
||||
|
||||
// Array of objects representing tab pages
|
||||
// These will be the main tabs across the app
|
||||
|
||||
// * PARAMS per tab object *
|
||||
// isTab = true will make the tab appear
|
||||
// default = the default tab page to open and be redirected to at "/"
|
||||
// NOTE: there should only be one default tab (default: true)
|
||||
// label = the label to show with the tab
|
||||
// component = the component related to this tab page
|
||||
// icon = icon to show on the tab bar menu
|
||||
// path = the path which the tab is accessible
|
||||
export const tabRoutes = [
|
||||
{ label: 'Status', component: Status, icon: discOutline, path: '/tabs/status', default: false, isTab: true },
|
||||
{ label: 'Calls', component: Calls, icon: callOutline, path: '/tabs/calls', default: false, isTab: true },
|
||||
{ label: 'Camera', component: Calls, icon: cameraOutline, path: '/tabs/camera', default: false, isTab: true },
|
||||
{ label: 'Chats', component: Chats, icon: chatbubblesOutline, path: '/tabs/chats', default: true, isTab: true },
|
||||
{ label: 'Settings', component: Settings, icon: settingsOutline, path: '/tabs/settings', default: false, isTab: true },
|
||||
];
|
||||
|
||||
// Array of objects representing children pages of tabs
|
||||
|
||||
// * PARAMS per tab object *
|
||||
// isTab = should always be set to false for these
|
||||
// component = the component related to this tab page
|
||||
// path = the path which the tab is accessible
|
||||
|
||||
// These pages should be related to tab pages and be held within the same path
|
||||
// E.g. /tabs/tab1/child
|
||||
const tabChildrenRoutes = [
|
||||
// { component: InboxItem, path: "/tabs/tab2/:id", isTab: false },
|
||||
];
|
||||
|
||||
// Array of objects representing sub pages
|
||||
|
||||
// * PARAMS per tab object *
|
||||
// component = the component related to this sub page
|
||||
// path = the path which the sub page is accessible
|
||||
|
||||
// This array should be sub pages which are not directly related to a tab page
|
||||
// E.g. /child
|
||||
const subPageRoutes = [
|
||||
{ component: Chat, path: '/view-chat/:contact_id' },
|
||||
{ component: Starred, path: '/starred-messages' },
|
||||
];
|
||||
|
||||
// Let's combine these together as they need to be controlled within the same IonRouterOutlet
|
||||
const tabsAndChildrenRoutes = [...tabRoutes, ...tabChildrenRoutes];
|
||||
|
||||
// Render sub routes
|
||||
export const AllSubPages = () => <SubPages routes={subPageRoutes} />;
|
||||
|
||||
// Render tab menu
|
||||
export const AllTabs = () => <Tabs tabs={tabsAndChildrenRoutes} position="bottom" />;
|
||||
@@ -1,20 +0,0 @@
|
||||
import { IonRouterOutlet } from '@ionic/react';
|
||||
import { IonReactRouter } from '@ionic/react-router';
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
import { AllSubPages, AllTabs, tabRoutes } from './AllRoutes.jsx';
|
||||
|
||||
const NavRoutes = () => {
|
||||
return (
|
||||
<IonReactRouter>
|
||||
<IonRouterOutlet id="main">
|
||||
<Route path="/demo-react-whatsapp-clone/tabs" render={() => <AllTabs />} />
|
||||
<AllSubPages />
|
||||
|
||||
<Route path="/demo-react-whatsapp-clone" component={tabRoutes.filter((t) => t.default)[0].component} exact={true} />
|
||||
<Redirect exact from="/demo-react-whatsapp-clone" to={'/demo-react-whatsapp-clone' + tabRoutes.filter((t) => t.default)[0].path.toString()} />
|
||||
</IonRouterOutlet>
|
||||
</IonReactRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavRoutes;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import './Calls.css';
|
||||
|
||||
const Calls = () => {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Calls</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Calls</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calls;
|
||||
@@ -1,289 +0,0 @@
|
||||
.chat-page ion-header,
|
||||
.chat-page ion-toolbar {
|
||||
|
||||
--min-height: 3.5rem;
|
||||
}
|
||||
|
||||
.chat-page ion-title {
|
||||
|
||||
margin-left: -3.5rem;
|
||||
}
|
||||
|
||||
.chat-page ion-title p {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-contact {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-contact img {
|
||||
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.chat-contact-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-contact-details p {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-contact-details ion-text {
|
||||
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
|
||||
border-radius: 5px;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
padding: 0.5rem;
|
||||
max-width: 80%;
|
||||
clear: both;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transition: 0.2s all linear;
|
||||
}
|
||||
|
||||
.chat-bubble:last-child {
|
||||
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.bubble-sent {
|
||||
|
||||
background-color: var(--chat-bubble-sent-color);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bubble-received {
|
||||
|
||||
background-color: var(--chat-bubble-received-color);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chat-bubble p {
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
|
||||
background-color: rgb(22, 22, 22);
|
||||
border-top: 1px solid rgb(47, 47, 47);
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.chat-footer ion-textarea {
|
||||
|
||||
background-color: rgb(31, 31, 31);
|
||||
border: 1px solid rgb(36, 36, 36);
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
padding-left: 0.5rem;
|
||||
caret-color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.chat-footer ion-icon {
|
||||
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
|
||||
width: 70%;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.chat-send-button {
|
||||
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
margin-top: -0.2rem !important;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-send-button ion-icon {
|
||||
|
||||
color: white;
|
||||
background-color: var(--ion-color-primary);
|
||||
font-size: 1.1rem;
|
||||
border-radius: 500px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 0.75rem;
|
||||
right: 0;
|
||||
bottom: 0 !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bubble-arrow {
|
||||
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 6px;
|
||||
margin-top: -8px;
|
||||
/* top: 0px; */
|
||||
}
|
||||
|
||||
.bubble-arrow.alt {
|
||||
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: auto;
|
||||
right: -3px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bubble-arrow:after {
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-top: 15px solid var(--chat-bubble-received-color);
|
||||
border-left: 15px solid transparent;
|
||||
border-radius: 4px 0 0 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.bubble-arrow.alt:after {
|
||||
|
||||
border-top: 15px solid var(--chat-bubble-sent-color);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.chat-reply-to-row {
|
||||
|
||||
bottom: 70px !important;
|
||||
position: absolute;
|
||||
|
||||
border-left: 4px solid rgb(224, 176, 18);
|
||||
width: 100%;
|
||||
background-color: rgb(22, 22, 22);
|
||||
border-top: 1px solid rgb(47, 47, 47);
|
||||
padding: 0.5rem;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.chat-reply-to-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-reply-to-name {
|
||||
|
||||
color: rgb(224, 176, 18);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-reply-to-message {
|
||||
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.all-chats {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.chat-bottom-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.chat-bottom-details ion-icon {
|
||||
|
||||
font-size: 0.6rem;
|
||||
color: grey;
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
|
||||
.chat-bottom-details span {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.75rem;
|
||||
color: rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container {
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-left: 3px solid rgb(224, 176, 18);
|
||||
height: fit-content;
|
||||
padding: 0.5rem;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container h1 {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: rgb(224, 176, 18);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.in-chat-reply-to-container p {
|
||||
|
||||
color: rgb(167, 167, 167);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
|
||||
position: absolute;
|
||||
bottom: 4.5rem;
|
||||
height: 5rem;
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,378 +0,0 @@
|
||||
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonFooter, IonGrid, IonHeader, IonIcon, IonPage, IonRow, IonText, IonTextarea, IonTitle, IonToolbar, CreateAnimation, createGesture, useIonViewWillEnter, IonActionSheet, IonToast } from "@ionic/react";
|
||||
import { addOutline, alertOutline, callOutline, cameraOutline, micOutline, send, shareOutline, starOutline, trashOutline, videocamOutline } from "ionicons/icons";
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { ChatStore, ContactStore } from "../store";
|
||||
import { getNotificationCount, markAllAsRead, sendChatMessage, starChatMessage } from "../store/ChatStore";
|
||||
import { getChat, getChats, getContact } from "../store/Selectors";
|
||||
|
||||
import { useLongPress } from 'react-use';
|
||||
import "./Chat.css"
|
||||
import ReplyTo from "../components/ReplyTo";
|
||||
import { ChatBottomDetails } from "../components/ChatBottomDetails";
|
||||
import { ChatRepliedQuote } from "../components/ChatRepliedQuote";
|
||||
import { useCamera } from "../hooks/useCamera";
|
||||
import { useGallery } from "../hooks/useGallery";
|
||||
|
||||
const Chat = () => {
|
||||
|
||||
const params = useParams();
|
||||
|
||||
// Global State
|
||||
const chat = ChatStore.useState(getChat(params.contact_id));
|
||||
const chats = ChatStore.useState(getChats);
|
||||
const contact = ContactStore.useState(getContact(params.contact_id));
|
||||
const notificationCount = getNotificationCount(chats);
|
||||
|
||||
const { takePhoto } = useCamera();
|
||||
const { prompt } = useGallery();
|
||||
|
||||
// Local state
|
||||
const [ message, setMessage ] = useState("");
|
||||
const [ showSendButton, setShowSendButton ] = useState(false);
|
||||
const [ replyToMessage, setReplyToMessage ] = useState(false);
|
||||
const [ messageSent, setMessageSent ] = useState(false);
|
||||
|
||||
const [ showActionSheet, setShowActionSheet ] = useState(false);
|
||||
const [ actionMessage, setActionMessage ] = useState(false);
|
||||
|
||||
const [ showToast, setShowToast ] = useState(false);
|
||||
const [ toastMessage, setToastMessage ] = useState("");
|
||||
|
||||
// Refs
|
||||
const contentRef = useRef();
|
||||
const swiperRefs = useRef([]);
|
||||
const textareaRef = useRef();
|
||||
const sideRef = useRef();
|
||||
const sendRef = useRef();
|
||||
const replyToAnimationRef = useRef();
|
||||
|
||||
const actionSheetButtons = [
|
||||
|
||||
{
|
||||
text: (actionMessage && actionMessage.starred) ? "Unstar Message" : "Star Message",
|
||||
icon: starOutline,
|
||||
handler: () => starChatMessage(params.contact_id, actionMessage.id)
|
||||
},
|
||||
actionMessage && actionMessage.received ?
|
||||
{
|
||||
text: "Reply To Message",
|
||||
icon: shareOutline,
|
||||
handler: () => showReplyToMessage(actionMessage)
|
||||
}
|
||||
:
|
||||
{
|
||||
text: "Unsend Message",
|
||||
icon: alertOutline,
|
||||
handler: () => toaster("I haven't implemented unsend :) Simple store update though")
|
||||
},
|
||||
{
|
||||
text: "Delete Message",
|
||||
icon: trashOutline,
|
||||
handler: () => toaster("I haven't implemented delete :) Simple store update though"),
|
||||
role: "destructive"
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
!showActionSheet && setActionMessage(false);
|
||||
}, [ showActionSheet ]);
|
||||
|
||||
// Scroll to end of content
|
||||
// Mark all chats as read if we come into a chat
|
||||
// Set up our swipe events for animations and gestures
|
||||
useIonViewWillEnter(() => {
|
||||
|
||||
scrollToBottom();
|
||||
setupObserver();
|
||||
markAllAsRead(params.contact_id);
|
||||
setSwipeEvents();
|
||||
});
|
||||
|
||||
// For displaying toast messages
|
||||
const toaster = message => {
|
||||
|
||||
setToastMessage(message);
|
||||
setShowToast(true);
|
||||
}
|
||||
|
||||
// Scroll to end of content
|
||||
const scrollToBottom = async () => {
|
||||
|
||||
contentRef.current.scrollToBottom();
|
||||
}
|
||||
|
||||
// Watch for DOM changes
|
||||
// Then scroll to bottom
|
||||
// This ensures that the new chat message has *actually* been rendered
|
||||
// Check this:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
||||
const setupObserver = () => {
|
||||
|
||||
// Mutation Observers watch for DOM changes
|
||||
// This will ensure that we scroll to bottom AFTER the new chat has rendered
|
||||
const observer = new MutationObserver(() => {
|
||||
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
// We observe the ion-content (or containing element of chats)
|
||||
observer.observe(contentRef.current, {
|
||||
|
||||
childList: true
|
||||
});
|
||||
}
|
||||
|
||||
// Long press callback
|
||||
const onLongPress = (e) => {
|
||||
|
||||
const elementID = e.target.id;
|
||||
const chatMessageID = elementID.includes("chatText") ? parseInt(elementID.replace("chatText_", "")) : elementID.includes("chatTime") ? parseInt(elementID.replace("chatTime_", "")) : parseInt(elementID.replace("chatBubble_", ""));
|
||||
|
||||
const chatMessage = chat.filter(message => parseInt(message.id) === parseInt(chatMessageID))[0];
|
||||
|
||||
setActionMessage(chatMessage);
|
||||
setShowActionSheet(true);
|
||||
};
|
||||
|
||||
const longPressEvent = useLongPress(onLongPress, {
|
||||
|
||||
isPreventDefault: true,
|
||||
delay: 2000,
|
||||
});
|
||||
|
||||
const showReplyToMessage = async message => {
|
||||
|
||||
// Activate reply-to functionality
|
||||
setReplyToMessage(message);
|
||||
await replyToAnimationRef.current.animation.play();
|
||||
contentRef.current.scrollToBottom(300);
|
||||
}
|
||||
|
||||
const checkBubble = async (bubble, message, event) => {
|
||||
|
||||
if (event.deltaX >= 120) {
|
||||
|
||||
// Activate reply-to functionality
|
||||
bubble.style.transform = "none";
|
||||
showReplyToMessage(message);
|
||||
} else {
|
||||
|
||||
// Put chat bubble back to original position
|
||||
bubble.style.transform = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Function to move a bubble with the deltaX swipe
|
||||
const moveBubble = (bubble, event) => {
|
||||
|
||||
if (event.velocityX > 0) {
|
||||
|
||||
bubble.style.transform = `translateX(${ event.deltaX }px)`;
|
||||
}
|
||||
}
|
||||
|
||||
const setSwipeEvents = () => {
|
||||
|
||||
chat.forEach((message, index) => {
|
||||
|
||||
if (!message.sent) {
|
||||
|
||||
const chatBubble = swiperRefs.current[index];
|
||||
|
||||
const swipeGesture = createGesture({
|
||||
el: chatBubble,
|
||||
onEnd: e => checkBubble(chatBubble, message, e),
|
||||
onMove: e => moveBubble(chatBubble, e)
|
||||
});
|
||||
|
||||
swipeGesture.enable();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const widthAnimation = {
|
||||
|
||||
property: "width",
|
||||
fromValue: "110%",
|
||||
toValue: "100%"
|
||||
};
|
||||
|
||||
const fadeAnimation = {
|
||||
|
||||
property: "opacity",
|
||||
fromValue: "100%",
|
||||
toValue: "0%"
|
||||
};
|
||||
|
||||
const sideButtonsAnimation = {
|
||||
|
||||
duration: 200,
|
||||
direction: showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ fadeAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
const sendButtonAnimation = {
|
||||
|
||||
duration: showSendButton ? 300 : 100,
|
||||
direction: !showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ fadeAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
const textareaAnimation = {
|
||||
|
||||
duration: 200,
|
||||
direction: !showSendButton ? "normal" : "reverse",
|
||||
iterations: "1",
|
||||
fromTo: [ widthAnimation ],
|
||||
easing: "ease-in-out"
|
||||
};
|
||||
|
||||
// Set the state value when message val changes
|
||||
useEffect(() => {
|
||||
|
||||
setShowSendButton(message !== "");
|
||||
}, [ message ]);
|
||||
|
||||
// Play the animations when the state value changes
|
||||
useEffect(() => {
|
||||
|
||||
textareaRef.current.animation.play();
|
||||
sideRef.current.animation.play();
|
||||
sendRef.current.animation.play();
|
||||
}, [ showSendButton ]);
|
||||
|
||||
const sendMessage = (image = false, imagePath = false) => {
|
||||
|
||||
if (message !== "" || image === true) {
|
||||
|
||||
sendChatMessage(params.contact_id, message, replyToMessage, replyToMessage ? replyToMessage.id : false, image, imagePath);
|
||||
setMessage("");
|
||||
|
||||
setMessageSent(true);
|
||||
setTimeout(() => setMessageSent(false), 10);
|
||||
image && setTimeout(() => scrollToBottom(), 100);
|
||||
}
|
||||
}
|
||||
|
||||
const handlePhoto = async () => {
|
||||
|
||||
const returnedFilePath = await takePhoto();
|
||||
sendMessage(true, returnedFilePath);
|
||||
}
|
||||
|
||||
const handlePrompt = async () => {
|
||||
|
||||
const returnedFilePath = await prompt();
|
||||
sendMessage(true, returnedFilePath);
|
||||
}
|
||||
|
||||
const replyToProps = {
|
||||
|
||||
replyToAnimationRef,
|
||||
replyToMessage,
|
||||
setReplyToMessage,
|
||||
contact: contact.name,
|
||||
messageSent
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<IonPage className="chat-page">
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonBackButton slot="start" text={ (notificationCount > 0) ? notificationCount : "" } />
|
||||
<IonTitle>
|
||||
|
||||
<div className="chat-contact">
|
||||
<img src={ contact.avatar } alt="avatar" />
|
||||
<div className="chat-contact-details">
|
||||
<p>{ contact.name }</p>
|
||||
<IonText color="medium">last seen today at 22:10</IonText>
|
||||
</div>
|
||||
</div>
|
||||
</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={ () => toaster("As this is a UI only, video calling wouldn't work here.")}>
|
||||
<IonIcon icon={ videocamOutline } />
|
||||
</IonButton>
|
||||
|
||||
<IonButton fill="clear" onClick={ () => toaster("As this is a UI only, calling wouldn't work here.")}>
|
||||
<IonIcon icon={ callOutline } />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent id="main-chat-content" ref={ contentRef }>
|
||||
|
||||
{ chat.map((message, index) => {
|
||||
|
||||
const repliedMessage = chat.filter(subMessage => parseInt(subMessage.id) === parseInt(message.replyID))[0];
|
||||
|
||||
return (
|
||||
<div ref={ ref => swiperRefs.current[index] = ref } id={ `chatBubble_${ message.id }`} key={ index } className={ `chat-bubble ${ message.sent ? "bubble-sent" : "bubble-received" }` } { ...longPressEvent }>
|
||||
<div id={ `chatText_${ message.id }`}>
|
||||
|
||||
<ChatRepliedQuote message={ message } contact={ contact } repliedMessage={ repliedMessage } />
|
||||
|
||||
{ message.preview }
|
||||
{ message.image && message.imagePath && <img src={ message.imagePath } alt="chat message" /> }
|
||||
<ChatBottomDetails message={ message } />
|
||||
</div>
|
||||
|
||||
<div className={ `bubble-arrow ${ message.sent && "alt" }` }></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<IonActionSheet header="Message Actions" subHeader={ actionMessage && actionMessage.preview } isOpen={ showActionSheet } onDidDismiss={ () => setShowActionSheet(false) } buttons={ actionSheetButtons } />
|
||||
|
||||
<IonToast color="primary" isOpen={ showToast } onDidDismiss={ () => setShowToast(false) } message={ toastMessage } position="bottom" duration="3000" />
|
||||
</IonContent>
|
||||
|
||||
{ replyToMessage && <ReplyTo { ...replyToProps } /> }
|
||||
|
||||
<IonFooter className="chat-footer" id="chat-footer">
|
||||
<IonGrid>
|
||||
<IonRow className="ion-align-items-center">
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ addOutline } color="primary" onClick={ handlePrompt } />
|
||||
</IonCol>
|
||||
|
||||
<div className="chat-input-container">
|
||||
<CreateAnimation ref={ textareaRef } { ...textareaAnimation }>
|
||||
<IonTextarea rows="1" value={ message } onIonChange={ e => setMessage(e.target.value) } />
|
||||
</CreateAnimation>
|
||||
</div>
|
||||
|
||||
<CreateAnimation ref={ sideRef } { ...sideButtonsAnimation }>
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ cameraOutline } color="primary" onClick={ handlePhoto } />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="1">
|
||||
<IonIcon icon={ micOutline } color="primary" />
|
||||
</IonCol>
|
||||
</CreateAnimation>
|
||||
|
||||
<CreateAnimation ref={ sendRef } { ...sendButtonAnimation }>
|
||||
<IonCol size="1" className="chat-send-button" onClick={ sendMessage }>
|
||||
<IonIcon icon={ send } />
|
||||
</IonCol>
|
||||
</CreateAnimation>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonFooter>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chat;
|
||||
@@ -1,112 +0,0 @@
|
||||
.chat-row {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
/* align-content: center; */
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.chat-row ion-item {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-row img {
|
||||
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 500px;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-content h2 {
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-content p,
|
||||
.chat-content h2 {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-content p {
|
||||
|
||||
font-size: 1rem;
|
||||
margin-top: 0.2rem;
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
.chat-content p ion-icon {
|
||||
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.chat-name-date {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chat-details .chat-date {
|
||||
|
||||
color: rgb(153, 153, 153);
|
||||
font-size: 0.8rem;
|
||||
padding-left: 0.5rem;;
|
||||
}
|
||||
|
||||
.chat-details .chat-unread {
|
||||
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.chat-notification-count {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-details {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
align-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-notification {
|
||||
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem;
|
||||
background-color: var(--ion-color-primary);
|
||||
border-radius: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.chat-content-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonButtons, IonButton, IonIcon, IonItem, IonModal } from '@ionic/react';
|
||||
import { checkmarkDone, createOutline } from 'ionicons/icons';
|
||||
import './Chats.css';
|
||||
|
||||
import { ChatStore, ContactStore } from '../store';
|
||||
import { getContacts, getChats } from '../store/Selectors';
|
||||
import { useEffect, useState } from 'react';
|
||||
import ChatItem from '../components/ChatItem';
|
||||
import { useRef } from 'react';
|
||||
import ContactModal from '../components/ContactModal';
|
||||
|
||||
const Chats = () => {
|
||||
|
||||
const pageRef = useRef();
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
const latestChats = ChatStore.useState(getChats);
|
||||
|
||||
const [ results, setResults ] = useState(latestChats);
|
||||
const [ showContactModal, setShowContactModal ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
setResults(latestChats);
|
||||
}, [ latestChats ]);
|
||||
|
||||
const search = e => {
|
||||
|
||||
const searchTerm = e.target.value;
|
||||
|
||||
if (searchTerm !== "") {
|
||||
|
||||
const searchTermLower = searchTerm.toLowerCase();
|
||||
|
||||
const newResults = latestChats.filter(chat => contacts.filter(c => c.id === chat.contact_id)[0].name.toLowerCase().includes(searchTermLower));
|
||||
setResults(newResults);
|
||||
} else {
|
||||
|
||||
setResults(latestChats);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage ref={ pageRef }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear">Edit</IonButton>
|
||||
</IonButtons>
|
||||
<IonButtons slot="end">
|
||||
<IonButton fill="clear" onClick={ () => setShowContactModal(true) }>
|
||||
<IonIcon icon={ createOutline } />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Chats</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Chats</IonTitle>
|
||||
</IonToolbar>
|
||||
<IonSearchbar onIonChange={ e => search(e) } />
|
||||
</IonHeader>
|
||||
|
||||
|
||||
{ results.map((chat, index) => {
|
||||
|
||||
return <ChatItem chat={ chat } key={ index } />;
|
||||
})}
|
||||
|
||||
<IonModal isOpen={ showContactModal } swipeToClose={ true } presentingElement={ pageRef.current } onDidDismiss={ () => setShowContactModal(false) }>
|
||||
<ContactModal close={ () => setShowContactModal(false) } />
|
||||
</IonModal>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chats;
|
||||
@@ -1,120 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonContent, IonHeader, IonIcon, IonItem, IonList, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import { camera, cloudUpload, cloudUploadOutline, heart, helpOutline, informationOutline, key, laptop, laptopOutline, logoWhatsapp, mailUnreadOutline, notificationsOutline, pencil, qrCodeOutline, star } from 'ionicons/icons';
|
||||
import styles from './Settings.module.scss';
|
||||
|
||||
const Settings = () => {
|
||||
|
||||
const settings = [
|
||||
|
||||
[
|
||||
{
|
||||
title: "Starred Messages",
|
||||
url: "/starred-messages",
|
||||
icon: star,
|
||||
color: "rgb(255, 208, 0)"
|
||||
},
|
||||
{
|
||||
title: "WhatsApp Web/Desktop",
|
||||
icon: laptopOutline,
|
||||
color: "rgb(33, 165, 114)"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Account",
|
||||
icon: key,
|
||||
color: "rgb(0, 81, 255)"
|
||||
},
|
||||
{
|
||||
title: "Chats",
|
||||
icon: logoWhatsapp,
|
||||
color: "rgb(79, 182, 96)"
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
icon: mailUnreadOutline,
|
||||
color: "rgb(233, 46, 46)"
|
||||
},
|
||||
{
|
||||
title: "Storage and Data",
|
||||
icon: cloudUploadOutline,
|
||||
color: "rgb(79, 182, 96)"
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: "Help",
|
||||
icon: informationOutline,
|
||||
color: "rgb(0, 81, 255)"
|
||||
},
|
||||
{
|
||||
title: "Tell a Friend",
|
||||
icon: heart,
|
||||
color: "rgb(228, 70, 70)"
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
return (
|
||||
<IonPage className={ styles.settingsPage }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Settings</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonItem lines="none" className={ `${ styles.statusAvatar }` }>
|
||||
<img src="https://pbs.twimg.com/profile_images/1383061489469292548/5dhsPd4j_400x400.jpg" alt="avatar" />
|
||||
<IonCol className="ion-padding-start">
|
||||
<IonText color="white">
|
||||
<strong>Alan Montgomery</strong>
|
||||
</IonText>
|
||||
<br />
|
||||
<IonText color="medium" className={ styles.smallText }>This is my status!</IonText>
|
||||
</IonCol>
|
||||
|
||||
<IonRow className={ styles.statusActions }>
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ qrCodeOutline } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonItem>
|
||||
|
||||
{ settings.map((setting, index) => {
|
||||
|
||||
return (
|
||||
|
||||
<IonList key={ `setting_${ index }` } className={ `${ styles.settingsList } ion-margin-top ion-padding-top` }>
|
||||
|
||||
{ setting.map((option, index) => {
|
||||
|
||||
var itemStyle = { "--setting-item-color": option.color };
|
||||
|
||||
return (
|
||||
|
||||
<IonItem routerLink={ option.url ? option.url : "" } key={ `settingOption_${ index }` } lines="none" detail={ true }>
|
||||
<IonIcon icon={ option.icon } color="white" style={ itemStyle } />
|
||||
<p>{ option.title }</p>
|
||||
</IonItem>
|
||||
);
|
||||
})}
|
||||
</IonList>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="ion-text-center ion-justify-content-center ion-margin-top ion-padding-top">
|
||||
<IonText>from</IonText>
|
||||
<IonCardSubtitle className="ion-no-padding ion-no-margin">IONIC React HUB</IonCardSubtitle>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -1,69 +0,0 @@
|
||||
.settingsPage {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsList {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
// border: none !important;
|
||||
border-top: 1px solid rgb(34, 34, 34);
|
||||
border-bottom: 1px solid rgb(36, 36, 36);
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem;
|
||||
font-size: 1.4rem;
|
||||
margin-right: 1.2rem;
|
||||
--setting-item-color: white;
|
||||
background-color: var(--setting-item-color);
|
||||
color: rgb(233, 46, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smallText {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
img {
|
||||
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusActions {
|
||||
|
||||
ion-icon {
|
||||
|
||||
padding: 0.5rem;
|
||||
background-color: rgb(56, 56, 56);
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { IonBackButton, IonContent, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonViewWillEnter } from '@ionic/react';
|
||||
import { chevronForward } from 'ionicons/icons';
|
||||
import { useState } from 'react';
|
||||
import { ChatStore, ContactStore } from '../store';
|
||||
import { getChats, getContacts } from '../store/Selectors';
|
||||
|
||||
import "./Starred.scss";
|
||||
|
||||
const Starred = () => {
|
||||
|
||||
const contacts = ContactStore.useState(getContacts);
|
||||
const chats = ChatStore.useState(getChats);
|
||||
|
||||
const [ starredMessages, setStarredMessages ] = useState(false);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
|
||||
var tempChats = [ ...chats ];
|
||||
var starred = [];
|
||||
|
||||
tempChats.forEach(tempChat => {
|
||||
|
||||
tempChat.chats.forEach(chat => {
|
||||
|
||||
if (chat.starred) {
|
||||
|
||||
starred.push({
|
||||
|
||||
contact_id: tempChat.contact_id,
|
||||
...chat
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setStarredMessages(starred);
|
||||
});
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonBackButton slot="start" text="Settings" />
|
||||
<IonTitle>Starred Messages</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
|
||||
{ starredMessages && starredMessages.map(starredMessage => {
|
||||
|
||||
const { id, contact_id, date, preview, received } = starredMessage;
|
||||
const contact = contacts.filter(c => c.id === contact_id)[0];
|
||||
|
||||
return (
|
||||
<div key={ `${ contact_id }_${ id }` } className="starred-message">
|
||||
<div className="starred-header">
|
||||
|
||||
<div className="starred-contact">
|
||||
<img src={ contact.avatar } alt="starred avatar" />
|
||||
<p>{ contact.name }</p>
|
||||
</div>
|
||||
|
||||
<p className="starred-date">{ date }</p>
|
||||
|
||||
</div>
|
||||
<div className={ `starred-content ${ received ? "received-starred-content" : "sent-starred-content" }` }>
|
||||
<p>{ preview }</p>
|
||||
<IonIcon icon={ chevronForward } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{ starredMessages.length < 1 &&
|
||||
|
||||
<div className="no-starred">
|
||||
<img src="/assets/nostarred.png" alt="no starred" />
|
||||
<h1>No Starred Messages</h1>
|
||||
<p>Tap and hold on any message to star it, so you can easily find it later.</p>
|
||||
</div>
|
||||
}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Starred;
|
||||
@@ -1,117 +0,0 @@
|
||||
.starred-message {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.starred-header {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.starred-contact {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
|
||||
img {
|
||||
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
margin-left: 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.starred-date {
|
||||
|
||||
margin-right: 1.5rem;
|
||||
color: rgb(138, 138, 138);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.starred-content {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right: 1.5rem;
|
||||
margin-left: 3.2rem;
|
||||
|
||||
ion-icon {
|
||||
|
||||
color: rgb(138, 138, 138);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
border-radius: 10px;
|
||||
max-width: 75%;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.received-starred-content {
|
||||
|
||||
p {
|
||||
|
||||
background-color: var(--chat-bubble-received-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sent-starred-content {
|
||||
|
||||
p {
|
||||
|
||||
background-color: var(--chat-bubble-sent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.starred-content:not(:first-child) {
|
||||
|
||||
border-bottom: 2px solid rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
.no-starred {
|
||||
|
||||
padding: 3rem;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
|
||||
img {
|
||||
|
||||
border-radius: 500px;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
color: rgb(165, 165, 165);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { IonContent, IonCardTitle, IonIcon, IonCol, IonItem, IonHeader, IonPage, IonTitle, IonToolbar, IonButtons, IonButton, IonText, IonRow } from '@ionic/react';
|
||||
import { add, camera, pencil } from 'ionicons/icons';
|
||||
import styles from './Status.module.scss';
|
||||
|
||||
const Status = () => {
|
||||
return (
|
||||
<IonPage className={ styles.statusPage }>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonButtons slot="start">
|
||||
<IonButton fill="clear">Privacy</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle>Status</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Status</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonItem lines="none" className={ `${ styles.statusAvatar } ion-margin-top` }>
|
||||
<img src="https://pbs.twimg.com/profile_images/1383061489469292548/5dhsPd4j_400x400.jpg" alt="avatar" />
|
||||
<div className={ styles.imageUpload }>
|
||||
<IonIcon icon={ add } color="white" />
|
||||
</div>
|
||||
<IonCol className="ion-padding-start">
|
||||
<IonText color="white">
|
||||
<strong>My Status</strong>
|
||||
</IonText>
|
||||
<br />
|
||||
<IonText color="medium" className={ styles.smallText }>Add to my status</IonText>
|
||||
</IonCol>
|
||||
|
||||
<IonRow className={ styles.statusActions }>
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ camera } />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonIcon color="primary" icon={ pencil } />
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonItem>
|
||||
|
||||
<p color="medium" className={ `ion-text-center ${ styles.updates }` }>No recent updates to show right now.</p>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Status;
|
||||
@@ -1,73 +0,0 @@
|
||||
.statusPage {
|
||||
|
||||
ion-item {
|
||||
|
||||
--background: rgb(27, 27, 27);
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.updates {
|
||||
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
background: rgb(27, 27, 27);
|
||||
border-top: 1px solid rgb(41, 41, 41);
|
||||
border-bottom: 1px solid rgb(41, 41, 41);
|
||||
padding: 1rem;
|
||||
color: rgb(144, 144, 144);
|
||||
|
||||
ion-text {
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.smallText {
|
||||
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.statusAvatar {
|
||||
|
||||
img {
|
||||
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusActions {
|
||||
|
||||
ion-icon {
|
||||
|
||||
padding: 0.5rem;
|
||||
background-color: rgb(56, 56, 56);
|
||||
border-radius: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.imageUpload {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background-color: var(--ion-color-primary);
|
||||
border-radius: 500px;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
margin-left: 2.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -1,384 +0,0 @@
|
||||
import { Store } from 'pullstate';
|
||||
|
||||
const ChatStore = new Store({
|
||||
|
||||
chats: [
|
||||
{
|
||||
id: 1,
|
||||
contact_id: 1,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "20:05",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
preview: "This is a test whatsapp message inside the whatsapp clone app",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "20:10",
|
||||
read: false,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
contact_id: 2,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Excited for the Ioniconf 2021! The 23rd can't come quick enough",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "Yesterday",
|
||||
read: true,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
contact_id: 3,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Excited for the Ioniconf 2021! The 23rd can't come quick enough",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "Saturday",
|
||||
read: true,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
contact_id: 4,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Hey Alan, this is a test whatsapp message",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "Friday",
|
||||
read: false,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
contact_id: 5,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Hey Alan, this is a test whatsapp message",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "Thursday",
|
||||
read: false,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
contact_id: 6,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Hey Alan, this is a test received whatsapp message",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "Wednesday",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
preview: "Hey Josh, this is a test sent whatsapp message",
|
||||
received: true,
|
||||
sent: true,
|
||||
date: "Wednesday",
|
||||
read: true,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
preview: "Awesome man! This seems to be coming together OK!",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "Wednesday",
|
||||
read: true,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
contact_id: 7,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Goodluck on the quest to space, the moon and mars!",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "08/06/2021",
|
||||
read: true,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
contact_id: 8,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "Hey Bill, This is a test sent message to your whatsapp",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "05/06/2021",
|
||||
read: true,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
contact_id: 10,
|
||||
chats: [
|
||||
|
||||
{
|
||||
id: 1,
|
||||
preview: "This is Alans WhatsApp clone using the Ionic Framework and CapacitorJS for some native functionality.",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "Wednesday",
|
||||
read: false,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
preview: "Yep, and don't forget the Ionic Animations for the slick UI transitions you see, and some Ionic Gestures for sliding etc, as well as some other things!",
|
||||
received: true,
|
||||
sent: true,
|
||||
date: "Wednesday",
|
||||
read: true,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
preview: "Cool! It looks good, can we get another teaser?",
|
||||
received: true,
|
||||
sent: false,
|
||||
date: "Wednesday",
|
||||
read: true,
|
||||
starred: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
preview: "Sure... I'll post one on Twitter now!",
|
||||
received: false,
|
||||
sent: true,
|
||||
date: "Wednesday",
|
||||
read: true,
|
||||
starred: false
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
export const getNotificationCount = (allChats) => {
|
||||
|
||||
let notificationCount = 0;
|
||||
|
||||
allChats.forEach(chats => {
|
||||
|
||||
chats.chats.forEach(chat => {
|
||||
|
||||
if (!chat.read) {
|
||||
|
||||
notificationCount++;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return notificationCount;
|
||||
}
|
||||
|
||||
export const markAllAsRead = contactId => {
|
||||
|
||||
ChatStore.update(s => {
|
||||
|
||||
const chatIndex = s.chats.findIndex(chat => chat.contact_id === parseInt(contactId));
|
||||
|
||||
s.chats[chatIndex].chats.forEach(chat => {
|
||||
|
||||
chat.read = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export const sendChatMessage = (contactId, message, reply = false, replyID = false, image = false, imagePath = false) => {
|
||||
|
||||
const today = new Date();
|
||||
const currentTime = `${ today.getHours() < 10 ? `0${ today.getHours() }` : today.getHours() }:${ today.getMinutes() < 10 ? `0${ today.getMinutes() }` : today.getMinutes() }`;
|
||||
|
||||
ChatStore.update(s => {
|
||||
|
||||
const chatIndex = s.chats.findIndex(chat => chat.contact_id === parseInt(contactId));
|
||||
const newChat = {
|
||||
|
||||
id: s.chats[chatIndex].length + 1,
|
||||
preview: message,
|
||||
received: false,
|
||||
sent: true,
|
||||
date: currentTime,
|
||||
read: true,
|
||||
starred: false,
|
||||
reply,
|
||||
replyID,
|
||||
image: image,
|
||||
imagePath: imagePath
|
||||
};
|
||||
|
||||
s.chats[chatIndex].chats.push(newChat);
|
||||
});
|
||||
}
|
||||
|
||||
export const starChatMessage = (contactId, messageId) => {
|
||||
|
||||
ChatStore.update(s => {
|
||||
|
||||
const chatIndex = s.chats.findIndex(chat => chat.contact_id === parseInt(contactId));
|
||||
const messageIndex = s.chats[chatIndex].chats.findIndex(message => message.id === parseInt(messageId));
|
||||
|
||||
s.chats[chatIndex].chats[messageIndex].starred = !s.chats[chatIndex].chats[messageIndex].starred;
|
||||
});
|
||||
}
|
||||
|
||||
export default ChatStore;
|
||||
@@ -1,59 +0,0 @@
|
||||
import { Store } from 'pullstate';
|
||||
|
||||
const ContactStore = new Store({
|
||||
|
||||
contacts: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Amy Sister",
|
||||
avatar: "/assets/amy.jpeg"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Max Lynch",
|
||||
avatar: "/assets/max.jpeg"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Mike Hartington",
|
||||
avatar: "/assets/mike.jpeg"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Henk Jurriens",
|
||||
avatar: "/assets/henk.jpeg"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Simon Grimm",
|
||||
avatar: "/assets/simon.jpeg"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Josh Morony",
|
||||
avatar: "/assets/josh.jpeg"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Elon Musk",
|
||||
avatar: "/assets/elon.jpeg"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Bill Gates",
|
||||
avatar: "/assets/bill.jpeg"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Mark Zuckerberg",
|
||||
avatar: "/assets/mark.jpeg"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "Ionic Framework (not)",
|
||||
avatar: "/assets/ionic.png"
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
export default ContactStore;
|
||||
@@ -1,13 +0,0 @@
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
const getState = state => state;
|
||||
|
||||
// General getters
|
||||
export const getContacts = createSelector(getState, state => state.contacts);
|
||||
export const getChats = createSelector(getState, state => state.chats);
|
||||
|
||||
// More specific getters
|
||||
export const getChat = contactId => createSelector(getState, state => state.chats.filter(c => parseInt(c.contact_id) === parseInt(contactId))[0].chats);
|
||||
export const getContact = contactId => createSelector(getState, state => state.contacts.filter(c => parseInt(c.id) === parseInt(contactId))[0]);
|
||||
|
||||
export const getChatNotificationCount = contactId => createSelector(getState, state => (state.chats.filter(c => parseInt(c.contact_id) === parseInt(contactId))[0].chats).filter(chat => chat.read === false));
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as ContactStore } from "./ContactStore";
|
||||
export { default as ChatStore } from "./ChatStore";
|
||||
@@ -1,103 +0,0 @@
|
||||
#about-page {
|
||||
ion-toolbar {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
--background: transparent;
|
||||
--color: white;
|
||||
}
|
||||
|
||||
ion-toolbar ion-back-button,
|
||||
ion-toolbar ion-button,
|
||||
ion-toolbar ion-menu-button {
|
||||
--color: white;
|
||||
}
|
||||
|
||||
.about-header {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.about-header .about-image {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.about-header .madison {
|
||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
||||
}
|
||||
|
||||
.about-header .austin {
|
||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
||||
}
|
||||
|
||||
.about-header .chicago {
|
||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
||||
}
|
||||
|
||||
.about-header .seattle {
|
||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
||||
}
|
||||
|
||||
.about-info {
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
border-radius: 10px;
|
||||
background: var(--ion-background-color, #fff);
|
||||
z-index: 2; // display rounded border above header image
|
||||
}
|
||||
|
||||
.about-info h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-info ion-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.about-info p {
|
||||
line-height: 130%;
|
||||
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.about-info ion-icon {
|
||||
margin-inline-end: 32px;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Only
|
||||
*/
|
||||
|
||||
.ios .about-info {
|
||||
--ion-padding: 19px;
|
||||
}
|
||||
|
||||
.ios .about-info h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
#date-input-popover {
|
||||
--offset-y: -var(--ion-safe-area-bottom);
|
||||
|
||||
--max-width: 90%;
|
||||
--width: 336px;
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonRouter,
|
||||
} from '@ionic/react';
|
||||
|
||||
import { Geolocation } from '@capacitor/geolocation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { SkeletonDashboard } from '../components/SkeletonDashboard';
|
||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
||||
import { CurrentWeather } from '../components/CurrentWeather';
|
||||
|
||||
function Tab1() {
|
||||
const router = useIonRouter();
|
||||
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getCurrentPosition();
|
||||
}, []);
|
||||
|
||||
const getCurrentPosition = async () => {
|
||||
setCurrentWeather(false);
|
||||
const coordinates = await Geolocation.getCurrentPosition();
|
||||
getAddress(coordinates.coords);
|
||||
};
|
||||
|
||||
const getAddress = async (coords) => {
|
||||
const query = `${coords.latitude},${coords.longitude}`;
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
setCurrentWeather(data);
|
||||
};
|
||||
|
||||
// const router = useIonRouter();
|
||||
function handleBackClick() {
|
||||
router.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>My Weather</IonTitle>
|
||||
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => getCurrentPosition()}>
|
||||
<IonIcon icon={refreshOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => handleBackClick()}>
|
||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Dashboard</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
|
||||
<IonCol size="12">
|
||||
<h4>Here's your location based weather</h4>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-1.5rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<SkeletonDashboard />
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab1;
|
||||
@@ -1,81 +0,0 @@
|
||||
import {
|
||||
IonButton,
|
||||
IonCol,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonRow,
|
||||
IonSearchbar,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { useState } from 'react';
|
||||
import { CurrentWeather } from '../components/CurrentWeather';
|
||||
|
||||
function Tab2() {
|
||||
const [search, setSearch] = useState('');
|
||||
const [currentWeather, setCurrentWeather] = useState(false);
|
||||
|
||||
const performSearch = async () => {
|
||||
getAddress(search);
|
||||
};
|
||||
|
||||
const getAddress = async (city) => {
|
||||
const response = await fetch(
|
||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
if (data && data.current && data.location) {
|
||||
setCurrentWeather(data);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Search</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
|
||||
<IonCol size="7">
|
||||
<IonSearchbar
|
||||
placeholder="Try 'London'"
|
||||
animated
|
||||
value={search}
|
||||
onIonChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="5">
|
||||
<IonButton
|
||||
expand="block"
|
||||
className="ion-margin-start ion-margin-end"
|
||||
onClick={performSearch}
|
||||
>
|
||||
Search
|
||||
</IonButton>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<div style={{ marginTop: '-0.8rem' }}>
|
||||
{currentWeather ? (
|
||||
<CurrentWeather currentWeather={currentWeather} />
|
||||
) : (
|
||||
<h3 className="ion-text-center">Your search result will appear here</h3>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab2;
|
||||
@@ -1,62 +0,0 @@
|
||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
||||
const [property, setProperty] = useState(false);
|
||||
|
||||
const properties = {
|
||||
wind: {
|
||||
isIcon: false,
|
||||
icon: '/assets/WeatherDemo/wind.png',
|
||||
alt: 'wind',
|
||||
label: 'Wind',
|
||||
value: `${currentWeather.current.wind_mph}mph`,
|
||||
},
|
||||
feelsLike: {
|
||||
isIcon: true,
|
||||
icon: thermometerOutline,
|
||||
alt: 'feels like',
|
||||
label: 'Feels like',
|
||||
value: `${currentWeather.current.feelslike_c}°C`,
|
||||
},
|
||||
indexUV: {
|
||||
isIcon: true,
|
||||
icon: sunnyOutline,
|
||||
alt: 'index uv',
|
||||
label: 'Index UV',
|
||||
value: currentWeather.current.uv,
|
||||
},
|
||||
pressure: {
|
||||
isIcon: true,
|
||||
icon: pulseOutline,
|
||||
alt: 'pressure',
|
||||
label: 'Pressure',
|
||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
||||
},
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProperty(properties[type]);
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
{!property.isIcon && (
|
||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
||||
)}
|
||||
{property.isIcon && (
|
||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
||||
)}
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
||||
<IonNote>{property.value}</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
||||
import { WeatherProperty } from './WeatherProperty';
|
||||
|
||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
{currentWeather.location.region},{' '}
|
||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<img
|
||||
alt="condition"
|
||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
||||
/>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
{currentWeather.current.temp_c}℃
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,117 +0,0 @@
|
||||
import {
|
||||
IonCard,
|
||||
IonCardContent,
|
||||
IonCardSubtitle,
|
||||
IonCardTitle,
|
||||
IonCol,
|
||||
IonGrid,
|
||||
IonIcon,
|
||||
IonNote,
|
||||
IonRow,
|
||||
IonSkeletonText,
|
||||
IonText,
|
||||
IonThumbnail,
|
||||
} from '@ionic/react';
|
||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
||||
|
||||
export const SkeletonDashboard = () => (
|
||||
<IonGrid>
|
||||
<IonCard>
|
||||
<IonCardContent className="ion-text-center">
|
||||
<IonText color="primary">
|
||||
<h1>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<div className="ion-margin-top">
|
||||
<IonThumbnail>
|
||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
||||
</IonThumbnail>
|
||||
|
||||
<IonText color="dark">
|
||||
<h1 style={{ fontWeight: 'bold' }}>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</h1>
|
||||
</IonText>
|
||||
|
||||
<IonText color="medium">
|
||||
<p>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</p>
|
||||
</IonText>
|
||||
</div>
|
||||
|
||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
||||
</IonCardTitle>
|
||||
|
||||
<IonGrid className="ion-margin-top">
|
||||
<IonRow>
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
|
||||
<IonRow className="ion-margin-top">
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="6">
|
||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
||||
<IonCol size="3">
|
||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
||||
</IonCol>
|
||||
|
||||
<IonCol size="9">
|
||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
||||
<IonNote>
|
||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
||||
</IonNote>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonCol>
|
||||
</IonRow>
|
||||
</IonGrid>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonGrid>
|
||||
);
|
||||
@@ -1,40 +0,0 @@
|
||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
|
||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
||||
import { Route, Redirect } from 'react-router';
|
||||
|
||||
import Tab1 from './AppPages/Tab1';
|
||||
import Tab2 from './AppPages/Tab2';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
function DemoSwiperjsTutorial() {
|
||||
return (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
<Route exact path="/demo-weather-app/tab1">
|
||||
<Tab1 />
|
||||
</Route>
|
||||
<Route exact path="/demo-weather-app/tab2">
|
||||
<Tab2 />
|
||||
</Route>
|
||||
|
||||
<Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
|
||||
</IonRouterOutlet>
|
||||
|
||||
{/* */}
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="tab1" href="/demo-weather-app/tab1">
|
||||
<IonIcon icon={cloudOutline} />
|
||||
<IonLabel>Dashboard</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="tab2" href="/demo-weather-app/tab2">
|
||||
<IonIcon icon={searchOutline} />
|
||||
<IonLabel>Search</IonLabel>
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default DemoSwiperjsTutorial;
|
||||
@@ -1,103 +0,0 @@
|
||||
#about-page {
|
||||
ion-toolbar {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
--background: transparent;
|
||||
--color: white;
|
||||
}
|
||||
|
||||
ion-toolbar ion-back-button,
|
||||
ion-toolbar ion-button,
|
||||
ion-toolbar ion-menu-button {
|
||||
--color: white;
|
||||
}
|
||||
|
||||
.about-header {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.about-header .about-image {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.about-header .madison {
|
||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
||||
}
|
||||
|
||||
.about-header .austin {
|
||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
||||
}
|
||||
|
||||
.about-header .chicago {
|
||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
||||
}
|
||||
|
||||
.about-header .seattle {
|
||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
||||
}
|
||||
|
||||
.about-info {
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
border-radius: 10px;
|
||||
background: var(--ion-background-color, #fff);
|
||||
z-index: 2; // display rounded border above header image
|
||||
}
|
||||
|
||||
.about-info h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.about-info ion-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.about-info p {
|
||||
line-height: 130%;
|
||||
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.about-info ion-icon {
|
||||
margin-inline-end: 32px;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Only
|
||||
*/
|
||||
|
||||
.ios .about-info {
|
||||
--ion-padding: 19px;
|
||||
}
|
||||
|
||||
.ios .about-info h3 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
#date-input-popover {
|
||||
--offset-y: -var(--ion-safe-area-bottom);
|
||||
|
||||
--max-width: 90%;
|
||||
--width: 336px;
|
||||
}
|
||||
@@ -38,11 +38,17 @@ import '../SpeakerList.scss';
|
||||
import { getEvents } from '../../api/getEvents';
|
||||
import { format } from 'date-fns';
|
||||
import { Event } from './types';
|
||||
import { chevronBackCircleOutline, chevronBackOutline, chevronDownCircleOutline, heart, menuOutline } from 'ionicons/icons';
|
||||
import {
|
||||
chevronBackCircleOutline,
|
||||
chevronBackOutline,
|
||||
chevronDownCircleOutline,
|
||||
heart,
|
||||
menuOutline,
|
||||
} from 'ionicons/icons';
|
||||
import AboutPopover from '../../components/AboutPopover';
|
||||
import Loading from '../../components/Loading';
|
||||
import NoSavedEvents from '../../components/NoSavedEvents';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
|
||||
interface OwnProps {}
|
||||
|
||||
@@ -74,7 +80,7 @@ const EventList: React.FC<SpeakerListProps> = ({ events }) => {
|
||||
}
|
||||
|
||||
function handleBrowseEventsClick() {
|
||||
router.push(paths.EVENT_LIST, 'back');
|
||||
router.push(PATHS.EVENT_LIST, 'back');
|
||||
}
|
||||
|
||||
if (!events || events.length == 0) return <Loading />;
|
||||
@@ -97,7 +103,12 @@ const EventList: React.FC<SpeakerListProps> = ({ events }) => {
|
||||
|
||||
<IonContent fullscreen={true}>
|
||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
||||
<IonRefresherContent pullingIcon={chevronDownCircleOutline} pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."></IonRefresherContent>
|
||||
<IonRefresherContent
|
||||
pullingIcon={chevronDownCircleOutline}
|
||||
pullingText="Pull to refresh"
|
||||
refreshingSpinner="circles"
|
||||
refreshingText="Refreshing..."
|
||||
></IonRefresherContent>
|
||||
</IonRefresher>
|
||||
|
||||
<IonHeader collapse="condense">
|
||||
@@ -171,7 +182,12 @@ const EventList: React.FC<SpeakerListProps> = ({ events }) => {
|
||||
</IonContent>
|
||||
|
||||
{/* REQ0079/event-filter */}
|
||||
<IonModal ref={modal} trigger="open-modal" initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
|
||||
<IonModal
|
||||
ref={modal}
|
||||
trigger="open-modal"
|
||||
initialBreakpoint={0.5}
|
||||
breakpoints={[0, 0.25, 0.5, 0.75]}
|
||||
>
|
||||
<IonContent className="ion-padding">
|
||||
<div
|
||||
style={{
|
||||
|
||||
@@ -15,7 +15,7 @@ import MembersNearByList from './MembersNearByList';
|
||||
import OrderList from './OrderList';
|
||||
import MyProfile from './MyProfile';
|
||||
import MessageList from './MessageList';
|
||||
import paths from '../paths';
|
||||
import PATHS from '../PATHS';
|
||||
import Favourites from './Favourites';
|
||||
import TabAppRoute from '../TabAppRoute';
|
||||
|
||||
@@ -53,23 +53,23 @@ const MainTabs: React.FC<MainTabsProps> = () => {
|
||||
</IonTabButton>
|
||||
*/}
|
||||
|
||||
<IonTabButton tab="events" href={paths.EVENT_LIST}>
|
||||
<IonTabButton tab="events" href={PATHS.EVENT_LIST}>
|
||||
<IonIcon icon={calendar} />
|
||||
<IonLabel>Event</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="nearby" href={paths.NEARBY_LIST}>
|
||||
<IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
|
||||
<IonIcon icon={people} />
|
||||
<IonLabel>Nearby</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="orders" href={paths.ORDERS_LIST}>
|
||||
<IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
|
||||
<IonIcon icon={location} />
|
||||
<IonLabel>Order</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="message" href={paths.MESSAGE_LIST}>
|
||||
<IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
|
||||
<IonIcon icon={informationCircle} />
|
||||
<IonLabel>Message</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="my_profile" href={paths.PROFILE}>
|
||||
<IonTabButton tab="my_profile" href={PATHS.PROFILE}>
|
||||
<IonIcon icon={informationCircle} />
|
||||
<IonLabel>Profile</IonLabel>
|
||||
</IonTabButton>
|
||||
|
||||
@@ -53,7 +53,7 @@ import {
|
||||
settingsOutline,
|
||||
} from 'ionicons/icons';
|
||||
import AboutPopover from '../../../components/AboutPopover';
|
||||
import paths from '../../../paths';
|
||||
import PATHS from '../../../PATHS';
|
||||
import { getProfileById } from '../../../api/getProfileById';
|
||||
import { defaultMember, Member } from '../../MemberProfile/type';
|
||||
import SignUpPng from './SignUp.png';
|
||||
@@ -79,11 +79,11 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
|
||||
const router = useIonRouter();
|
||||
|
||||
function handleShowSettingButtonClick() {
|
||||
router.push(paths.SETTINGS);
|
||||
router.push(PATHS.SETTINGS);
|
||||
}
|
||||
|
||||
function handleNotImplementedClick() {
|
||||
router.push(paths.NOT_IMPLEMENTED);
|
||||
router.push(PATHS.NOT_IMPLEMENTED);
|
||||
}
|
||||
|
||||
function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
|
||||
@@ -97,7 +97,7 @@ const MyProfile: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) =>
|
||||
function handleForwardLoginPage() {
|
||||
try {
|
||||
setDisableForwardLoginButton(true);
|
||||
router.push(paths.SIGN_IN);
|
||||
router.push(PATHS.SIGN_IN);
|
||||
setDisableForwardLoginButton(false);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
@@ -53,7 +53,7 @@ import {
|
||||
settingsOutline,
|
||||
} from 'ionicons/icons';
|
||||
import AboutPopover from '../../components/AboutPopover';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
import { getProfileById } from '../../api/getProfileById';
|
||||
import { defaultMember, Member } from '../MemberProfile/type';
|
||||
import NotLoggedIn from './NotLoggedIn';
|
||||
@@ -83,11 +83,11 @@ const MyProfilePage: React.FC<SpeakerListProps> = ({ speakers, speakerSessions,
|
||||
const router = useIonRouter();
|
||||
|
||||
function handleShowSettingButtonClick() {
|
||||
router.push(paths.SETTINGS);
|
||||
router.push(PATHS.SETTINGS);
|
||||
}
|
||||
|
||||
function handleNotImplementedClick() {
|
||||
router.push(paths.NOT_IMPLEMENTED);
|
||||
router.push(PATHS.NOT_IMPLEMENTED);
|
||||
}
|
||||
|
||||
function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
|
||||
|
||||
@@ -19,7 +19,7 @@ import { connect } from '../../data/connect';
|
||||
import * as selectors from '../../data/selectors';
|
||||
|
||||
import './style.scss';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
|
||||
interface OwnProps {}
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@ import {
|
||||
import AboutPopover from '../../components/AboutPopover';
|
||||
import { getOrders } from '../../api/getOrders';
|
||||
import Loading from '../../components/Loading';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
|
||||
interface OwnProps {}
|
||||
|
||||
@@ -178,15 +178,15 @@ const OrderList: React.FC<SpeakerListProps> = ({ fetchOrderResult, speakerSessio
|
||||
}
|
||||
|
||||
function handleShowOrderDetail(order_id: string) {
|
||||
router.push(paths.getOrderDetail(order_id));
|
||||
router.push(PATHS.getOrderDetail(order_id));
|
||||
}
|
||||
|
||||
function handleNotImplemented() {
|
||||
router.push(paths.NOT_IMPLEMENTED);
|
||||
router.push(PATHS.NOT_IMPLEMENTED);
|
||||
}
|
||||
|
||||
function handleBookmarksClick() {
|
||||
router.push(paths.FAVOURITES_LIST);
|
||||
router.push(PATHS.FAVOURITES_LIST);
|
||||
}
|
||||
|
||||
if (status != 200)
|
||||
|
||||
@@ -64,7 +64,7 @@ import {
|
||||
} from 'ionicons/icons';
|
||||
import AboutPopover from '../../components/AboutPopover';
|
||||
import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions';
|
||||
|
||||
interface OwnProps {}
|
||||
@@ -108,23 +108,23 @@ const SettingsPage: React.FC<SettingsProps> = ({
|
||||
}
|
||||
|
||||
function handleLanguageClick() {
|
||||
router.push(paths.CHANGE_LANGUAGE);
|
||||
router.push(PATHS.CHANGE_LANGUAGE);
|
||||
}
|
||||
|
||||
function handleNotImplementedClick() {
|
||||
router.push(paths.NOT_IMPLEMENTED);
|
||||
router.push(PATHS.NOT_IMPLEMENTED);
|
||||
}
|
||||
|
||||
function handleDemoPageClick() {
|
||||
router.push(paths.DEMO_PAGE);
|
||||
router.push(PATHS.DEMO_PAGE);
|
||||
}
|
||||
|
||||
function handleServiceAgreementClick() {
|
||||
router.push(paths.SERVICE_AGREEMENT);
|
||||
router.push(PATHS.SERVICE_AGREEMENT);
|
||||
}
|
||||
|
||||
function handlePrivacyAgreementClick() {
|
||||
router.push(paths.PRIVACY_AGREEMENT);
|
||||
router.push(PATHS.PRIVACY_AGREEMENT);
|
||||
}
|
||||
|
||||
const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState<boolean>(false);
|
||||
|
||||
@@ -1,12 +1,21 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { IonContent, IonPage, IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, useIonViewWillEnter } from '@ionic/react';
|
||||
import {
|
||||
IonContent,
|
||||
IonPage,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { arrowForward } from 'ionicons/icons';
|
||||
import { setMenuEnabled } from '../../data/sessions/sessions.actions';
|
||||
import { setHasSeenTutorial } from '../../data/user/user.actions';
|
||||
import './Tutorial.scss';
|
||||
import { connect } from '../../data/connect';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import paths from '../../paths';
|
||||
import PATHS from '../../PATHS';
|
||||
|
||||
interface OwnProps extends RouteComponentProps {}
|
||||
interface DispatchProps {
|
||||
@@ -33,7 +42,7 @@ const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMen
|
||||
const startApp = async () => {
|
||||
await setHasSeenTutorial(true);
|
||||
await setMenuEnabled(true);
|
||||
history.push(paths.EVENT_LIST, { direction: 'none' });
|
||||
history.push(PATHS.EVENT_LIST, { direction: 'none' });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -57,7 +66,8 @@ const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMen
|
||||
Welcome to <b>ICA</b>
|
||||
</h2>
|
||||
<p>
|
||||
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
|
||||
The <b>ionic conference app</b> is a practical preview of the ionic framework in
|
||||
action, and a demonstration of proper code use.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -67,7 +77,8 @@ const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMen
|
||||
<img src="assets/img/ica-slidebox-img-2.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">What is Ionic?</h2>
|
||||
<p>
|
||||
<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.
|
||||
<b>Ionic Framework</b> is an open source SDK that enables developers to build high
|
||||
quality mobile apps with web technologies like HTML, CSS, and JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -77,7 +88,9 @@ const Tutorial: React.FC<TutorialProps> = ({ history, setHasSeenTutorial, setMen
|
||||
<img src="assets/img/ica-slidebox-img-3.png" alt="" className="slide-image" />
|
||||
<h2 className="slide-title">What is Ionic Appflow?</h2>
|
||||
<p>
|
||||
<b>Ionic Appflow</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.
|
||||
<b>Ionic Appflow</b> is a powerful set of services and features built on top of
|
||||
Ionic Framework that brings a totally new level of app development agility to mobile
|
||||
dev teams.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user