export default () => ({
  isLoading: true,
  addedLines: null,
  removedLines: null,
  endpoint: '',
  basePath: '',
  commit: null,
  startVersion: null,
  diffFiles: [],
  mergeRequestDiffs: [],
  mergeRequestDiff: null,
  diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
  tree: [],
  treeEntries: {},
  showTreeList: true,
  currentDiffFileId: '',
  projectPath: '',
  commentForms: [],
  highlightedRow: null,
  renderTreeList: true,
  showWhitespace: true,
  fileFinderVisible: false,
  dismissEndpoint: '',
  showSuggestPopover: true,
});

const el = document.getElementById('js-design-management');
const { issueIid, projectPath } = el.dataset;

apolloProvider.clients.defaultClient.cache.writeData({
  data: {
    projectPath,
    issueIid,
  },
});

query projectFullPath {
  projectPath
  issueIid
}

query projectFullPath @client {
  projectPath
  issueIid
}

export const getCurrentDesign = state => designId =>
  state.designs.find(design => design.id === designId);

query getDesign($id: String!) {
  design(id: $id) @client {
    ...DesignListItem
  }
}

Query: {
  design(ctx, { id }, { cache, client }) {
    return client
      .query({
      query: projectQuery,
    })
      .then(({ data }) => {
      const edge = data.project.issue.designs.designs.edges.find(
        ({ node }) => node.filename === id,
      );
      return edge.node;
    })
  },
},

export const toggleFileFinder = ({ commit }, visible) => {
  commit(types.TOGGLE_FILE_FINDER_VISIBLE, visible);
};

...

[types.TOGGLE_FILE_FINDER_VISIBLE](state, visible) {
  state.fileFinderVisible = visible;
},

mutation toggleFileFinder($visible: Boolean!) {
  toggleFileFinder($visible: Boolean!) @client
}

Mutation: {
  checkItem: (_, { visible }, { cache }) => {
    const data = cache.readQuery({ query: fileFinder });
    data.fileFinder.visible = visible;
    cache.writeQuery({ query: fileFinder, data });
  },