From 02c47cab34a61c6477206879a793e3365e3fc6ad Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 14 Nov 2022 16:30:09 +0100 Subject: [PATCH] Start displaying some paginated stuff --- frontend/.eslintrc.cjs | 7 +- frontend/src/components/CompatSsoLogin.tsx | 36 +++++ .../src/components/CompatSsoLoginList.tsx | 48 +++++++ .../CompatSsoLoginList_user.graphql.ts | 85 +++++++++++ .../CompatSsoLogin_login.graphql.ts | 50 +++++++ frontend/src/pages/Home.tsx | 4 + .../pages/__generated__/HomeQuery.graphql.ts | 135 +++++++++++++----- 7 files changed, 331 insertions(+), 34 deletions(-) create mode 100644 frontend/src/components/CompatSsoLogin.tsx create mode 100644 frontend/src/components/CompatSsoLoginList.tsx create mode 100644 frontend/src/components/__generated__/CompatSsoLoginList_user.graphql.ts create mode 100644 frontend/src/components/__generated__/CompatSsoLogin_login.graphql.ts diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs index 18bb4b83..b221dafe 100644 --- a/frontend/.eslintrc.cjs +++ b/frontend/.eslintrc.cjs @@ -86,6 +86,12 @@ module.exports = { files: "./src/**/*.graphql", extends: ["plugin:@graphql-eslint/operations-recommended"], rules: { + "@graphql-eslint/known-fragment-names": "off", + "@graphql-eslint/no-unused-fragments": "off", + "@graphql-eslint/known-directives": [ + "error", + { ignoreClientDirectives: ["connection", "refetchable"] }, + ], // This rule is copied from the 'operations-recommended' config, // but without the 'Query' forbidden suffix on operations, // since it directly clashes with the relay operation naming convention @@ -99,7 +105,6 @@ module.exports = { forbiddenSuffixes: [/* "Query", */ "Mutation", "Subscription"], }, FragmentDefinition: { - style: "PascalCase", forbiddenPrefixes: ["Fragment"], forbiddenSuffixes: ["Fragment"], }, diff --git a/frontend/src/components/CompatSsoLogin.tsx b/frontend/src/components/CompatSsoLogin.tsx new file mode 100644 index 00000000..1a66e57f --- /dev/null +++ b/frontend/src/components/CompatSsoLogin.tsx @@ -0,0 +1,36 @@ +// Copyright 2022 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import type { CompatSsoLogin_login$key } from "./__generated__/CompatSsoLogin_login.graphql"; +import { graphql, useFragment } from "react-relay"; + +type Props = { + login: CompatSsoLogin_login$key; +}; + +const CompatSsoLogin: React.FC = ({ login }) => { + const data = useFragment( + graphql` + fragment CompatSsoLogin_login on CompatSsoLogin { + id + redirectUri + } + `, + login + ); + + return <>{data.redirectUri}; +}; + +export default CompatSsoLogin; diff --git a/frontend/src/components/CompatSsoLoginList.tsx b/frontend/src/components/CompatSsoLoginList.tsx new file mode 100644 index 00000000..a9536020 --- /dev/null +++ b/frontend/src/components/CompatSsoLoginList.tsx @@ -0,0 +1,48 @@ +// Copyright 2022 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { graphql, useFragment } from "react-relay"; +import CompatSsoLogin from "./CompatSsoLogin"; +import { CompatSsoLoginList_user$key } from "./__generated__/CompatSsoLoginList_user.graphql"; + +type Props = { + user: CompatSsoLoginList_user$key; +}; + +const CompatSsoLoginList: React.FC = ({ user }) => { + const data = useFragment( + graphql` + fragment CompatSsoLoginList_user on User { + compatSsoLogins(first: 10) { + edges { + node { + ...CompatSsoLogin_login + } + } + } + } + `, + user + ); + + return ( +
+ {data.compatSsoLogins.edges.map((n) => ( + + ))} +
+ ); +}; + +export default CompatSsoLoginList; diff --git a/frontend/src/components/__generated__/CompatSsoLoginList_user.graphql.ts b/frontend/src/components/__generated__/CompatSsoLoginList_user.graphql.ts new file mode 100644 index 00000000..e272bc66 --- /dev/null +++ b/frontend/src/components/__generated__/CompatSsoLoginList_user.graphql.ts @@ -0,0 +1,85 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { Fragment, ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type CompatSsoLoginList_user$data = { + readonly compatSsoLogins: { + readonly edges: ReadonlyArray<{ + readonly node: { + readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLogin_login">; + }; + }>; + }; + readonly " $fragmentType": "CompatSsoLoginList_user"; +}; +export type CompatSsoLoginList_user$key = { + readonly " $data"?: CompatSsoLoginList_user$data; + readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLoginList_user">; +}; + +const node: ReaderFragment = { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "CompatSsoLoginList_user", + "selections": [ + { + "alias": null, + "args": [ + { + "kind": "Literal", + "name": "first", + "value": 10 + } + ], + "concreteType": "CompatSsoLoginConnection", + "kind": "LinkedField", + "name": "compatSsoLogins", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "CompatSsoLoginEdge", + "kind": "LinkedField", + "name": "edges", + "plural": true, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "CompatSsoLogin", + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "args": null, + "kind": "FragmentSpread", + "name": "CompatSsoLogin_login" + } + ], + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": "compatSsoLogins(first:10)" + } + ], + "type": "User", + "abstractKey": null +}; + +(node as any).hash = "b70f4b63784afe8f1f69c78198194cc9"; + +export default node; diff --git a/frontend/src/components/__generated__/CompatSsoLogin_login.graphql.ts b/frontend/src/components/__generated__/CompatSsoLogin_login.graphql.ts new file mode 100644 index 00000000..73a4b7c7 --- /dev/null +++ b/frontend/src/components/__generated__/CompatSsoLogin_login.graphql.ts @@ -0,0 +1,50 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { Fragment, ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type CompatSsoLogin_login$data = { + readonly id: string; + readonly redirectUri: any; + readonly " $fragmentType": "CompatSsoLogin_login"; +}; +export type CompatSsoLogin_login$key = { + readonly " $data"?: CompatSsoLogin_login$data; + readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLogin_login">; +}; + +const node: ReaderFragment = { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "CompatSsoLogin_login", + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "redirectUri", + "storageKey": null + } + ], + "type": "CompatSsoLogin", + "abstractKey": null +}; + +(node as any).hash = "e1151a93f1ba4a56332b8aa6129f7bfe"; + +export default node; diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 3e360019..54fb5694 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -14,6 +14,7 @@ import { graphql, useLazyLoadQuery } from "react-relay"; +import CompatSsoLoginList from "../components/CompatSsoLoginList"; import type { HomeQuery } from "./__generated__/HomeQuery.graphql"; const Home: React.FC = () => { @@ -23,6 +24,8 @@ const Home: React.FC = () => { currentUser { id username + + ...CompatSsoLoginList_user } } `, @@ -35,6 +38,7 @@ const Home: React.FC = () => {

Hello {data.currentUser.username}!

+ ); } else { diff --git a/frontend/src/pages/__generated__/HomeQuery.graphql.ts b/frontend/src/pages/__generated__/HomeQuery.graphql.ts index 9435a099..79fe3ac5 100644 --- a/frontend/src/pages/__generated__/HomeQuery.graphql.ts +++ b/frontend/src/pages/__generated__/HomeQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<<94462aca9c48eae79c22a11003d865c3>> * @lightSyntaxTransform * @nogrep */ @@ -9,11 +9,13 @@ // @ts-nocheck import { ConcreteRequest, Query } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; export type HomeQuery$variables = {}; export type HomeQuery$data = { readonly currentUser: { readonly id: string; readonly username: string; + readonly " $fragmentSpreads": FragmentRefs<"CompatSsoLoginList_user">; } | null; }; export type HomeQuery = { @@ -22,40 +24,46 @@ export type HomeQuery = { }; const node: ConcreteRequest = (function(){ -var v0 = [ - { - "alias": null, - "args": null, - "concreteType": "User", - "kind": "LinkedField", - "name": "currentUser", - "plural": false, - "selections": [ - { - "alias": null, - "args": null, - "kind": "ScalarField", - "name": "id", - "storageKey": null - }, - { - "alias": null, - "args": null, - "kind": "ScalarField", - "name": "username", - "storageKey": null - } - ], - "storageKey": null - } -]; +var v0 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v1 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "username", + "storageKey": null +}; return { "fragment": { "argumentDefinitions": [], "kind": "Fragment", "metadata": null, "name": "HomeQuery", - "selections": (v0/*: any*/), + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "User", + "kind": "LinkedField", + "name": "currentUser", + "plural": false, + "selections": [ + (v0/*: any*/), + (v1/*: any*/), + { + "args": null, + "kind": "FragmentSpread", + "name": "CompatSsoLoginList_user" + } + ], + "storageKey": null + } + ], "type": "RootQuery", "abstractKey": null }, @@ -64,19 +72,80 @@ return { "argumentDefinitions": [], "kind": "Operation", "name": "HomeQuery", - "selections": (v0/*: any*/) + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "User", + "kind": "LinkedField", + "name": "currentUser", + "plural": false, + "selections": [ + (v0/*: any*/), + (v1/*: any*/), + { + "alias": null, + "args": [ + { + "kind": "Literal", + "name": "first", + "value": 10 + } + ], + "concreteType": "CompatSsoLoginConnection", + "kind": "LinkedField", + "name": "compatSsoLogins", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "CompatSsoLoginEdge", + "kind": "LinkedField", + "name": "edges", + "plural": true, + "selections": [ + { + "alias": null, + "args": null, + "concreteType": "CompatSsoLogin", + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + (v0/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "redirectUri", + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": null + } + ], + "storageKey": "compatSsoLogins(first:10)" + } + ], + "storageKey": null + } + ] }, "params": { - "cacheID": "ed11a3960d77e44416be48bbade86350", + "cacheID": "1b4d3469bb6ccc19b8944b1f7fedd9c5", "id": null, "metadata": {}, "name": "HomeQuery", "operationKind": "query", - "text": "query HomeQuery {\n currentUser {\n id\n username\n }\n}\n" + "text": "query HomeQuery {\n currentUser {\n id\n username\n ...CompatSsoLoginList_user\n }\n}\n\nfragment CompatSsoLoginList_user on User {\n compatSsoLogins(first: 10) {\n edges {\n node {\n ...CompatSsoLogin_login\n id\n }\n }\n }\n}\n\nfragment CompatSsoLogin_login on CompatSsoLogin {\n id\n redirectUri\n}\n" } }; })(); -(node as any).hash = "9746f86ec5c6368af275e5eb2789bff7"; +(node as any).hash = "a5defd2dc81b62abebfe7a393573d5a8"; export default node;