Skip to content

Instantly share code, notes, and snippets.

@polluterofminds
Created October 27, 2022 15:56
Show Gist options
  • Save polluterofminds/fdc33d771d06a783a1da69d856141663 to your computer and use it in GitHub Desktop.
Save polluterofminds/fdc33d771d06a783a1da69d856141663 to your computer and use it in GitHub Desktop.
Appjections Inbox
import React, { useEffect, useState } from "react";
import Email from "./Email";
import axios from "axios";
const Inbox = () => {
const [emails, setEmails] = useState([]);
const [unread, setUnreadCount] = useState(0);
const [loading, setLoading] = useState(false);
// Swipe pull down check code from https://stackoverflow.com/a/46248086
const pStart = { x: 0, y: 0 };
const pStop = { x: 0, y: 0 };
function swipeStart(e) {
if (typeof e["targetTouches"] !== "undefined") {
const touch = e.targetTouches[0];
pStart.x = touch.screenX;
pStart.y = touch.screenY;
} else {
pStart.x = e.screenX;
pStart.y = e.screenY;
}
}
const swipeEnd = (e) => {
if (typeof e["changedTouches"] !== "undefined") {
const touch = e.changedTouches[0];
pStop.x = touch.screenX;
pStop.y = touch.screenY;
} else {
pStop.x = e.screenX;
pStop.y = e.screenY;
}
swipeCheck();
};
const swipeCheck = async () => {
const changeY = pStart.y - pStop.y;
const changeX = pStart.x - pStop.x;
if (isPullDown(changeY, changeX)) {
unread === 0 && (await fetchMoreEmails());
}
};
function isPullDown(dY, dX) {
// methods of checking slope, length, direction of line created by swipe action
return (
dY < 0 &&
((Math.abs(dX) <= 100 && Math.abs(dY) >= 300) ||
(Math.abs(dX) / Math.abs(dY) <= 0.3 && dY >= 60))
);
}
useEffect(() => {
loadEmails();
//eslint-disable-next-line
}, []);
useEffect(() => {
document.addEventListener(
"touchstart",
swipeStart,
false
);
document.addEventListener(
"touchend",
swipeEnd,
false
);
return () => {
document.removeEventListener('touchstart', swipeStart);
document.removeEventListener('touchend', swipeEnd);
};
}, []);
const loadEmails = () => {
const localEmails = localStorage.getItem("appjection-emails");
if (localEmails) {
const parsedEmails = JSON.parse(localEmails);
const unreadCount = parsedEmails.filter((e) => e.read !== true);
setEmails(parsedEmails);
setUnreadCount(unreadCount.length);
}
};
const fetchMoreEmails = async () => {
setLoading(true);
const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
const res = await axios.get(API_ENDPOINT);
const data = res.data;
data.forEach((d) => {
d.read = false;
d.received = new Date().toISOString();
});
const oldEmails =
JSON.parse(localStorage.getItem("appjection-emails")) || [];
const updatedEmails = [...data, ...oldEmails];
localStorage.setItem("appjection-emails", JSON.stringify(updatedEmails));
loadEmails();
setLoading(false);
};
if (emails.length > 0) {
return (
<div>
<div className="nav-flex-between container">
<h6 className="unread">
{unread} Unread Email{unread > 1 && "s"}
</h6>
{unread === 0 && (
<button onClick={fetchMoreEmails} className={loading && "spin"}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="white"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
)}
</div>
{emails.map((e) => {
return (
<Email
key={e.text}
email={e}
emails={emails}
loadEmails={loadEmails}
/>
);
})}
</div>
);
} else {
return (
<div className="inbox-main center inbox-empty">
<h3>Inbox Zero!</h3>
<p>
You haven't been rejected lately. Pull down to refresh and change that
or click below.
</p>
<button className={loading && "spin"} onClick={fetchMoreEmails}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="#fff"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
</div>
);
}
};
export default Inbox;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment