matrix/authentication-service
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2025-11-20 12:02:22 +03:00
Code Activity

frontend: Migrate to jotai and urql

Browse Source 
This cuts the bundle size by 50% and makes it easier to reason about state.
It removes the usage of react-router-dom and replaces it with a simple router atom based on jotai-location.
Since the screens will be quite simple, I don't expect that we'll need the advanced caching features of react-relay, hence the switch to urql.
This commit is contained in:
Quentin Gliech
2023-03-20 18:08:58 +01:00
parent 17e4bb70c1
commit b26d12f52f
40 changed files with 3008 additions and 3112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/BrowserSession.tsx
View File

@@ -12,33 +12,30 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import type { BrowserSession_session$key } from "./__generated__/BrowserSession_session.graphql";
import { graphql, useFragment } from "react-relay";
import Block from "./Block";
import { Body, Subtitle } from "./Typography";
import DateTime from "./DateTime";
import { Link } from "react-router-dom";
import { Link } from "../Router";
import { FragmentType, graphql, useFragment } from "../gql";
const FRAGMENT = graphql(/* GraphQL */ `
fragment BrowserSession_session on BrowserSession {
id
createdAt
lastAuthentication {
id
createdAt
}
}
`);
type Props = {
session: BrowserSession_session$key;
session: FragmentType<typeof FRAGMENT>;
isCurrent: boolean;
};
const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
const data = useFragment(
graphql`
fragment BrowserSession_session on BrowserSession {
id
createdAt
lastAuthentication {
id
createdAt
}
}
`,
session
);
const data = useFragment(FRAGMENT, session);
const lastAuthentication = data.lastAuthentication?.createdAt;
const createdAt = data.createdAt;
@@ -48,7 +45,7 @@ const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
{isCurrent && <Subtitle>Current session</Subtitle>}
<Body>
<Link
to={`/session/${data.id}`}
route={{ type: "session", id: data.id }}
className="text-links hover:text-links/75"
>
Started: <DateTime datetime={createdAt} />