add a EvgenApp.Docs

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": {

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, $name:String, $state:String){
-mutation UpdateDoc($id:ID, $content:String){
+  updateDoc(content:$content, id:$id, name:$name, state:$state){
-  updateDoc(content:$content, id:$id){
+    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
+    }
   }
 }

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) {
+    mutation UpdateDoc($id: ID, $content: String, $name: String, $state: String) {
-  updateDoc(content: $content, id: $id) {
+  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 }> }> };

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 {useGetMaterialsLazyQuery, useGetMaterialsQuery} from "../../generated/graphql"
-import { Route, useRouteMatch, Switch } from "react-router";
+import { Route, useRouteMatch, Switch, useHistory } from "react-router";
-import {useUpdateDocMutation} from "../../generated/graphql"
+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 history = useHistory();
-    const {loading, data} = useGetMaterialsQuery({variables:{token:localStorage.getItem("token")}});
 
-    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
+                        content={materials?.content == undefined? "нет":materials?.content}
-                    }></DocumentCard>
+                        name={materials?.name == undefined? "нет":materials?.name}
+                    ></DocumentCard>
                 )}
             </div>
             </Route>

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){
+    if (!data){
-        console.log("нет данных")
+        // console.log("нет данных")
-        return <Redirect to="/index"></Redirect>
+        // 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?.state!))
-    let state = convertFromRaw(JSON.parse(data.material.content))
     
     
     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>     
 
 

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>
     );
 }

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 onClick={(e)=>this.test(e)} id={2} class="taskButton">выбрать правильный вариант ответа</button>
-          <button handleClick={(e)=>this.test(e)} id={3} class="taskButton">правда/ложь</button>
+          <button onClick={(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={4} class="taskButton">расставить заголвки</button>
         </div>
        </div>
     );