Commit 82fa7252 authored by Kevin Wu's avatar Kevin Wu

Remove Apollo

parent 69821ba7
......@@ -5,14 +5,6 @@ import WorkspaceSelector from "Common/js/components/WorkspaceSelector";
import MESSAGES from "./Messages";
import ApolloClient from "apollo-boost";
const apolloClient = new ApolloClient({
uri: "http://localhost:3000/graphql",
});
import { ApolloProvider, Query, Mutation } from "react-apollo";
import gql from "graphql-tag";
const DOMAIN = require("../../../secrets.json")["domain"];
class Popup extends Component {
......@@ -52,11 +44,7 @@ class Popup extends Component {
bodyComponent = <Login />;
break;
case true:
bodyComponent = (
<ApolloProvider client={apolloClient}>
<WorkspaceSelector />
</ApolloProvider>
);
bodyComponent = <WorkspaceSelector />;
break;
}
......
import React, { Component } from "react";
import { Mutation } from "react-apollo";
import { request } from "graphql-request";
import Button from "Common/js/components/Button";
import { Creatable as CreatableSelect } from "react-select";
......
This diff is collapsed.
import React, { Component } from "react";
import { request } from "graphql-request";
import gql from "graphql-tag";
import { call } from "Common/js/call";
import { Query } from "react-apollo";
const ENDPOINT = require("../../../secrets.json")["domain"] + "/graphql";
const TIMELINE_FETCH = gql`
const TIMELINE_QUERY = `
query {
viewer {
steps {
......@@ -34,155 +35,181 @@ const TIMELINE_FETCH = gql`
}
`;
const Timeline = ({}) => (
<Query query={TIMELINE_FETCH}>
{({ loading, error, data: { viewer: { steps: stepArr } = {} } = {} }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>{error.toString()}</p>;
console.log(stepArr);
// index steps by step ID
const stepsById = stepArr.reduce((acc, step) => {
acc[step.id] = step;
return acc;
}, {});
const branchHeads = stepArr.filter(
({ predecessor }) => predecessor === null,
);
const branchTails = {};
const branchesAsArrays = branchHeads.reduce((acc, branchHead) => {
acc[branchHead.id] = stepArr
.filter(step => {
return step.branch.id === branchHead.id;
})
.sort(({ timestamp: a }, { timestamp: b }) => {
return a < b;
});
branchTails[branchHead.branch.id] =
acc[branchHead.id][acc[branchHead.id].length - 1];
return acc;
}, {});
let branchLevel = -1;
const findBranchLevels = branchId => {
branchLevel += 1;
// set all steps in this branch to the same level *before* recursing into other branches
branchesAsArrays[branchId].forEach(step => {
if (!step.levels) {
step.levels = [];
}
step.nodeLevel = branchLevel;
step.levels[branchLevel] = "node";
class Timeline extends Component {
constructor(props) {
super(props);
this.state = {
ready: false,
error: false,
};
(async () => {
const [result, err] = await call(request(ENDPOINT, TIMELINE_QUERY));
if (err) {
this.setState({
error: true,
});
}
let step = stepsById[branchTails[branchId].id];
while (step) {
step.children.reverse().forEach(({ id: childId }) => {
findBranchLevels(stepsById[childId].branch.id);
});
console.log(result);
if (step.predecessor) {
step = stepsById[step.predecessor.id];
} else {
break;
}
}
};
this.setState({
steps: result.viewer.steps,
ready: true,
});
})();
}
render() {
if(!this.state.ready) {
return <p>Loading...</p>
}
if(this.state.error) {
return <p>Error</p>
}
const stepArr = this.state.steps;
console.log(stepArr);
// index steps by step ID
const stepsById = stepArr.reduce((acc, step) => {
acc[step.id] = step;
return acc;
}, {});
branchHeads
.filter(({ parent }) => parent === null)
.map(({ id }) => id)
.forEach(branchId => {
findBranchLevels(branchId);
const branchHeads = stepArr.filter(
({ predecessor }) => predecessor === null,
);
const branchTails = {};
const branchesAsArrays = branchHeads.reduce((acc, branchHead) => {
acc[branchHead.id] = stepArr
.filter(step => {
return step.branch.id === branchHead.id;
})
.sort(({ timestamp: a }, { timestamp: b }) => {
return a < b;
});
const continueBranchBetween = (startTimestamp, endTimestamp, level) => {
stepArr
.filter(
step =>
step.timestamp > startTimestamp && step.timestamp < endTimestamp,
)
.forEach(step => {
step.levels[level] = "continue";
});
};
// determine at which levels branch forks (L- and T- beams) are needed
stepArr.forEach(step => {
step.children.forEach(({ id: childId }) => {
const child = stepsById[childId];
step.levels[child.nodeLevel] = "branch";
continueBranchBetween(
step.timestamp,
child.timestamp,
child.nodeLevel,
);
branchTails[branchHead.branch.id] =
acc[branchHead.id][acc[branchHead.id].length - 1];
return acc;
}, {});
let branchLevel = -1;
const findBranchLevels = branchId => {
branchLevel += 1;
// set all steps in this branch to the same level *before* recursing into other branches
branchesAsArrays[branchId].forEach(step => {
if (!step.levels) {
step.levels = [];
}
step.nodeLevel = branchLevel;
step.levels[branchLevel] = "node";
});
let step = stepsById[branchTails[branchId].id];
while (step) {
step.children.reverse().forEach(({ id: childId }) => {
findBranchLevels(stepsById[childId].branch.id);
});
if (step.predecessor) {
step = stepsById[step.predecessor.id];
} else {
break;
}
}
};
branchHeads
.filter(({ parent }) => parent === null)
.map(({ id }) => id)
.forEach(branchId => {
findBranchLevels(branchId);
});
Object.keys(branchesAsArrays).forEach(branchId => {
branchesAsArrays[branchId].forEach(step => {
if (step.successor !== null) {
continueBranchBetween(
step.timestamp,
step.successor.timestamp,
step.nodeLevel,
);
}
const continueBranchBetween = (startTimestamp, endTimestamp, level) => {
stepArr
.filter(
step =>
step.timestamp > startTimestamp && step.timestamp < endTimestamp,
)
.forEach(step => {
step.levels[level] = "continue";
});
};
// determine at which levels branch forks (L- and T- beams) are needed
stepArr.forEach(step => {
step.children.forEach(({ id: childId }) => {
const child = stepsById[childId];
step.levels[child.nodeLevel] = "branch";
continueBranchBetween(step.timestamp, child.timestamp, child.nodeLevel);
});
});
// fill empty elements in arrays. I hate this
stepArr.forEach(step => {
if (!step.levels.includes("node")) {
// TODO proper error handling for this situation
console.log("Step does not contain a node!");
console.log(step);
return;
Object.keys(branchesAsArrays).forEach(branchId => {
branchesAsArrays[branchId].forEach(step => {
if (step.successor !== null) {
continueBranchBetween(
step.timestamp,
step.successor.timestamp,
step.nodeLevel,
);
}
});
});
// fill empty elements in arrays. I hate this
stepArr.forEach(step => {
if (!step.levels.includes("node")) {
// TODO proper error handling for this situation
console.log("Step does not contain a node!");
console.log(step);
return;
}
let i = 0;
// can't use forEach (or other array functions) because they skip over undefined entries. >:(
let i = 0;
// can't use forEach (or other array functions) because they skip over undefined entries. >:(
while (step.levels[i] !== "node") {
if (!step.levels[i]) {
step.levels[i] = "empty";
}
i += 1;
while (step.levels[i] !== "node") {
if (!step.levels[i]) {
step.levels[i] = "empty";
}
i += 1;
}
const hasBranchAfterNode = step.levels.includes("branch");
for (let i = step.nodeLevel; i < step.levels.length - 1; i += 1) {
if (!step.levels[i]) {
if (hasBranchAfterNode) {
step.levels[i] = "dash";
} else {
step.levels[i] = "empty";
}
const hasBranchAfterNode = step.levels.includes("branch");
for (let i = step.nodeLevel; i < step.levels.length - 1; i += 1) {
if (!step.levels[i]) {
if (hasBranchAfterNode) {
step.levels[i] = "dash";
} else {
step.levels[i] = "empty";
}
}
});
}
});
// const flattenedSteps = stepArr.sort((a, b) => (a.timestamp > b.timestamp) ? -1 : 1);
const flattenedSteps = stepArr.reverse();
return (
<div className="timeline">
<h1>Timeline</h1>
<div className="timeline-grid">
{flattenedSteps.map(step => (
<TimelineStep {...step} key={step.id} />
))}
</div>
// const flattenedSteps = stepArr.sort((a, b) => (a.timestamp > b.timestamp) ? -1 : 1);
const flattenedSteps = stepArr.reverse();
return (
<div className="timeline">
<h1>Timeline</h1>
<div className="timeline-grid">
{flattenedSteps.map(step => (
<TimelineStep {...step} key={step.id} />
))}
</div>
);
}}
</Query>
);
</div>
);
}
}
class TimelineStep extends Component {
render() {
......
......@@ -3,17 +3,8 @@ import "../scss/main.scss";
import React, { Component } from "react";
import { render } from "react-dom";
import ApolloClient from "apollo-boost";
const apolloClient = new ApolloClient({
uri: require("../../../secrets.json").domain + "/graphql",
});
import Timeline from "./Timeline";
import { ApolloProvider, Query } from "react-apollo";
import gql from "graphql-tag";
import { get, post } from "Common/js/call";
const CHROME_EXT = Boolean(chrome.runtime);
......@@ -61,11 +52,9 @@ class App extends Component {
break;
case true:
bodyComponent = (
<ApolloProvider client={apolloClient}>
<div id="app">
<Timeline />
</div>
</ApolloProvider>
<div id="app">
<Timeline />
</div>
);
break;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment