eliribble
/
drishti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: eliribble:3ce1ca6d315b279043ea05e78d2a3d158a60e78e
Branches Tags
eliribble:main
...
compare: eliribble:5c7e67a2bdf348b203645dc6cba86f4143d6be56
Branches Tags
eliribble:main

27 Commits
3ce1ca6d31 ... 5c7e67a2bd

Author SHA1 Message Date
Eli Ribble 5c7e67a2bd Add mailbox to location hash. 
Now we can preserve what mailbox we're looking at.
 2024-08-28 01:08:27 -07:00
Eli Ribble ee872f6985 Select a mailbox on click, show its email IDs 
We'll eventually want to populate them.
 2024-08-28 01:08:27 -07:00
Eli Ribble 656495904b Add the ability to select a mailbox. 
Just log the mailbox ID for now.
 2024-08-28 01:08:27 -07:00
Eli Ribble bab5d421d4 Rip apart client, build a wrapper. 
The goal here is to be able to augment the client with additional data
as we get it. At this point I'm now augmenting with the mailbox data
that the MailboxList is requesting and showing that.

That's progress.

There may be significant issues with making multiple requests in a
single round-trip because my client library appears to do things like
hard-coding the position of specific requests. I may have to work around
this.
 2024-08-28 01:08:27 -07:00
Eli Ribble c17e8b9ad0 Get to where I'm querying for mailboxes 
This won't work, not in the long term, but it's a better direction.

I've created proxy classes for the classes coming from the JMAP client.
The issue here is that this client is likely to have a bunch of things
wrong. Specifically, the standard indicates that the client can be
extremely stateful, to the point where it's just getting a stream of
updates and keeping most of the structure in memory. The client, as
presently built, does not make it easy to honor this part of the
standard, so I'm going to have to structure the client interaction
differently.

However, what I've done here, while interesting, is not good.

The problem is that I am correctly telling the client "I need the list
of mailboxes" when I render the mailbox list, but I'm not able to
propogate that information back to the client since it's passed down
through props.

I'm going to need to separate out the client into its own class and have
an eventing system of some kind between it and the app.
 2024-08-28 01:08:27 -07:00
Eli Ribble a93a5d84f3 Trigger account list on valid session. 
It's cleaner
 2024-08-28 01:08:27 -07:00
Eli Ribble c5afd9f895 Allow selection of the account. 
This was surprisingly complex because I tried to use react-router and
found no easily and reasonable way to do it, so instead I hooked the
location change event myself and plumbed it through. This required me to
switch to a class-style component rather than a functional one, which
required translating a bunch of coding styles through React.

Overall I'm happy, it works pretty well and simply.
 2024-08-28 01:08:27 -07:00
Eli Ribble 1d7d96de4a Add list of accounts from the session. 
This isn't great, but it shows data from the API being fed into the
interface.
 2024-08-28 01:08:27 -07:00
Eli Ribble 2b94459651 Only make a single client setup request. 2024-08-28 01:08:27 -07:00
Eli Ribble 05779c0b64 Use tabs, add jmap-client-ts, use it a bit 2024-08-28 01:08:27 -07:00
Eli Ribble 913856c11b Save auth in localstorage and use it 
Also consistently call it "email".
 2024-08-28 01:08:27 -07:00
Eli Ribble 34ea77f7c3 Make enter key work on auth form. 
It was bugging me.
 2024-08-28 01:08:27 -07:00
Eli Ribble faca28f802 Actually make the login attempt to the well-known JMAP endpoint 2024-08-28 01:08:27 -07:00
Eli Ribble c6400d58d3 Save the username and password, show an alert to prove it. 2024-08-28 01:08:27 -07:00
Eli Ribble 9ff63d96fd Show an alert when we click the "login" button. 
Yay, user interactivity.
 2024-08-28 01:08:27 -07:00
Eli Ribble 302cbdd43d Add favicon and site title. 
So I can find the tab, essentially.
 2024-08-28 01:08:27 -07:00
Eli Ribble cda369a5f0 Auto pretty everything, add initial auth modal. 
Sorry this isn't more commits, but, whatever.
 2024-08-28 01:08:27 -07:00
Eli Ribble 9033b9862a Add pre-commit hook for formatting 2024-08-28 01:08:27 -07:00
Eli Ribble 91600be038 Add an autoformatter. 
Seems fine.
 2024-08-28 01:08:27 -07:00
Eli Ribble 16d9d4c4a4 Add authentication modal dialog and a stab at localstorage 2024-08-28 01:08:27 -07:00
Eli Ribble 8ea7aac4ed Make a basic remote request for data. 
This uses an example from https://www.codingthesmartway.com/how-to-fetch-api-data-with-react/
and a public data API.
 2024-08-28 01:08:27 -07:00
Eli Ribble 0878ec9435 Fix compiler warning. 
I don't understand it, I just did exactly what it said to do.
 2024-08-28 01:08:27 -07:00
Eli Ribble 48191baf2b Start of the mailbox list. 2024-08-28 01:08:27 -07:00
Eli Ribble d1746b6d17 Add react-bootstrap. 
Now we're strappin'
 2024-08-28 01:08:27 -07:00
Eli Ribble 7cd1a9cd97 Bootstrap with basic create-react-app and typescript. 
No real changes to it, and I'm avoiding the favicon and logos to avoid
burdening my git repository, but otherwise it's all here while I figure
out how to change things.
 2024-08-28 01:08:26 -07:00
Eli Ribble 60bc97aab1 Add basic config for dev environment on nix 2024-08-28 01:08:06 -07:00
Eli Ribble 5099c395b7 Initial README.md 2024-08-28 01:08:04 -07:00
29 changed files with 19168 additions and 2 deletions
Show Stats Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

8
.pre-commit-config.yaml Normal file
View File

@ -0,0 +1,8 @@
repos:
- repo: local
hooks:
- id: prettier
name: prettier
language: system
entry: npx prettier --write
files: '\.tsx$'

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
{
useTabs: true
}

43
README.md
View File

