1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-12-29 05:38:14 +03:00
phanpy/src/app.jsx

633 lines
19 KiB
React
Raw Normal View History

2023-02-11 03:37:42 +03:00
import './app.css';
import {
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'preact/hooks';
2023-02-09 17:27:49 +03:00
import {
matchPath,
Route,
Routes,
useLocation,
useNavigate,
} from 'react-router-dom';
2022-12-10 12:14:48 +03:00
import { useSnapshot } from 'valtio';
import AccountSheet from './components/account-sheet';
2022-12-10 12:14:48 +03:00
import Compose from './components/compose';
import Drafts from './components/drafts';
2022-12-10 12:14:48 +03:00
import Loader from './components/loader';
import MediaModal from './components/media-modal';
2022-12-10 12:14:48 +03:00
import Modal from './components/modal';
2023-02-16 12:51:54 +03:00
import Shortcuts from './components/shortcuts';
import ShortcutsSettings from './components/shortcuts-settings';
import NotFound from './pages/404';
import AccountStatuses from './pages/account-statuses';
import Accounts from './pages/accounts';
import Bookmarks from './pages/bookmarks';
import Favourites from './pages/favourites';
2023-02-11 11:48:47 +03:00
import FollowedHashtags from './pages/followed-hashtags';
2023-02-03 16:08:08 +03:00
import Following from './pages/following';
2023-02-18 15:48:24 +03:00
import Hashtag from './pages/hashtag';
2022-12-10 12:14:48 +03:00
import Home from './pages/home';
2023-02-09 17:27:49 +03:00
import HomeV1 from './pages/home-v1';
2023-02-10 19:05:18 +03:00
import List from './pages/list';
import Lists from './pages/lists';
2022-12-10 12:14:48 +03:00
import Login from './pages/login';
import Notifications from './pages/notifications';
import Public from './pages/public';
import Search from './pages/search';
2022-12-10 12:14:48 +03:00
import Settings from './pages/settings';
import Status from './pages/status';
import Welcome from './pages/welcome';
2023-02-09 18:59:57 +03:00
import {
api,
initAccount,
initClient,
initInstance,
initPreferences,
} from './utils/api';
2022-12-10 12:14:48 +03:00
import { getAccessToken } from './utils/auth';
import showToast from './utils/show-toast';
import states, { getStatus, saveStatus } from './utils/states';
2022-12-10 12:14:48 +03:00
import store from './utils/store';
import { getCurrentAccount } from './utils/store-utils';
2023-02-28 10:27:42 +03:00
import useInterval from './utils/useInterval';
2023-02-12 12:38:50 +03:00
import usePageVisibility from './utils/usePageVisibility';
2022-12-10 12:14:48 +03:00
window.__STATES__ = states;
2022-12-10 12:14:48 +03:00
2022-12-31 20:46:08 +03:00
function App() {
2022-12-10 12:14:48 +03:00
const snapStates = useSnapshot(states);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [uiState, setUIState] = useState('loading');
const navigate = useNavigate();
2022-12-10 12:14:48 +03:00
useLayoutEffect(() => {
const theme = store.local.get('theme');
if (theme) {
document.documentElement.classList.add(`is-${theme}`);
document
.querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme === 'auto' ? 'dark light' : theme);
2022-12-10 12:14:48 +03:00
}
2023-03-08 12:17:23 +03:00
const textSize = store.local.get('textSize');
if (textSize) {
document.documentElement.style.setProperty(
'--text-size',
`${textSize}px`,
);
}
2022-12-10 12:14:48 +03:00
}, []);
useEffect(() => {
const instanceURL = store.local.get('instanceURL');
const code = (window.location.search.match(/code=([^&]+)/) || [])[1];
if (code) {
console.log({ code });
// Clear the code from the URL
window.history.replaceState({}, document.title, '/');
const clientID = store.session.get('clientID');
const clientSecret = store.session.get('clientSecret');
(async () => {
setUIState('loading');
const { access_token: accessToken } = await getAccessToken({
2022-12-10 12:14:48 +03:00
instanceURL,
client_id: clientID,
client_secret: clientSecret,
code,
});
const masto = initClient({ instance: instanceURL, accessToken });
await Promise.allSettled([
initInstance(masto),
initAccount(masto, instanceURL, accessToken),
]);
2023-02-09 18:59:57 +03:00
initPreferences(masto);
2022-12-10 12:14:48 +03:00
setIsLoggedIn(true);
setUIState('default');
})();
} else {
const account = getCurrentAccount();
if (account) {
store.session.set('currentAccount', account.info.id);
const { masto } = api({ account });
2023-02-12 12:38:50 +03:00
console.log('masto', masto);
2023-02-09 18:59:57 +03:00
initPreferences(masto);
setUIState('loading');
2023-02-07 19:31:46 +03:00
(async () => {
try {
await initInstance(masto);
} catch (e) {
} finally {
setIsLoggedIn(true);
setUIState('default');
}
2023-02-07 19:31:46 +03:00
})();
2023-02-10 07:29:07 +03:00
} else {
setUIState('default');
}
2022-12-10 12:14:48 +03:00
}
}, []);
let location = useLocation();
states.currentLocation = location.pathname;
const locationDeckMap = {
'/': 'home-page',
'/notifications': 'notifications-page',
};
2022-12-30 15:37:57 +03:00
const focusDeck = () => {
let timer = setTimeout(() => {
2023-03-01 10:47:19 +03:00
const columns = document.getElementById('columns');
if (columns) {
// Focus first column
columns.querySelector('.deck-container')?.focus?.();
} else {
const backDrop = document.querySelector('.deck-backdrop');
if (backDrop) return;
2023-03-01 10:47:19 +03:00
// Focus last deck
const pages = document.querySelectorAll('.deck-container');
const page = pages[pages.length - 1]; // last one
if (page && page.tabIndex === -1) {
console.log('FOCUS', page);
page.focus();
}
2022-12-30 15:37:57 +03:00
}
2023-03-01 10:47:19 +03:00
// const page = document.getElementById(locationDeckMap[location.pathname]);
// console.debug('FOCUS', location.pathname, page);
// if (page) {
// page.focus();
// }
2022-12-30 15:37:57 +03:00
}, 100);
return () => clearTimeout(timer);
};
useEffect(focusDeck, [location]);
2023-02-16 12:51:54 +03:00
const showModal =
snapStates.showCompose ||
snapStates.showSettings ||
snapStates.showAccounts ||
2023-02-16 12:51:54 +03:00
snapStates.showAccount ||
snapStates.showDrafts ||
snapStates.showMediaModal ||
snapStates.showShortcutsSettings;
2022-12-30 15:37:57 +03:00
useEffect(() => {
2023-02-16 12:51:54 +03:00
if (!showModal) focusDeck();
2023-02-13 05:43:12 +03:00
}, [showModal]);
2022-12-10 12:14:48 +03:00
2023-02-09 17:27:49 +03:00
// useEffect(() => {
// // HACK: prevent this from running again due to HMR
// if (states.init) return;
// if (isLoggedIn) {
// requestAnimationFrame(startVisibility);
// states.init = true;
// }
// }, [isLoggedIn]);
2022-12-10 12:14:48 +03:00
2023-02-12 12:38:50 +03:00
// Notifications service
// - WebSocket to receive notifications when page is visible
const [visible, setVisible] = useState(true);
usePageVisibility(setVisible);
const notificationStream = useRef();
useEffect(() => {
if (isLoggedIn && visible) {
const { masto, instance } = api();
2023-02-12 12:38:50 +03:00
(async () => {
// 1. Get the latest notification
if (states.notificationsLast) {
const notificationsIterator = masto.v1.notifications.list({
limit: 1,
since_id: states.notificationsLast.id,
});
const { value: notifications } = await notificationsIterator.next();
if (notifications?.length) {
states.notificationsShowNew = true;
}
}
// 2. Start streaming
notificationStream.current = await masto.ws.stream(
'/api/v1/streaming',
{
stream: 'user:notification',
},
);
console.log('🎏 Streaming notification', notificationStream.current);
notificationStream.current.on('notification', (notification) => {
console.log('🔔🔔 Notification', notification);
if (notification.status) {
saveStatus(notification.status, instance, {
skipThreading: true,
});
}
2023-02-12 12:38:50 +03:00
states.notificationsShowNew = true;
});
notificationStream.current.ws.onclose = () => {
console.log('🔔🔔 Notification stream closed');
};
})();
}
return () => {
if (notificationStream.current) {
notificationStream.current.ws.close();
notificationStream.current = null;
}
};
}, [visible, isLoggedIn]);
const { prevLocation } = snapStates;
const backgroundLocation = useRef(prevLocation || null);
const isModalPage =
matchPath('/:instance/s/:id', location.pathname) ||
matchPath('/s/:id', location.pathname);
if (isModalPage) {
if (!backgroundLocation.current) backgroundLocation.current = prevLocation;
} else {
backgroundLocation.current = null;
}
console.debug({
backgroundLocation: backgroundLocation.current,
location,
});
const nonRootLocation = useMemo(() => {
const { pathname } = location;
return !/^\/(login|welcome)/.test(pathname);
}, [location]);
2023-02-28 10:27:42 +03:00
useInterval(() => {
console.log('✨ Check app update');
fetch('./version.json')
.then((r) => r.json())
.then((info) => {
if (info) states.appVersion = info;
})
.catch((e) => {
console.error(e);
});
}, visible && 1000 * 60 * 60); // 1 hour
2022-12-10 12:14:48 +03:00
return (
<>
<Routes location={nonRootLocation || location}>
<Route
path="/"
element={
isLoggedIn ? (
<Home />
) : uiState === 'loading' ? (
<Loader />
) : (
<Welcome />
)
2022-12-10 12:14:48 +03:00
}
/>
<Route path="/login" element={<Login />} />
<Route path="/welcome" element={<Welcome />} />
</Routes>
<Routes location={backgroundLocation.current || location}>
{isLoggedIn && (
<Route path="/notifications" element={<Notifications />} />
)}
{isLoggedIn && <Route path="/following" element={<Following />} />}
2023-02-09 17:27:49 +03:00
{isLoggedIn && <Route path="/homev1" element={<HomeV1 />} />}
{isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
{isLoggedIn && <Route path="/f" element={<Favourites />} />}
2023-02-10 19:05:18 +03:00
{isLoggedIn && (
<Route path="/l">
<Route index element={<Lists />} />
<Route path=":id" element={<List />} />
</Route>
)}
2023-02-11 11:48:47 +03:00
{isLoggedIn && <Route path="/ft" element={<FollowedHashtags />} />}
2023-02-18 15:48:24 +03:00
<Route path="/:instance?/t/:hashtag" element={<Hashtag />} />
2023-02-06 14:54:18 +03:00
<Route path="/:instance?/a/:id" element={<AccountStatuses />} />
2023-02-06 15:17:07 +03:00
<Route path="/:instance?/p">
<Route index element={<Public />} />
<Route path="l" element={<Public local />} />
</Route>
<Route path="/:instance?/search" element={<Search />} />
{/* <Route path="/:anything" element={<NotFound />} /> */}
</Routes>
<Routes>
2023-02-06 14:54:18 +03:00
<Route path="/:instance?/s/:id" element={<Status />} />
</Routes>
<div>
{!snapStates.settings.shortcutsColumnsMode &&
snapStates.settings.shortcutsViewMode !== 'multi-column' && (
<Shortcuts />
)}
</div>
2022-12-10 12:14:48 +03:00
{!!snapStates.showCompose && (
<Modal>
<Compose
replyToStatus={
typeof snapStates.showCompose !== 'boolean'
? snapStates.showCompose.replyToStatus
: window.__COMPOSE__?.replyToStatus || null
}
editStatus={
states.showCompose?.editStatus ||
window.__COMPOSE__?.editStatus ||
null
}
draftStatus={
states.showCompose?.draftStatus ||
window.__COMPOSE__?.draftStatus ||
null
2022-12-10 12:14:48 +03:00
}
onClose={(results) => {
const { newStatus, instance } = results || {};
2022-12-10 12:14:48 +03:00
states.showCompose = false;
window.__COMPOSE__ = null;
if (newStatus) {
2022-12-10 12:14:48 +03:00
states.reloadStatusPage++;
showToast({
text: 'Status posted. Check it out.',
delay: 1000,
duration: 10_000, // 10 seconds
onClick: (toast) => {
toast.hideToast();
states.prevLocation = location;
navigate(
instance
? `/${instance}/s/${newStatus.id}`
: `/s/${newStatus.id}`,
);
},
});
2022-12-10 12:14:48 +03:00
}
}}
/>
</Modal>
)}
{!!snapStates.showSettings && (
<Modal
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showSettings = false;
}
}}
>
<Settings
onClose={() => {
states.showSettings = false;
}}
/>
</Modal>
)}
{!!snapStates.showAccounts && (
<Modal
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showAccounts = false;
}
}}
>
<Accounts
onClose={() => {
states.showAccounts = false;
}}
/>
</Modal>
)}
2022-12-10 12:14:48 +03:00
{!!snapStates.showAccount && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showAccount = false;
}
}}
>
<AccountSheet
account={snapStates.showAccount?.account || snapStates.showAccount}
instance={snapStates.showAccount?.instance}
onClose={({ destination }) => {
states.showAccount = false;
if (destination) {
states.showAccounts = false;
}
}}
/>
2022-12-10 12:14:48 +03:00
</Modal>
)}
{!!snapStates.showDrafts && (
<Modal
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showDrafts = false;
}
}}
>
<Drafts />
</Modal>
)}
{!!snapStates.showMediaModal && (
<Modal
onClick={(e) => {
if (
e.target === e.currentTarget ||
e.target.classList.contains('media')
) {
states.showMediaModal = false;
}
}}
>
<MediaModal
mediaAttachments={snapStates.showMediaModal.mediaAttachments}
instance={snapStates.showMediaModal.instance}
index={snapStates.showMediaModal.index}
statusID={snapStates.showMediaModal.statusID}
onClose={() => {
states.showMediaModal = false;
}}
/>
</Modal>
)}
2023-02-16 12:51:54 +03:00
{!!snapStates.showShortcutsSettings && (
<Modal
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showShortcutsSettings = false;
}
}}
>
<ShortcutsSettings />
</Modal>
)}
2022-12-10 12:14:48 +03:00
</>
);
}
2022-12-31 20:46:08 +03:00
2023-02-12 12:38:50 +03:00
// let ws;
// async function startStream() {
// const { masto, instance } = api();
// if (
// ws &&
// (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)
// ) {
// return;
// }
// const stream = await masto.v1.stream.streamUser();
// console.log('STREAM START', { stream });
// ws = stream.ws;
// const handleNewStatus = debounce((status) => {
// console.log('UPDATE', status);
// if (document.visibilityState === 'hidden') return;
// const inHomeNew = states.homeNew.find((s) => s.id === status.id);
// const inHome = status.id === states.homeLast?.id;
// if (!inHomeNew && !inHome) {
// if (states.settings.boostsCarousel && status.reblog) {
// // do nothing
// } else {
// states.homeNew.unshift({
// id: status.id,
// reblog: status.reblog?.id,
// reply: !!status.inReplyToAccountId,
// });
// console.log('homeNew 1', [...states.homeNew]);
// }
// }
// saveStatus(status, instance);
// }, 5000);
// stream.on('update', handleNewStatus);
// stream.on('status.update', (status) => {
// console.log('STATUS.UPDATE', status);
// saveStatus(status, instance);
// });
// stream.on('delete', (statusID) => {
// console.log('DELETE', statusID);
// // delete states.statuses[statusID];
// const s = getStatus(statusID);
// if (s) s._deleted = true;
// });
// stream.on('notification', (notification) => {
// console.log('NOTIFICATION', notification);
// const inNotificationsNew = states.notificationsNew.find(
// (n) => n.id === notification.id,
// );
// const inNotifications = notification.id === states.notificationsLast?.id;
// if (!inNotificationsNew && !inNotifications) {
// states.notificationsNew.unshift(notification);
// }
// saveStatus(notification.status, instance, { override: false });
// });
// stream.ws.onclose = () => {
// console.log('STREAM CLOSED!');
// if (document.visibilityState !== 'hidden') {
// startStream();
// }
// };
// return {
// stream,
// stopStream: () => {
// stream.ws.close();
// },
// };
// }
// let lastHidden;
// function startVisibility() {
// const { masto, instance } = api();
// const handleVisible = (visible) => {
// if (!visible) {
// const timestamp = Date.now();
// lastHidden = timestamp;
// } else {
// const timestamp = Date.now();
// const diff = timestamp - lastHidden;
// const diffMins = Math.round(diff / 1000 / 60);
// console.log(`visible: ${visible}`, { lastHidden, diffMins });
// if (!lastHidden || diffMins > 1) {
// (async () => {
// try {
// const firstStatusID = states.homeLast?.id;
// const firstNotificationID = states.notificationsLast?.id;
// console.log({ states, firstNotificationID, firstStatusID });
// const fetchHome = masto.v1.timelines.listHome({
// limit: 5,
// ...(firstStatusID && { sinceId: firstStatusID }),
// });
// const fetchNotifications = masto.v1.notifications.list({
// limit: 1,
// ...(firstNotificationID && { sinceId: firstNotificationID }),
// });
// const newStatuses = await fetchHome;
// const hasOneAndReblog =
// newStatuses.length === 1 && newStatuses?.[0]?.reblog;
// if (newStatuses.length) {
// if (states.settings.boostsCarousel && hasOneAndReblog) {
// // do nothing
// } else {
// states.homeNew = newStatuses.map((status) => {
// saveStatus(status, instance);
// return {
// id: status.id,
// reblog: status.reblog?.id,
// reply: !!status.inReplyToAccountId,
// };
// });
// console.log('homeNew 2', [...states.homeNew]);
// }
// }
// const newNotifications = await fetchNotifications;
// if (newNotifications.length) {
// const notification = newNotifications[0];
// const inNotificationsNew = states.notificationsNew.find(
// (n) => n.id === notification.id,
// );
// const inNotifications =
// notification.id === states.notificationsLast?.id;
// if (!inNotificationsNew && !inNotifications) {
// states.notificationsNew.unshift(notification);
// }
// saveStatus(notification.status, instance, { override: false });
// }
// } catch (e) {
// // Silently fail
// console.error(e);
// } finally {
// startStream();
// }
// })();
// }
// }
// };
// const handleVisibilityChange = () => {
// const hidden = document.visibilityState === 'hidden';
// handleVisible(!hidden);
// console.log('VISIBILITY: ' + (hidden ? 'hidden' : 'visible'));
// };
// document.addEventListener('visibilitychange', handleVisibilityChange);
// requestAnimationFrame(handleVisibilityChange);
// return {
// stop: () => {
// document.removeEventListener('visibilitychange', handleVisibilityChange);
// },
// };
// }
2022-12-31 20:46:08 +03:00
export { App };