From e8e76857ddf2a09c2b132e1a2b1ac814757cab20 Mon Sep 17 00:00:00 2001 From: Firesieht Date: Sat, 5 Jun 2021 00:19:02 +0300 Subject: [PATCH] add a EvgenApp.Docs --- graphql.schema.json | 126 ++++++++++++++---- regSchema.graphql | 23 +++- src/generated/graphql.tsx | 114 +++++++++++++++- src/screens/BaseScreen/BaseScreen.tsx | 56 ++++++-- src/uiKit/Documents/Document/Document.tsx | 27 ++-- .../Documents/DocumentCard/DocumentCard.tsx | 17 ++- src/uiKit/Documents/TextEditor/TextEditor.jsx | 6 +- 7 files changed, 310 insertions(+), 59 deletions(-) diff --git a/graphql.schema.json b/graphql.schema.json index 1ca991e..382299f 100644 --- a/graphql.schema.json +++ b/graphql.schema.json @@ -12,6 +12,29 @@ "kind": "OBJECT", "name": "CreateDoc", "description": null, + "fields": [ + { + "name": "document", + "description": null, + "args": [], + "type": { + "kind": "OBJECT", + "name": "MaterialType", + "ofType": null + }, + "isDeprecated": false, + "deprecationReason": null + } + ], + "inputFields": null, + "interfaces": [], + "enumValues": null, + "possibleTypes": null + }, + { + "kind": "OBJECT", + "name": "CreateUser", + "description": null, "fields": [ { "name": "ok", @@ -41,29 +64,6 @@ "enumValues": null, "possibleTypes": null }, - { - "kind": "OBJECT", - "name": "CreateUser", - "description": null, - "fields": [ - { - "name": "ok", - "description": null, - "args": [], - "type": { - "kind": "SCALAR", - "name": "Boolean", - "ofType": null - }, - "isDeprecated": false, - "deprecationReason": null - } - ], - "inputFields": null, - "interfaces": [], - "enumValues": null, - "possibleTypes": null - }, { "kind": "SCALAR", "name": "DateTime", @@ -159,6 +159,38 @@ }, "isDeprecated": false, "deprecationReason": null + }, + { + "name": "name", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "String", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "state", + "description": null, + "args": [], + "type": { + "kind": "NON_NULL", + "name": null, + "ofType": { + "kind": "SCALAR", + "name": "String", + "ofType": null + } + }, + "isDeprecated": false, + "deprecationReason": null } ], "inputFields": null, @@ -431,6 +463,30 @@ "isDeprecated": false, "deprecationReason": null }, + { + "name": "name", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "state", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, { "name": "token", "description": null, @@ -479,6 +535,30 @@ "defaultValue": null, "isDeprecated": false, "deprecationReason": null + }, + { + "name": "name", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null + }, + { + "name": "state", + "description": null, + "type": { + "kind": "SCALAR", + "name": "String", + "ofType": null + }, + "defaultValue": null, + "isDeprecated": false, + "deprecationReason": null } ], "type": { diff --git a/regSchema.graphql b/regSchema.graphql index 64b2cc5..e466083 100644 --- a/regSchema.graphql +++ b/regSchema.graphql @@ -12,19 +12,34 @@ mutation register($username:String!, $password:String!){ query getMaterials($token: String){ materialsByUser(token:$token){ + name + state content id } } - -mutation UpdateDoc($id:ID, $content:String){ - updateDoc(content:$content, id:$id){ +mutation UpdateDoc($id:ID, $content:String, $name:String, $state:String){ + updateDoc(content:$content, id:$id, name:$name, state:$state){ + ok + } +} +mutation DeleteDoc($id:ID){ + deleteDoc(id:$id){ ok } } query getMaterialByID($id:ID!){ material(id:$id){ - content + name + state + } +} + +mutation CreateDoc($token: String, $name:String){ + createDoc(token:$token, content:"Это новый документ!",name:$name, state:"{\"blocks\":[{\"key\":\"637gr\",\"text\":\"Это новый документ!\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}}],\"entityMap\":{}}"){ + document{ + id + } } } \ No newline at end of file diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx index bd49c94..fadfb59 100644 --- a/src/generated/graphql.tsx +++ b/src/generated/graphql.tsx @@ -28,7 +28,7 @@ export type Scalars = { export type CreateDoc = { __typename?: 'CreateDoc'; - ok?: Maybe; + document?: Maybe; }; export type CreateUser = { @@ -49,6 +49,8 @@ export type MaterialType = Node & { id: Scalars['ID']; user: UserType; content: Scalars['String']; + name: Scalars['String']; + state: Scalars['String']; }; export type MaterialTypeConnection = { @@ -105,6 +107,8 @@ export type MutationCreateUserArgs = { export type MutationCreateDocArgs = { content?: Maybe; + name?: Maybe; + state?: Maybe; token?: Maybe; }; @@ -112,6 +116,8 @@ export type MutationCreateDocArgs = { export type MutationUpdateDocArgs = { content?: Maybe; id?: Maybe; + name?: Maybe; + state?: Maybe; }; @@ -282,6 +288,8 @@ export type RegisterMutationOptions = Apollo.BaseMutationOptions; export type GetMaterialsQueryResult = Apollo.QueryResult; export const UpdateDocDocument = gql` - mutation UpdateDoc($id: ID, $content: String) { - updateDoc(content: $content, id: $id) { + mutation UpdateDoc($id: ID, $content: String, $name: String, $state: String) { + updateDoc(content: $content, id: $id, name: $name, state: $state) { ok } } @@ -339,6 +347,8 @@ export type UpdateDocMutationFn = Apollo.MutationFunction; export type UpdateDocMutationResult = Apollo.MutationResult; export type UpdateDocMutationOptions = Apollo.BaseMutationOptions; +export const DeleteDocDocument = gql` + mutation DeleteDoc($id: ID) { + deleteDoc(id: $id) { + ok + } +} + `; +export type DeleteDocMutationFn = Apollo.MutationFunction; + +/** + * __useDeleteDocMutation__ + * + * To run a mutation, you first call `useDeleteDocMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useDeleteDocMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [deleteDocMutation, { data, loading, error }] = useDeleteDocMutation({ + * variables: { + * id: // value for 'id' + * }, + * }); + */ +export function useDeleteDocMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(DeleteDocDocument, options); + } +export type DeleteDocMutationHookResult = ReturnType; +export type DeleteDocMutationResult = Apollo.MutationResult; +export type DeleteDocMutationOptions = Apollo.BaseMutationOptions; export const GetMaterialByIdDocument = gql` query getMaterialByID($id: ID!) { material(id: $id) { - content + name + state } } `; @@ -384,6 +428,47 @@ export function useGetMaterialByIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOp export type GetMaterialByIdQueryHookResult = ReturnType; export type GetMaterialByIdLazyQueryHookResult = ReturnType; export type GetMaterialByIdQueryResult = Apollo.QueryResult; +export const CreateDocDocument = gql` + mutation CreateDoc($token: String, $name: String) { + createDoc( + token: $token + content: "Это новый документ!" + name: $name + state: "{\\"blocks\\":[{\\"key\\":\\"637gr\\",\\"text\\":\\"Это новый документ!\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}" + ) { + document { + id + } + } +} + `; +export type CreateDocMutationFn = Apollo.MutationFunction; + +/** + * __useCreateDocMutation__ + * + * To run a mutation, you first call `useCreateDocMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useCreateDocMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [createDocMutation, { data, loading, error }] = useCreateDocMutation({ + * variables: { + * token: // value for 'token' + * name: // value for 'name' + * }, + * }); + */ +export function useCreateDocMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(CreateDocDocument, options); + } +export type CreateDocMutationHookResult = ReturnType; +export type CreateDocMutationResult = Apollo.MutationResult; +export type CreateDocMutationOptions = Apollo.BaseMutationOptions; export type AuthMutationVariables = Exact<{ username: Scalars['String']; password: Scalars['String']; @@ -405,19 +490,36 @@ export type GetMaterialsQueryVariables = Exact<{ }>; -export type GetMaterialsQuery = { __typename?: 'Query', materialsByUser?: Maybe>> }; +export type GetMaterialsQuery = { __typename?: 'Query', materialsByUser?: Maybe>> }; export type UpdateDocMutationVariables = Exact<{ id?: Maybe; content?: Maybe; + name?: Maybe; + state?: Maybe; }>; export type UpdateDocMutation = { __typename?: 'Mutation', updateDoc?: Maybe<{ __typename?: 'UpdateDoc', ok?: Maybe }> }; +export type DeleteDocMutationVariables = Exact<{ + id?: Maybe; +}>; + + +export type DeleteDocMutation = { __typename?: 'Mutation', deleteDoc?: Maybe<{ __typename?: 'DeleteDoc', ok?: Maybe }> }; + export type GetMaterialByIdQueryVariables = Exact<{ id: Scalars['ID']; }>; -export type GetMaterialByIdQuery = { __typename?: 'Query', material?: Maybe<{ __typename?: 'MaterialType', content: string }> }; +export type GetMaterialByIdQuery = { __typename?: 'Query', material?: Maybe<{ __typename?: 'MaterialType', name: string, state: string }> }; + +export type CreateDocMutationVariables = Exact<{ + token?: Maybe; + name?: Maybe; +}>; + + +export type CreateDocMutation = { __typename?: 'Mutation', createDoc?: Maybe<{ __typename?: 'CreateDoc', document?: Maybe<{ __typename?: 'MaterialType', id: string }> }> }; diff --git a/src/screens/BaseScreen/BaseScreen.tsx b/src/screens/BaseScreen/BaseScreen.tsx index 1af4131..c42a6a1 100644 --- a/src/screens/BaseScreen/BaseScreen.tsx +++ b/src/screens/BaseScreen/BaseScreen.tsx @@ -1,22 +1,47 @@ import react from "react"; import {DocumentCard} from "../../uiKit/Documents/DocumentCard/DocumentCard" import {ApplicationSidebar} from "../../uiKit/Sidebar/Sidebar"; -import {useGetMaterialsQuery} from "../../generated/graphql" -import { Route, useRouteMatch, Switch } from "react-router"; -import {useUpdateDocMutation} from "../../generated/graphql" +import {useGetMaterialsLazyQuery, useGetMaterialsQuery} from "../../generated/graphql" +import { Route, useRouteMatch, Switch, useHistory } from "react-router"; +import {useCreateDocMutation} from "../../generated/graphql" import {Document} from "../../uiKit/Documents/Document/Document" +import {useState} from "react"; +import { useLazyQuery, NetworkStatus } from "@apollo/client"; +import {DefaultInput} from "../../uiKit/Input/Input" +import {DefaultButton} from "../../uiKit/Button/Button" -function createDoc(){ - -} export const BaseScreen:react.FC = () => { - let {url} = useRouteMatch(); - const {loading, data} = useGetMaterialsQuery({variables:{token:localStorage.getItem("token")}}); + const history = useHistory(); - if (loading){ + const [createDoc, {data:doc, loading: loading_doc}] = useCreateDocMutation({ + onCompleted: () => { + console.log(doc) + if (doc != undefined){ + history.push(doc?.createDoc?.document?.id == undefined? "":doc?.createDoc?.document?.id) + } + window.location.reload(); + + } + }) + let {url} = useRouteMatch(); + let {loading, data} = useGetMaterialsQuery({variables:{token:localStorage.getItem("token")}}); + let [showModal, setShowModal] = useState(false) + let [docName, setDocName] = useState("Новый документ") + if (loading || loading_doc){ return

Loading...

} + const сreateDocument = () => { + console.log( doc?.createDoc?.document) + createDoc({ + variables:{ + token:localStorage.getItem("token"), + name:docName + }, + + }); + + } return( @@ -39,13 +64,20 @@ export const BaseScreen:react.FC = () => { - + setShowModal(true)}>создать новый документ + {showModal == false?
: +
+ setDocName(e.target.value)}> + сreateDocument()}>Создать +
+ }
{data && data?.materialsByUser?.map( materials => + content={materials?.content == undefined? "нет":materials?.content} + name={materials?.name == undefined? "нет":materials?.name} + > )}
diff --git a/src/uiKit/Documents/Document/Document.tsx b/src/uiKit/Documents/Document/Document.tsx index 88f73e2..95dce27 100644 --- a/src/uiKit/Documents/Document/Document.tsx +++ b/src/uiKit/Documents/Document/Document.tsx @@ -4,9 +4,10 @@ import { } from "react-router-dom" import "./style.css"; import {MyUserComponentEditor} from "../TextEditor/TextEditor" -import {useUpdateDocMutation, useGetMaterialByIdQuery} from "../../../generated/graphql" +import {useUpdateDocMutation, useGetMaterialByIdQuery, useGetMaterialByIdLazyQuery} from "../../../generated/graphql" import {EditorState} from "draft-js" import { convertFromRaw, convertToRaw } from 'draft-js'; +import { get } from "node:https"; export const Document:React.FC = () =>{ @@ -19,25 +20,35 @@ export const Document:React.FC = () =>{ if (loading){ return

loading...

} - if (data?.material == null){ - console.log("нет данных") - return + if (!data){ + // console.log("нет данных") + // return + return
Loading.....
} function onChange(state:any){ - updateDoc({variables:{id:docID, content:JSON.stringify(convertToRaw(state))}}) + updateDoc( + { + variables:{ + id:docID, state:JSON.stringify(convertToRaw(state)).toString(), + name: data?.material?.name.toString() , + content:"пп" + }, + } + ) + console.log(state) + } // let a = {"entityMap":{},"blocks":[{"key":"637gr","text":"Initialized from content state.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]}; // updateDoc({variables:{id:docID, content:JSON.stringify(a)}}) - - let state = convertFromRaw(JSON.parse(data.material.content)) + let State = convertFromRaw(JSON.parse(data?.material?.state!)) return (
- onChange(e)}> + onChange(e)}>
diff --git a/src/uiKit/Documents/DocumentCard/DocumentCard.tsx b/src/uiKit/Documents/DocumentCard/DocumentCard.tsx index 1d567e2..f33fa75 100644 --- a/src/uiKit/Documents/DocumentCard/DocumentCard.tsx +++ b/src/uiKit/Documents/DocumentCard/DocumentCard.tsx @@ -4,18 +4,29 @@ import { useParams, useRouteMatch, Link, Switch, Route, Redirect } from "react-router-dom" import "./style.css"; -import {useUpdateDocMutation} from "../../../generated/graphql" import {Document} from "../Document/Document" +import {useDeleteDocMutation} from "../../../generated/graphql" + interface DocumentCardIE{ id:string; content:string + name:string } export const DocumentCard:React.FC = (props)=>{ let match = useRouteMatch(); - + const [delDoc] = useDeleteDocMutation() return( -
{props.content}
+
{props.name} + + + +
); } \ No newline at end of file diff --git a/src/uiKit/Documents/TextEditor/TextEditor.jsx b/src/uiKit/Documents/TextEditor/TextEditor.jsx index 23b9738..fdf5b26 100644 --- a/src/uiKit/Documents/TextEditor/TextEditor.jsx +++ b/src/uiKit/Documents/TextEditor/TextEditor.jsx @@ -52,9 +52,9 @@ export class MyUserComponentEditor extends React.Component {
- - - + + +
);