evgen-app/evgen-app-front-template
1
0
Fork 0
mirror of https://github.com/evgen-app/evgen-app-front-template.git synced 2024-11-25 00:33:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

add a EvgenApp.Docs

Browse Source
This commit is contained in:
Firesieht 2021-06-05 00:19:02 +03:00
parent 4254ea6daa
commit e8e76857dd
7 changed files with 310 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
graphql.schema.json
View File

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

23
regSchema.graphql
View File

@ -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
}
}
}

114
src/generated/graphql.tsx
View File

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

56
src/screens/BaseScreen/BaseScreen.tsx
View File

@ -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>

27
src/uiKit/Documents/Document/Document.tsx
View File

@ -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>

17
src/uiKit/Documents/DocumentCard/DocumentCard.tsx
View File

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

6
src/uiKit/Documents/TextEditor/TextEditor.jsx
View File

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