add a EvgenApp.Docs

2024-11-24 16:23:43 +03:00 · 2021-06-05 00:19:02 +03:00 · 2021-06-05 00:19:02 +03:00 · e8e76857dd
commit e8e76857dd
parent 4254ea6daa
7 changed files with 310 additions and 59 deletions
--- 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": {
--- 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
+    }
  }
 }
--- a/src/generated/graphql.tsx
+++ b/src/generated/graphql.tsx
@ -28,7 +28,7 @@ export type Scalars = {

 export type CreateDoc = {
  __typename?: 'CreateDoc';
-  ok?: Maybe<Scalars['Boolean']>;
+  document?: Maybe<MaterialType>;
 };

 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<Scalars['String']>;
+  name?: Maybe<Scalars['String']>;
+  state?: Maybe<Scalars['String']>;
  token?: Maybe<Scalars['String']>;
 };

@ -112,6 +116,8 @@ export type MutationCreateDocArgs = {
 export type MutationUpdateDocArgs = {
  content?: Maybe<Scalars['String']>;
  id?: Maybe<Scalars['ID']>;
+  name?: Maybe<Scalars['String']>;
+  state?: Maybe<Scalars['String']>;
 };


@ -282,6 +288,8 @@ export type RegisterMutationOptions = Apollo.BaseMutationOptions<RegisterMutatio
 export const GetMaterialsDocument = gql`
    query getMaterials($token: String) {
  materialsByUser(token: $token) {
+    name
+    state
    content
    id
  }
@ -316,8 +324,8 @@ export type GetMaterialsQueryHookResult = ReturnType<typeof useGetMaterialsQuery
 export type GetMaterialsLazyQueryHookResult = ReturnType<typeof useGetMaterialsLazyQuery>;
 export type GetMaterialsQueryResult = Apollo.QueryResult<GetMaterialsQuery, GetMaterialsQueryVariables>;
 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<UpdateDocMutation, Upd
 *   variables: {
 *      id: // value for 'id'
 *      content: // value for 'content'
+ *      name: // value for 'name'
+ *      state: // value for 'state'
 *   },
 * });
 */
@ -349,10 +359,44 @@ export function useUpdateDocMutation(baseOptions?: Apollo.MutationHookOptions<Up
 export type UpdateDocMutationHookResult = ReturnType<typeof useUpdateDocMutation>;
 export type UpdateDocMutationResult = Apollo.MutationResult<UpdateDocMutation>;
 export type UpdateDocMutationOptions = Apollo.BaseMutationOptions<UpdateDocMutation, UpdateDocMutationVariables>;
+export const DeleteDocDocument = gql`
+    mutation DeleteDoc($id: ID) {
+  deleteDoc(id: $id) {
+    ok
+  }
+}
+    `;
+export type DeleteDocMutationFn = Apollo.MutationFunction<DeleteDocMutation, DeleteDocMutationVariables>;
+
+/**
+ * __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<DeleteDocMutation, DeleteDocMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteDocMutation, DeleteDocMutationVariables>(DeleteDocDocument, options);
+      }
+export type DeleteDocMutationHookResult = ReturnType<typeof useDeleteDocMutation>;
+export type DeleteDocMutationResult = Apollo.MutationResult<DeleteDocMutation>;
+export type DeleteDocMutationOptions = Apollo.BaseMutationOptions<DeleteDocMutation, DeleteDocMutationVariables>;
 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<typeof useGetMaterialByIdQuery>;
 export type GetMaterialByIdLazyQueryHookResult = ReturnType<typeof useGetMaterialByIdLazyQuery>;
 export type GetMaterialByIdQueryResult = Apollo.QueryResult<GetMaterialByIdQuery, GetMaterialByIdQueryVariables>;
+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<CreateDocMutation, CreateDocMutationVariables>;
+
+/**
+ * __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<CreateDocMutation, CreateDocMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateDocMutation, CreateDocMutationVariables>(CreateDocDocument, options);
+      }
+export type CreateDocMutationHookResult = ReturnType<typeof useCreateDocMutation>;
+export type CreateDocMutationResult = Apollo.MutationResult<CreateDocMutation>;
+export type CreateDocMutationOptions = Apollo.BaseMutationOptions<CreateDocMutation, CreateDocMutationVariables>;
 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<Array<Maybe<{ __typename?: 'MaterialType', content: string, id: string }>>> };
+export type GetMaterialsQuery = { __typename?: 'Query', materialsByUser?: Maybe<Array<Maybe<{ __typename?: 'MaterialType', name: string, state: string, content: string, id: string }>>> };

 export type UpdateDocMutationVariables = Exact<{
  id?: Maybe<Scalars['ID']>;
  content?: Maybe<Scalars['String']>;
+  name?: Maybe<Scalars['String']>;
+  state?: Maybe<Scalars['String']>;
 }>;


 export type UpdateDocMutation = { __typename?: 'Mutation', updateDoc?: Maybe<{ __typename?: 'UpdateDoc', ok?: Maybe<boolean> }> };

+export type DeleteDocMutationVariables = Exact<{
+  id?: Maybe<Scalars['ID']>;
+}>;
+
+
+export type DeleteDocMutation = { __typename?: 'Mutation', deleteDoc?: Maybe<{ __typename?: 'DeleteDoc', ok?: Maybe<boolean> }> };
+
 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<Scalars['String']>;
+  name?: Maybe<Scalars['String']>;
+}>;
+
+
+export type CreateDocMutation = { __typename?: 'Mutation', createDoc?: Maybe<{ __typename?: 'CreateDoc', document?: Maybe<{ __typename?: 'MaterialType', id: string }> }> };
--- 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 <h1>Loading...</h1>
    }
+    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 = () => {
                    <Document></Document>
            </Route>
            <Route path={url}>
-            <button >создать</button>
+            <DefaultButton handleClick={()=>setShowModal(true)}>создать новый документ</DefaultButton>
+            {showModal == false? <div></div>:
+            <div>
+                <DefaultInput placeHolder="Введите имя документа" type="text"  handleChange={(e:any)=>setDocName(e.target.value)}></DefaultInput>
+                <DefaultButton handleClick={()=>сreateDocument()}>Создать</DefaultButton>
+            </div>
+            }
            <div>
                {data && data?.materialsByUser?.map( materials => 
                    <DocumentCard 
                        id={materials?.id == undefined? "нет":materials?.id}
-                        content={materials?.content == undefined? "нет":materials?.content
-                    }></DocumentCard>
+                        content={materials?.content == undefined? "нет":materials?.content}
+                        name={materials?.name == undefined? "нет":materials?.name}
+                    ></DocumentCard>
                )}
            </div>
            </Route>
--- 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 <h1>loading...</h1>
    }
-    if (data?.material == null){
-        console.log("нет данных")
-        return <Redirect to="/index"></Redirect>
+    if (!data){
+        // console.log("нет данных")
+        // return <Redirect to="/index"></Redirect>
+        return <div>Loading.....</div>
    }


    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 (
        <div id="doc">
-        <MyUserComponentEditor addComponents={true} state={state}  onChange={(e:any)=>onChange(e)}></MyUserComponentEditor>
+        <MyUserComponentEditor addComponents={true} state={State}  onChange={(e:any)=>onChange(e)}></MyUserComponentEditor>
        </div>     


--- 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<DocumentCardIE> = (props)=>{
    let match = useRouteMatch();
-
+    const [delDoc]  = useDeleteDocMutation()
    return(
-        <div><Link to={match.url +"/" +  props.id}>{props.content}</Link></div>
+        <div><Link to={match.url +"/" +  props.id}>{props.name}</Link>
+        
+        <button onClick={() => {
+            
+            delDoc({variables:{id:props.id}})
+            window.location.reload();
+            
+            }}>удалить</button>
+
+        </div>
    );
 }
--- a/src/uiKit/Documents/TextEditor/TextEditor.jsx
+++ b/src/uiKit/Documents/TextEditor/TextEditor.jsx
@ -52,9 +52,9 @@ export class MyUserComponentEditor extends React.Component {
      <div onClick={this.stopPropagation}>
        <div className="wrapper">
          <button onClick={(e)=>this.test(e)} id={1} class="taskButton">Прочитать текст</button>
-          <button handleClick={(e)=>this.test(e)} id={2} class="taskButton">выбрать правильный вариант ответа</button>
-          <button handleClick={(e)=>this.test(e)} id={3} class="taskButton">правда/ложь</button>
-          <button handleClick={(e)=>this.test(e)} id={4} class="taskButton">расставить заголвки</button>
+          <button onClick={(e)=>this.test(e)} id={2} class="taskButton">выбрать правильный вариант ответа</button>
+          <button onClick={(e)=>this.test(e)} id={3} class="taskButton">правда/ложь</button>
+          <button onClick={(e)=>this.test(e)} id={4} class="taskButton">расставить заголвки</button>
        </div>
       </div>
    );