@ -1,3 +1,42 @@
# drishti # Drishti
JMAP Webmail This a JMAP browser email client.
## Incantations
In the project directory, you can run:
### Run Development Server
`npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### Run Tests
`npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### Build for production
`npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### Format all the code
```
npx prettier . --write
```

15
default.nix Normal file
View File

@ -0,0 +1,15 @@
with import <nixpkgs> {};
stdenv.mkDerivation {
name = "react-bootstrap-shell";
buildInputs = with pkgs; [
create-react-app
nodejs
pre-commit
yarn
];
shellHook = ''
export PATH="$PWD/node_modules/.bin/:$PATH"
'';
}

18264
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

52
package.json Normal file
View File

@ -0,0 +1,52 @@
{
"name": "dristi",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.104",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"base-64": "^1.0.0",
"bootstrap": "^5.3.3",
"jmap-client-ts": "^1.0.0",
"react": "^18.3.1",
"react-bootstrap": "^2.10.4",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/base-64": "^1.0.2",
"prettier": "3.3.3"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

43
public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Drishti Mail</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

25
public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

28
src/AccountList.tsx Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
import Dropdown from "react-bootstrap/Dropdown";
import { AccountIdMap, IAccount } from "./client/types";
export type AccountListProps = {
account: IAccount | null;
accounts: AccountIdMap;
};
const AccountList: React.FC<AccountListProps> = ({ account, accounts }) => {
return (
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
{account ? account.name : "select account"}
</Dropdown.Toggle>
<Dropdown.Menu>
{Object.keys(accounts).map((key: keyof AccountIdMap) => (
<Dropdown.Item href={"#" + key} key={key}>
{accounts[key].name}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
};
export default AccountList;

38
src/App.css Normal file
View File

@ -0,0 +1,38 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

9
src/App.test.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";
test("renders learn react link", () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

148
src/App.tsx Normal file
View File

@ -0,0 +1,148 @@
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Client, { IAuth } from "./client/Client";
import { AccountIdMap, IAccount, IMailbox } from "./client/types";
import AppLayout from "./AppLayout";
import AuthModal from "./AuthModal";
import React from "react";
interface ILocation {
accountId: string;
mailboxId: string;
}
type AppState = {
auth: IAuth;
account: IAccount | null;
accounts: AccountIdMap;
location: ILocation;
mailbox: IMailbox | null;
};
type AppProps = {};
class App extends React.Component<AppProps, AppState> {
account(): IAccount | null {
return this.client.account(this.state.location.accountId);
}
mailbox(): IMailbox | null {
return this.client.mailbox(
this.state.location.accountId,
this.state.location.mailboxId,
);
}
client: Client = new Client();
state: AppState = {
account: null,
accounts: {},
auth: { email: "", password: "" },
location: { accountId: "", mailboxId: "" },
mailbox: null,
};
onHashChange() {
const hash = window.location.hash.substring(1);
const parts = hash.split("/");
const accountId = parts[0];
const mailboxId = parts[1];
this.setState({
...this.state,
account: this.account(),
location: {
accountId: accountId,
mailboxId: mailboxId,
},
});
}
// When the user provides credentials
onLogin(email: string, password: string) {
// Store the provided credentials for now
this.setState({
...this.state,
auth: {
email: email,
password: password,
},
});
localStorage.setItem("auth", JSON.stringify(this.state.auth));
this.client.doLogin({ email, password });
}
onMailboxSelect(mailboxId: string) {
if (!this.state.account) return;
this.client.emailList(this.state.account.id, mailboxId, []);
this.setState({
...this.state,
mailbox: this.client.mailbox(this.state.account.id, mailboxId),
});
window.location.hash = this.state.location.accountId + "/" + mailboxId;
}
// Load up auth credentials from the local store
loadAuth() {
const data = localStorage.getItem("auth");
if (!data) return;
const auth = JSON.parse(data);
this.setState({
...this.state,
auth: auth,
});
this.client.ensureLogin(auth);
}
componentDidMount() {
window.addEventListener(
"hashchange",
() => {
this.onHashChange();
},
false,
);
this.loadAuth();
this.onHashChange();
this.client.onChange(() => {
this.setState({
...this.state,
account: this.account(),
accounts: this.client.state.session
? this.client.state.session.accounts
: {},
mailbox: this.mailbox(),
});
});
}
componentWillUnmount() {
window.removeEventListener(
"hashchange",
() => {
this.onHashChange();
},
false,
);
}
render() {
return (
<div className="App">
<AppLayout
account={this.state.account}
accounts={this.state.accounts}
client={this.client}
mailbox={this.state.mailbox}
onMailboxSelect={(m) => {
this.onMailboxSelect(m);
}}
/>
<AuthModal
show={this.client.state.session == null}
onLogin={this.onLogin}
></AuthModal>
</div>
);
}
}
export default App;

49
src/AppLayout.tsx Normal file
View File

@ -0,0 +1,49 @@
import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import AccountList from "./AccountList";
import EmailList from "./EmailList";
import MailboxList from "./MailboxList";
import Client from "./client/Client";
import { AccountIdMap, IAccount, IMailbox } from "./client/types";
type TopProps = {
account: IAccount | null;
accounts: AccountIdMap;
client: Client;
mailbox: IMailbox | null;
onMailboxSelect: (mailboxId: string) => void;
};
const AppLayout: React.FC<TopProps> = (props) => {
return (
<Container>
<Row>
<Col>
<AccountList account={props.account} accounts={props.accounts} />
</Col>
<Col></Col>
<Col></Col>
</Row>
<Row>
<Col lg="1">
<MailboxList
account={props.account}
client={props.client}
onMailboxSelect={props.onMailboxSelect}
/>
</Col>
<Col lg="11">
<EmailList
account={props.account}
client={props.client}
mailbox={props.mailbox}
/>
</Col>
</Row>
</Container>
);
};
export default AppLayout;

59
src/AuthModal.tsx Normal file
View File

@ -0,0 +1,59 @@
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Modal from "react-bootstrap/Modal";
import React, { useState } from "react";
type AuthProps = {
onLogin: (email: string, password: string) => void;
show: boolean;
};
const AuthModal: React.FC<AuthProps> = ({ onLogin, show }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form
onSubmit={(e) => {
e.preventDefault();
onLogin(email, password);
}}
>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
onChange={(e) => setEmail(e.target.value)}
/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Group>
<Button variant="primary" type="submit">
Login
</Button>
</Form>
</Modal.Body>
<Modal.Footer></Modal.Footer>
</Modal>
);
};
export default AuthModal;

57
src/EmailList.tsx Normal file
View File

@ -0,0 +1,57 @@
import React from "react";
import Stack from "react-bootstrap/Stack";
import Client from "./client/Client";
import { IAccount, IMailbox } from "./client/types";
type EmailListProps = {
account: IAccount | null;
client: Client | null;
mailbox: IMailbox | null;
};
type EmailListState = {};
class EmailList extends React.Component<EmailListProps, EmailListState> {
componentDidUpdate() {
if (this.props.account == null) return;
if (this.props.client == null) return;
if (this.props.mailbox == null) return;
this.props.client.emailList(
this.props.account.id,
this.props.mailbox.id,
[],
);
}
render() {
if (
this.props.account == null ||
this.props.mailbox == null ||
this.props.mailbox.emailIds == null
) {
return <Stack />;
} else if (this.props.mailbox.emails == null) {
return (
<Stack>
{this.props.mailbox.emailIds.map((e) => (
<div className="p-2" key={e}>
Email {e}
</div>
))}
</Stack>
);
} else {
return (
<Stack>
{this.props.mailbox.emails.map((m) => (
<div className="p-2" key={m.id}>
{m.subject}
</div>
))}
</Stack>
);
}
}
}
export default EmailList;

12
src/Mailbox.tsx Normal file
View File

@ -0,0 +1,12 @@
import ListGroup from "react-bootstrap/ListGroup";
function Mailbox() {
return (
<ListGroup>
<ListGroup.Item>Inbox</ListGroup.Item>
<ListGroup.Item>Spam</ListGroup.Item>
</ListGroup>
);
}
export default Mailbox;

48
src/MailboxList.tsx Normal file
View File

@ -0,0 +1,48 @@
import React from "react";
import Button from "react-bootstrap/Button";
import Stack from "react-bootstrap/Stack";
import Client from "./client/Client";
import { IAccount } from "./client/types";
type MailboxListProps = {
account: IAccount | null;
client: Client | null;
onMailboxSelect: (mailboxId: string) => void;
};
type MailboxListState = {};
class MailboxList extends React.Component<MailboxListProps, MailboxListState> {
componentDidUpdate() {
if (this.props.account == null) return;
if (this.props.client == null) return;
this.props.client.mailboxList(this.props.account.id, []);
}
onMailboxClick(id: string) {
this.props.onMailboxSelect(id);
}
render() {
return this.props.account == null ||
this.props.account.mailboxes == null ? (
<Stack />
) : (
<Stack>
{this.props.account.mailboxes.map((m) => (
<Button
className="p-2"
key={m.id}
onClick={() => {
this.onMailboxClick(m.id);
}}
>
{m.name}
</Button>
))}
</Stack>
);
}
}
export default MailboxList;

152
src/client/Client.tsx Normal file
View File

@ -0,0 +1,152 @@
/*
* Contains all of the logic for interacting with JMAP
* None of the dependencies should leak, in types or otherwise
*/
import * as base64 from "base-64";
import * as jmapclient from "jmap-client-ts";
import { FetchTransport } from "jmap-client-ts/lib/utils/fetch-transport";
import { IAccount, IMailbox, ISession } from "./types";
type Callback = () => void;
export interface IAuth {
email: string;
password: string;
}
export interface ClientState {
session: ISession | null;
}
export default class Client {
// Get the currently active account
account(accountId: string): IAccount | null {
if (!(this.state.session && this.state.session.accounts)) return null;
return this.state.session.accounts[accountId];
}
// All objects which currently are listening for changes
callbacks: Array<Callback> = [];
jclient: jmapclient.Client | null = null;
state: ClientState = {
session: null,
};
onChange(f: Callback) {
this.callbacks.push(f);
}
// Ensure that login happens. If this is called many times, only login once.
ensureLogin(auth: IAuth) {
if (this.jclient != null) return;
this.doLogin(auth);
}
// Make the request to get system metadata
doLogin(auth: IAuth) {
const domain = auth.email.split("@")[1];
const well_known_url = "https://" + domain + "/.well-known/jmap";
const basic_auth =
"Basic " + base64.encode(auth.email + ":" + auth.password);
this.jclient = new jmapclient.Client({
accessToken: "fake token",
httpHeaders: { Authorization: basic_auth },
sessionUrl: well_known_url,
transport: new FetchTransport(fetch.bind(window)),
});
this.jclient
.fetchSession()
.then(() => {
this._onSession();
})
.catch((error) => console.error(error));
return;
}
emailList(accountId: string, mailboxId: string, ids: Array<string>) {
if (this.jclient == null) return;
/*this.jclient.email_get({
accountId: accountId,
ids: [],
properties: ["threadId"]
});*/
this.jclient
.email_query({
accountId: accountId,
filter: { inMailbox: mailboxId },
})
.then((response) => {
const mailbox = this.mailbox(accountId, mailboxId);
if (mailbox == null) return;
mailbox.emailIds = response.ids;
this._triggerChange();
})
.catch(() => {
console.error("OH NOES");
});
}
mailbox(accountId: string, mailboxId: string): IMailbox | null {
if (this.state.session == null) return null;
const account = this.state.session.accounts[accountId];
if (account.mailboxes == null) return null;
for (let i = 0; i < account.mailboxes.length; i++) {
if (account.mailboxes[i].id === mailboxId) {
return account.mailboxes[i];
}
}
return null;
}
mailboxList(accountId: string, ids: Array<string>) {
if (this.jclient == null) return;
if (this.state.session == null) return;
// We already populated the list
if (this.state.session.accounts[accountId].mailboxes != null) return;
this.jclient
.mailbox_get({
accountId: accountId,
ids: null,
})
.then((response) => {
if (this.state.session == null) return;
const account = this.state.session.accounts[response.accountId];
const mailboxes: Array<IMailbox> = [];
response.list.forEach((m) => {
mailboxes.push({
...m,
emailIds: null,
emails: null,
});
});
account.mailboxes = mailboxes;
this._triggerChange();
});
}
_triggerChange() {
this.callbacks.forEach((c) => {
c();
});
}
_onSession() {
console.log("Session received");
// For the type checker
if (!this.jclient) return;
const session = this.jclient.getSession();
this.state.session = {
...session,
accounts: Object.fromEntries(
Object.entries(session.accounts).map(([key, account]) => [
key,
{ ...account, id: key.toString(), mailboxes: null },
]),
),
};
if (!this.state.session) return;
this._triggerChange();
}
}

17
src/client/types.tsx Normal file
View File

@ -0,0 +1,17 @@
import client from "jmap-client-ts/lib/types";
export interface IMailbox extends client.IMailboxProperties {
emailIds: Array<string> | null;
emails: Array<client.IEmailProperties> | null;
}
export interface IAccount extends client.IAccount {
id: string;
mailboxes: Array<IMailbox> | null;
}
export type AccountIdMap = { [accountId: string]: IAccount };
export interface ISession extends client.ISession {
accounts: AccountIdMap;
}

13
src/index.css Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

19
src/index.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement,
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
src/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="react-scripts" />

15
src/reportWebVitals.ts Normal file
View File

@ -0,0 +1,15 @@
import { ReportHandler } from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

5
src/setupTests.ts Normal file
View File

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";

20
tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}