**Contributors**
51 |
52 |
53 | [Anthony Cruz](linkedin.com/in/anthonycruz2) [@anthonycruz1](https://github.com/anthonycruz1)
54 |
55 | [Les C.](linkedin.com/in/leschae) [@lesc999](https://github.com/lesc999)
56 |
57 | [Rob Caporino](https://www.linkedin.com/in/rob-a-caporino/) [@rcaporino](https://github.com/rcaporino)
58 |
59 | [David Nadler](https://www.linkedin.com/in/davenads/) [@davenads](https://github.com/Davenads)
60 |
61 |
62 |
--------------------------------------------------------------------------------
/__tests__/__config__/jest.setup.js:
--------------------------------------------------------------------------------
1 | const Enzyme = require('enzyme');
2 | const Adapter = require('enzyme-adapter-react-16');
3 |
4 | Enzyme.configure({ adapter: new Adapter() });
5 |
--------------------------------------------------------------------------------
/__tests__/components/Input.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Input from '../../client/components/Input.jsx';
3 | import { shallow } from 'enzyme';
4 |
5 | describe('...', () => {
6 | const inputComponent = shallow();
7 | it('...renders div element as the container', () => {
8 | expect(inputComponent.type()).toBe('div');
9 | });
10 | it('...div has class "input-container-outer"', () => {
11 | expect(inputComponent.hasClass('input-container-outer')).toBeTruthy();
12 | });
13 | it('...renders React component ', () => {
14 | expect(inputComponent.text()).toBe('');
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/__tests__/unit/autoQuery.test.js:
--------------------------------------------------------------------------------
1 | import Input from '../../client/components/Input';
2 |
3 | const autoQuery = require('../../helpers/autoQuery');
4 |
5 | test('autoQuery() returns error if array is not passed.', () => {
6 | expect(autoQuery(7)).toEqual('');
7 | });
8 | test('autoQuery() returns string representing a query when an array is passed', () => {
9 | expect(autoQuery(['parent', 'child'])).toEqual(
10 | '{\n parent{\n child\n }\n}'
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/__tests__/unit/checkObject.test.js:
--------------------------------------------------------------------------------
1 | const validateObject = require('../../helpers/validateObject');
2 |
3 | test('validateObject() returns error if array is passed.', () => {
4 | expect(validateObject([])).toBeFalsy();
5 | });
6 | test('validateObject() returns error if number is passed.', () => {
7 | expect(validateObject(7)).toBeFalsy();
8 | });
9 | test('validateObject() returns error if string is passed.', () => {
10 | expect(validateObject('test')).toBeFalsy();
11 | });
12 | test('validateObject() returns error if map is passed.', () => {
13 | expect(validateObject(new Map())).toBeFalsy();
14 | });
15 | test('validateObject() returns error if set is passed.', () => {
16 | expect(validateObject(new Set())).toBeFalsy();
17 | });
18 | test('validateObject() returns true if empty object is passed.', () => {
19 | expect(validateObject({})).toBeTruthy();
20 | });
21 | test('validateObject() returns true if object is passed.', () => {
22 | expect(validateObject({ a: 1, b: 2, c: 3 })).toBeTruthy();
23 | });
24 |
--------------------------------------------------------------------------------
/__tests__/unit/createTree.test.js:
--------------------------------------------------------------------------------
1 | const createTree = require('../../helpers/createTree');
2 |
3 | test('createTree() returns custom error object when number is passed.', () => {
4 | expect(createTree(7)).toStrictEqual({
5 | error: 'Sorry, something went wrong',
6 | });
7 | });
8 | test('createTree() returns custom error object when string is passed.', () => {
9 | expect(createTree('string')).toStrictEqual({
10 | error: 'Sorry, something went wrong',
11 | });
12 | });
13 | test('createTree() returns custom error object when array is passed.', () => {
14 | expect(createTree([])).toStrictEqual({
15 | error: 'Sorry, something went wrong',
16 | });
17 | });
18 | test('createTree() returns custom error object when non-schema object is passed.', () => {
19 | expect(createTree({})).toStrictEqual({
20 | error: 'Sorry, something went wrong',
21 | });
22 | });
23 | test('createTree() returns custom error object when schema._queryType.name does not exist.', () => {
24 | expect(
25 | createTree({ _queryType: { testProperty: 'this is not a name' } })
26 | ).toStrictEqual({
27 | error: 'Sorry, something went wrong',
28 | });
29 | });
30 | test('createTree() returns custom error object when schema._queryType.name is not a string.', () => {
31 | expect(createTree({ _queryType: { name: 7 } })).toStrictEqual({
32 | error: 'Sorry, something went wrong',
33 | });
34 | });
35 | test('createTree() returns custom error object when schema._queryType.fields does not exist.', () => {
36 | expect(createTree({ _queryType: 'test' })).toStrictEqual({
37 | error: 'Sorry, something went wrong',
38 | });
39 | });
40 |
41 | test('createTree() returns tree object when schema object is passed.', () => {
42 | expect(
43 | createTree({
44 | _queryType: { name: 'Test Schema', _fields: {} },
45 | })
46 | ).toStrictEqual({
47 | name: 'Test Schema',
48 | children: [],
49 | toggled: true,
50 | });
51 | });
52 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | // needed for tests to run
2 | module.exports = {
3 | presets: [
4 | ['@babel/preset-env', { targets: { node: 'current' } }],
5 | '@babel/preset-react',
6 | ],
7 | };
8 |
--------------------------------------------------------------------------------
/client/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { getIntrospectionQuery, buildClientSchema } from 'graphql';
3 | import Output from './components/Output';
4 | import TopBar from './components/TopBar';
5 | import Input from './components/Input';
6 | import 'codemirror/lib/codemirror.css';
7 | import 'codemirror/theme/nord.css';
8 | import 'codemirror/addon/hint/show-hint.css';
9 | import 'codemirror/addon/hint/show-hint';
10 | import 'codemirror/addon/lint/lint';
11 | import 'codemirror/addon/edit/matchbrackets.js';
12 | import 'codemirror/addon/edit/closebrackets.js';
13 | import 'codemirror/addon/fold/foldgutter';
14 | import 'codemirror/addon/fold/brace-fold';
15 | import 'codemirror/addon/fold/foldgutter.css';
16 | import 'codemirror-graphql/hint';
17 | import 'codemirror-graphql/lint';
18 | import 'codemirror-graphql/mode';
19 | import 'codemirror/mode/javascript/javascript';
20 | import 'codemirror/addon/scroll/simplescrollbars.css';
21 | import 'codemirror/addon/scroll/simplescrollbars';
22 | import 'codemirror-graphql/results/mode';
23 | import Tree from './components/Tree.jsx';
24 | import createTree from '../helpers/createTree.js';
25 | export default function App(props) {
26 | const { theme, endpoint } = props;
27 | const [editor, setEditor] = useState('');
28 | const [input, setInput] = useState(
29 | localStorage.getItem('PractiQL') || ''
30 | );
31 | const [myTheme, setMyTheme] = useState(theme);
32 | const [querySubjects, setQuerySubjects] = useState([]);
33 | const [results, setResults] = useState(false);
34 | const [schema, setSchema] = useState('');
35 | const [selection, setSelection] = useState('');
36 | const [sideBarWidth, setSideBarWidth] = useState({
37 | width: '0rem',
38 | padding: '0.5rem 0',
39 | });
40 | const [stateEndpoint, setStateEndpoint] = useState(endpoint);
41 | const [treeObj, setTreeObj] = useState({});
42 |
43 | // Sends introspection query to endpoint and sets results as schema
44 | useEffect(() => {
45 | fetch(stateEndpoint, {
46 | method: 'POST',
47 | headers: {
48 | Accept: 'application/json',
49 | 'Content-Type': 'application/json',
50 | },
51 | body: JSON.stringify({
52 | query: getIntrospectionQuery(),
53 | }),
54 | })
55 | .then((res) => res.json())
56 | .then((schemaJSON) => {
57 | setSchema(buildClientSchema(schemaJSON.data));
58 | });
59 | }, [stateEndpoint]);
60 |
61 | // Uses schema to build tree
62 | useEffect(() => {
63 | if (schema) {
64 | setTreeObj(createTree(schema));
65 | }
66 | }, [schema]);
67 |
68 | // Sets new endpoints
69 | const handleBtnClick = (newEndpoint) => {
70 | // Sets new endpoint
71 | setStateEndpoint(newEndpoint);
72 | setQuerySubjects([]);
73 | // if sidebar is open, closes sidebar and removes tree from state
74 | if (sideBarWidth.width !== '0rem') {
75 | handleCloseSideBar();
76 | }
77 | };
78 |
79 | // Generates autoQueries
80 | const handleAutoQuery = (query) => {
81 | // If current input is empty, return query, else return query one line under current input
82 | const newInput = input === '' ? query : input + '\n' + query;
83 | setInput(newInput);
84 | };
85 |
86 | // Constructs new tree diagram and opens side bar
87 | const handleSchemaRequest = () => {
88 | const widthToSet = sideBarWidth.width === '0rem' ? '20rem' : '0rem';
89 | const paddingToSet =
90 | sideBarWidth.padding === '0.5rem 0' ? '0.5rem' : '0.5rem 0';
91 | setSideBarWidth({ width: widthToSet, padding: paddingToSet });
92 | setTreeObj(createTree(schema));
93 | };
94 |
95 | // Close sidebar
96 | const handleCloseSideBar = () => {
97 | setSideBarWidth({ width: '0rem', padding: '0.5rem 0' });
98 | setTreeObj({});
99 | // closes bottom bar
100 | const bottomBar = document.getElementById('bottom-bar');
101 | bottomBar.style.height = '0';
102 | bottomBar.style.padding = '1rem 0.75rem 0 0.75rem';
103 | };
104 |
105 | // Sets new editor for keyboard shortcuts
106 | const setNewEditor = (newEditor) => {
107 | setEditor(newEditor);
108 | };
109 |
110 | // Expands bottom bar when mouse enters
111 | const handleBottomBarExpand = () => {
112 | const bottomBar = document.getElementById('bottom-bar');
113 | bottomBar.style.removeProperty = 'height';
114 | bottomBar.style.padding = '1rem 0.75rem 2rem 0.75rem';
115 | };
116 |
117 | // Collapses bottom bar when mouse leaves and if side bar is not open
118 | const handleBottomBarCollapse = () => {
119 | // if sidebar is open, bottom bar stays expanded
120 | if (sideBarWidth.width !== '0rem') return;
121 | const bottomBar = document.getElementById('bottom-bar');
122 | bottomBar.style.height = '0';
123 | bottomBar.style.padding = '1rem 0.75rem 0 0.75rem';
124 | };
125 |
126 | // Save queries in the LocalStorage
127 | const handleSnapshot = () => {
128 | //LocalStorage
129 | localStorage.setItem('PractiQL', input.trim());
130 | };
131 |
132 | return (
133 |
134 |
135 |
136 |
145 |
146 |
147 |
148 |
157 |
163 |
164 | 🜉
165 |
166 |
170 | Schema
171 |
172 |
173 | Docs
174 |
175 |
179 | Save Snapshot
180 |
181 |
182 |
183 |
184 |
185 |
191 |
192 |
193 |
194 |
195 |
196 | X
197 |
198 |
199 |
Schema
200 |
201 |
202 |
203 |
204 |
205 |
206 |
34 | {
40 | handleSelection(editor.getSelection());
41 | }}
42 | editorDidMount={(editor) => {
43 | editor.display.wrapper.className =
44 | editor.display.wrapper.className + ' input-instance';
45 | props.setNewEditor(editor);
46 | }}
47 | options={{
48 | foldGutter: true,
49 | gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
50 | matchBrackets: true,
51 | autoCloseBrackets: true,
52 | lineWrapping: true,
53 | indentUnit: 2,
54 | tabSize: 2,
55 | //currently is not linting need to look into it, might need options
56 | mode: 'graphql',
57 | // lint: {
58 | // schema: schema,
59 | // },
60 | showHint: true,
61 | hintOptions: {
62 | schema: schema,
63 | },
64 | lineNumbers: true,
65 | theme: theme,
66 | extraKeys: { 'Ctrl-Space': 'autocomplete' },
67 | }}
68 | />
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/client/components/Output.jsx:
--------------------------------------------------------------------------------
1 | import CodeMirror, { overlayMode } from 'codemirror';
2 | import React, { useState, useEffect, useCallback } from 'react';
3 | import { Controlled as ControlledEditor } from 'react-codemirror2';
4 |
5 | export default function Output(props) {
6 | const [editorToGrab, setEditor] = useState(null);
7 | const [value, setValue] = useState('');
8 | const {
9 | displayName,
10 | language,
11 | results,
12 | onChange,
13 | theme,
14 | numOfQueries,
15 | } = props;
16 |
17 | useEffect(() => {
18 | // Returns results folded
19 | // How: copies the results into a headless CodeMirror instance. This headless instance is used to count lines and identify where to fold code
20 | // If only one query was sent, won't collapse code. Returns code expanded.
21 | if (results && Object.keys(results).length === 1) return;
22 |
23 | if (editorToGrab) {
24 | let count = 1;
25 | let lastLine = 0;
26 | for (let key in results) {
27 | let instance = new CodeMirror(document.createElement('div'), {
28 | value: JSON.stringify(results[key], null, 2),
29 | });
30 |
31 | if (count === 1) {
32 | editorToGrab.foldCode(1);
33 | } else {
34 | editorToGrab.foldCode(lastLine + 1);
35 | }
36 | count++;
37 | lastLine += instance.lineCount();
38 | }
39 | }
40 | }, [results]);
41 |
42 | return (
43 | <>
44 | {
49 | setEditor(editor);
50 | }}
51 | on
52 | options={{
53 | mode: 'javascript',
54 | foldGutter: true,
55 | gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
56 | readOnly: true,
57 | lineNumbers: true,
58 | theme: theme,
59 | scrollbarStyle: null,
60 | }}
61 | >
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/client/components/TopBar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | // https://countries.trevorblades.com/
4 | export default function TopBar(props) {
5 | const { endpoint, input, selection, setResults, setQuerySubjects } = props;
6 |
7 | const handleClick = () => {
8 | //LocalStorage
9 | localStorage.setItem('PractiQL', input.trim());
10 |
11 | const sel = selection ? selection.trim() : input.trim();
12 |
13 | const isMutation = sel.includes('mutation');
14 |
15 | let myQuery;
16 | if (isMutation) {
17 | myQuery = 'mutation {\r\n';
18 | } else {
19 | myQuery = 'query myquery {\r\n';
20 | }
21 | const arrItems = matchRecursiveRegExp(sel, '{', '}');
22 |
23 | let querySubjects = [];
24 |
25 |
26 | for (let i = 0; i < arrItems.length; i++) {
27 | const x = arrItems[i];
28 | // IS THIS A MERGED QUERY?
29 | if (x.includes(',')) {
30 | const items = x.split(',');
31 |
32 | for (let i = 0; i < items.length; i++) {
33 | // DOES THIS item HAVE AN ALIAS?
34 | if (items[i].includes(':')) {
35 | querySubjects.push(
36 | items[i].substring(0, items[i].indexOf(':')).trim()
37 | );
38 |
39 | myQuery += items[i] + (i < items.length - 1 ? ',\r\n' : '\r\n');
40 | } else {
41 | // ADD ALIAS TO RETURN MULTIPLE RESULTSETS
42 | const alias =
43 | items[i].substring(0, items[i].indexOf('{')).trim() +
44 | '_' +
45 | i.toString();
46 | querySubjects.push(alias);
47 |
48 | myQuery +=
49 | alias +
50 | ' : ' +
51 | items[i] +
52 | (i < items.length - 1 ? ',\r\n' : '\r\n');
53 | }
54 | }
55 | } else {
56 | // DOES THIS item HAVE AN ALIAS?
57 | let test = x.substring(0, x.indexOf(':')).trim();
58 | if (test.indexOf('(') > 0) {
59 | if (x.trimStart().startsWith('__')) {
60 | querySubjects.push(x.substring(0, x.indexOf('{')).trim());
61 | } else {
62 | querySubjects.push(x.substring(0, x.indexOf('(')).trim());
63 | }
64 | myQuery += arrItems[i].trim();
65 | } else {
66 | let alias;
67 | const query = x.substring(0, x.indexOf('{')).trim();
68 | const repeat = querySubjects.includes(query);
69 | if (repeat) {
70 | // CREATE AN ALIAS
71 | alias = query + '_' + i.toString();
72 | }
73 |
74 | querySubjects.push(repeat ? alias : query);
75 | myQuery +=
76 | (repeat ? alias + ' : ' : '') +
77 | arrItems[i].trim() +
78 | (i < arrItems.length - 1 ? ',\r\n' : '\r\n');
79 | }
80 | }
81 | }
82 |
83 | myQuery += '}';
84 |
85 | fetch(endpoint, {
86 | method: 'POST',
87 | headers: { 'Content-Type': 'application/json' },
88 | body: JSON.stringify({
89 | query: myQuery,
90 | }),
91 | })
92 | .then((res) => res.json())
93 | .then((data) => {
94 | if (data.errors) {
95 | setResults(data.errors);
96 | return;
97 | }
98 |
99 | // SET STATE - results
100 | setResults(data.data);
101 | setQuerySubjects(querySubjects);
102 | })
103 | .catch((err) => {
104 | console.log(err);
105 | });
106 | };
107 |
108 | function matchRecursiveRegExp(str, left, right) {
109 | const x = new RegExp(left + '|' + right, 'g');
110 | const l = new RegExp(left);
111 | let a = [];
112 | let t, s, m;
113 |
114 | t = 0;
115 |
116 | while ((m = x.exec(str))) {
117 | if (l.test(m[0])) {
118 | if (!t++) {
119 | s = x.lastIndex;
120 | }
121 | } else if (t) {
122 | if (!--t) {
123 | a.push(str.slice(s, m.index));
124 | }
125 | }
126 | }
127 | return a;
128 | }
129 |
130 | function handleBtnClick() {
131 | // passes value of input to props.handleBtnClick
132 | const inputValue = document.getElementById('endpoint-input').value;
133 | props.handleBtnClick(inputValue);
134 |
135 | let count = 6;
136 | let toggle = false;
137 | const color = inputValue ? '#a9d0c6' : 'red';
138 |
139 | const intervalID = setInterval(() => {
140 | const endpointIcon = document.getElementById('endpoint-input-icon');
141 | if (!toggle) endpointIcon.style.color = color;
142 | else endpointIcon.style.color = 'gray';
143 | toggle = !toggle;
144 | count--;
145 | if (count === 0) clearInterval(intervalID);
146 | }, 175);
147 | }
148 |
149 | // Sets keyboard shortcut for sending queries
150 | if (props.editor !== '') {
151 | const editor = props.editor;
152 | const keyMap = {
153 | 'Ctrl-Enter': handleClick,
154 | };
155 | editor.addKeyMap(keyMap);
156 | }
157 |
158 | // Sets enter shortcut for endpoint input
159 | function handleChange(e) {
160 | if (e.charCode === 13) handleBtnClick();
161 | }
162 | return (
163 |
164 | {/*
PractiQL */}
165 |
166 |
172 |
175 |
176 |
181 | ↻
182 |
183 |
190 |
191 |
37 |
onMouseOver(props.node)} onMouseLeave={() => onMouseLeave(props.node)}>
38 | {`${props.node.name} `}
39 |
40 |
6 | 
7 | 
8 | 
2 |
3 | #
4 |