<commit_before>import React from 'react'
import { withTracker } from 'meteor/react-meteor-data'
import { compose, withState, withHandlers } from 'recompact'
import { ReactiveVar } from 'meteor/reactive-var'
import _ from 'lodash'

import styled from 'styled-components'
import { withCampaignData, withCampaignId } from '../data/campaign'
import { CampaignSplash } from '../visual/splash'
import Title from '../utils/title'
import CardList from '../collection/card-list'

import {
	SplashToolbar,
	MenuItem,
	MenuLink,
	Space,
	Center,
	MenuButton
} from '../visual/menu'
import Icon from '../visual/icon'
import { Input } from '../visual/form'
import HistoryList from '../collection/card-history'
import { Main, Aside } from '../visual/grid'
import { Card } from '../../shared/methods'
import { go } from '../utils/router'

const searchVar = new ReactiveVar('')
const debouncedSetSearch = _.debounce(searchVar.set.bind(searchVar), 300)

const withCampaignSearch = withTracker(() => ({
	search: searchVar.get(),
	setSearch: debouncedSetSearch
}))

const withSearchState = withState('search', 'setSearch', '')
const withCreateCardHandler = withHandlers({
	createCard: ({ search, onChange, campaignId }) => async () => {
		const { _id } = await Card.create({ title: search, campaignId })
		onChange('')
		go(`/${campaignId}/${_id}`)
	}
})

const withKeydownHandler = withHandlers({
	keydown: ({ createCard }) => event => {
		// ⌘↩︎ or Ctrl+Enter
		if (event.which === 13 && (event.ctrlKey || event.metaKey)) {
			createCard()
		}
	}
})

const connectSearch = compose(
	withCampaignId,
	withSearchState,
	withCreateCardHandler,
	withKeydownHandler
)

const Shortcut = styled.span`
	font-size: 0.7em;
	opacity: 0.5;
	border-width: 1px;
	border-style: solid;
	border-radius: 2px;
	padding: 0.25em;
	margin-right: 0.5em;
`

const Search = connectSearch(
	({ search, setSearch, onChange, createCard, keydown }) => (
	<>
		<MenuItem flush>
			<Input
				type='search'
				placeholder='Search&hellip;'
				value={search}
				onChange={ev => {
					setSearch(ev.target.value)
					onChange(ev.target.value)
				}}
					onKeyDown={keydown}
			/>
		</MenuItem>
		{search && (
			<MenuButton onClick={createCard}>
					<Shortcut>
						{navigator.platform === 'MacIntel' ? '⌘↩︎' : 'Ctrl + Enter'}
					</Shortcut>
				Quick add&hellip;
			</MenuButton>
		)}
	</>
	)
)

const connectCampaignPage = compose(
	withCampaignData,<commit_msg>doesn't really need the ellipsis<commit_after>import React from 'react'
import { withTracker } from 'meteor/react-meteor-data'
import { compose, withState, withHandlers } from 'recompact'
import { ReactiveVar } from 'meteor/reactive-var'
import _ from 'lodash'

import styled from 'styled-components'
import { withCampaignData, withCampaignId } from '../data/campaign'
import { CampaignSplash } from '../visual/splash'
import Title from '../utils/title'
import CardList from '../collection/card-list'

import {
	SplashToolbar,
	MenuItem,
	MenuLink,
	Space,
	Center,
	MenuButton
} from '../visual/menu'
import Icon from '../visual/icon'
import { Input } from '../visual/form'
import HistoryList from '../collection/card-history'
import { Main, Aside } from '../visual/grid'
import { Card } from '../../shared/methods'
import { go } from '../utils/router'

const searchVar = new ReactiveVar('')
const debouncedSetSearch = _.debounce(searchVar.set.bind(searchVar), 300)

const withCampaignSearch = withTracker(() => ({
	search: searchVar.get(),
	setSearch: debouncedSetSearch
}))

const withSearchState = withState('search', 'setSearch', '')
const withCreateCardHandler = withHandlers({
	createCard: ({ search, onChange, campaignId }) => async () => {
		const { _id } = await Card.create({ title: search, campaignId })
		onChange('')
		go(`/${campaignId}/${_id}`)
	}
})

const withKeydownHandler = withHandlers({
	keydown: ({ createCard }) => event => {
		// ⌘↩︎ or Ctrl+Enter
		if (event.which === 13 && (event.ctrlKey || event.metaKey)) {
			createCard()
		}
	}
})

const connectSearch = compose(
	withCampaignId,
	withSearchState,
	withCreateCardHandler,
	withKeydownHandler
)

const Shortcut = styled.span`
	font-size: 0.7em;
	opacity: 0.5;
	border-width: 1px;
	border-style: solid;
	border-radius: 2px;
	padding: 0.25em;
	margin-right: 0.5em;
`

const Search = connectSearch(
	({ search, setSearch, onChange, createCard, keydown }) => (
		<>
			<MenuItem flush>
				<Input
					type='search'
					placeholder='Search&hellip;'
					value={search}
					onChange={ev => {
						setSearch(ev.target.value)
						onChange(ev.target.value)
					}}
					onKeyDown={keydown}
				/>
			</MenuItem>
			{search && (
				<MenuButton onClick={createCard}>
					<Shortcut>
						{navigator.platform === 'MacIntel' ? '⌘↩︎' : 'Ctrl + Enter'}
					</Shortcut>
					Quick add
				</MenuButton>
			)}
		</>
	)
)

const connectCampaignPage = compose(
	withCampaignData,
{'fraction_non_alphanumeric': 0.15616663246460086, 'fraction_numerical': 0.0065667966345167245, 'mean_word_length': 3.9381965552178317, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '887919', 'n_tokens_mistral': 1810, 'n_tokens_neox': 1617, 'n_words': 377}