\n \n
\n );\n };\n return null;\n }\n}\n","import React from 'react';\nimport ImagePreview from './ImagePreview';\n\nexport default class ImageUrlField extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n imageUrl: this.props.imageUrl || '',\n error: this.props.error || ''\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(event) {\n this.setState({ imageUrl: event.target.value });\n }\n\n displayErrorMessage(message) {\n if (message.length) {\n return \n 
\n
\n {message}
;\n };\n }\n\n render () {\n const { imageUrl, error } = this.state;\n\n return(\n\n
\n );\n }\n}\n","import React from 'react';\n\nexport default class ListItem extends React.Component {\n constructor() {\n super();\n this.clickHandler = this.clickHandler.bind(this);\n }\n\n clickHandler() {\n this.props.clickHandler(this.props.index);\n }\n\n render() {\n const { index, name } = this.props;\n\n return (\n \n \n
\n \n {name}\n Remove\n
\n )\n }\n}\n","import React from 'react';\n\nexport default class SingleInput extends React.Component {\n constructor() {\n super();\n this.state = {\n value: '',\n validInput: true\n }\n this.handleChange = this.handleChange.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.renderFormError = this.renderFormError.bind(this);\n }\n\n handleChange(e) {\n const { changeCallback, validatorCallback } = this.props;\n\n this.setState({ validInput: validatorCallback(e.target.value) });\n changeCallback(e.target.value);\n };\n\n handleClick(e) {\n e.preventDefault();\n this.props.clickCallback(this.state.value);\n }\n\n renderFormError() {\n const { inputValue } = this.props;\n const { validInput } = this.state;\n\n if (inputValue && !validInput) return (\n Invalid email\n );\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import React from 'react';\nimport ListItem from './ListItem';\nimport SingleInput from './SingleInput';\n\nexport default class InviteForm extends React.Component {\n constructor() {\n super();\n this.state = {\n emails: [],\n inputValue: ''\n };\n this.emailFormData = this.emailFormData.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleClick = this.handleClick.bind(this);\n this.renderEmailList = this.renderEmailList.bind(this);\n this.removeEmail = this.removeEmail.bind(this);\n this.validateEmail = this.validateEmail.bind(this);\n }\n\n emailFormData() {\n return this.state.emails.map((email, i) => {\n return (\n \n );\n });\n }\n\n handleChange(inputValue) {\n this.setState({ inputValue });\n }\n\n handleClick() {\n const { emails, inputValue } = this.state;\n if (inputValue.length > 0) {\n this.setState({\n emails: [...emails, inputValue],\n inputValue: ''\n });\n };\n }\n\n removeEmail(index) {\n this.setState({\n emails: this.state.emails.filter((email, i) => { return i != index })\n });\n }\n\n renderEmailList() {\n const { emails } = this.state;\n const emailList = emails.map((email, i) => {\n return \n \n {this.props.buttonValue}\n \n
\n {this.renderFormError()}\n {emailList}
;\n }\n\n renderSubmitButton() {\n return (\n \n \n
\n )\n }\n\n validateEmail(value) {\n return (\n value.match(/^([\\w.%+-]+)@([\\w-]+\\.)+([\\w]{2,})$/i) ?\n true :\n false\n );\n }\n\n render() {\n return (\n \n )\n }\n}\n","import React from 'react';\n\nexport default function MarkAsPurchased(props) {\n const { itemId, purchased } = props;\n\n const handleClick = (e) => {\n props.clickHandler();\n }\n\n const displayLinkMessage = () => {\n return purchased ? 'Purchased' : 'Mark as Purchased';\n }\n\n return (\n \n \n \n \n )\n}","import React, {Component} from 'react';\nimport axios from 'axios';\nimport MarkAsPurchased from './MarkAsPurchased';\n\nexport default class WishlistItem extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n purchased: props.item.table.purchased,\n }\n }\n \n displayWishlistItemImage = () => {\n const { image: itemImage } = this.props.item.table;\n\n return (\n itemImage ?\n \n \n
\n )\n }\n}\n","import React from 'react';\n\nexport default function AddWishlistItem(props) {\n const { userId, wishlistId } = props;\n\n return (\n \n )\n}\n","import React, {Component} from 'react';\nimport axios from 'axios';\nimport WishlistItem from './WishlistItem';\nimport AddWishlistItem from './AddWishlistItem';\n\nexport default class EditWishlistItems extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n wishlistItems: props.items,\n selectedItemIds: [],\n }\n }\n\n handleChange = (e) => {\n const { items } = this.props;\n\n if (e.target.checked) {\n this.setState({\n selectedItemIds: [...items.map(item => item.table.id)]\n })\n } else {\n this.setState({\n selectedItemIds: []\n })\n }\n }\n\n handleClick = async (e) => {\n e.preventDefault();\n\n const result = confirm('Delete these items?');\n if (!result) { return };\n\n const { authenticityToken, wishlistId } = this.props;\n const { selectedItemIds } = this.state;\n const options = {\n headers: { 'X-CSRF-Token': authenticityToken },\n data: { item_ids: selectedItemIds, wishlist_id: wishlistId }\n };\n\n const response = await axios.delete('/delete_items', options);\n const { data: { items } } = response;\n\n this.setState({ \n wishlistItems: items,\n selectedItemIds: []\n });\n }\n\n handleDeleteItemCallback = (itemId) => {\n const { wishlistItems } = this.state;\n const newWishlistItems = wishlistItems.filter(item => item.table.id != itemId)\n\n this.setState({ wishlistItems: newWishlistItems })\n }\n\n handleSelectedItemCallback = (itemId, add) => {\n if (add) {\n this.setState({\n selectedItemIds: [...this.state.selectedItemIds, itemId]\n })\n } else {\n this.setState({\n selectedItemIds: [...this.state.selectedItemIds.filter(id => id != itemId)]\n })\n }\n }\n\n displaySelectAll = () => {\n const { selectedItemIds, wishlistItems } = this.state;\n const checked = selectedItemIds.length;\n\n return (\n wishlistItems.length > 0 &&\n \n \n
\n\n { !isOwner && \n \n { isOwner && \n }\n { this.displayWishlistItemImage() }\n
\n \n\n \n ${productPrice}\n
\n \n
\n\n {vendorName}
\n {itemName}
\n {itemNotes}
\n \n
\n\n \n {`Added on ${dateAdded}`}
\n \n
}\n \n
\n )\n }\n\n displayDeleteSelectedLink = () => {\n const { selectedItemIds } = this.state;\n\n return (\n selectedItemIds.length > 0 && \n \n \n \n
\n { this.displayDeleteSelectedLink() }\n \n \n \n Delete Selected Items\n \n
\n )\n }\n\n render() {\n const { authenticityToken, isOwner, userId, wishlistId } = this.props;\n const { wishlistItems, selectedItemIds } = this.state;\n\n return (\n \n { this.displaySelectAll() }\n
\n )\n }\n}\n","import ReactOnRails from 'react-on-rails';\n\nimport ImagePreview from '../bundles/components/ImagePreview';\nimport ImageUrlField from '../bundles/components/ImageUrlField';\nimport InviteForm from '../bundles/components/InviteForm';\nimport ListItem from '../bundles/components/ListItem';\nimport MarkAsPurchased from '../bundles/components/MarkAsPurchased';\nimport SingleInput from '../bundles/components/SingleInput';\nimport WishlistItem from '../bundles/components/WishlistItem';\nimport EditWishlistItems from '../bundles/components/EditWishlistItems';\nimport ShowWishlistItems from '../bundles/components/ShowWishlistItems';\nimport AddWishlistItem from '../bundles/components/AddWishlistItem';\n\nReactOnRails.register({\n ImagePreview,\n ImageUrlField,\n InviteForm,\n ListItem,\n MarkAsPurchased,\n SingleInput,\n WishlistItem,\n EditWishlistItems,\n ShowWishlistItems,\n AddWishlistItem,\n});\n","import React from 'react';\nimport WishlistItem from './WishlistItem';\n\nexport default function ShowWishlistItems(props) {\n const { items, isOwner } = props;\n\n return (\n \n
\n \n { items.map(item =>
\n )\n}\n"],"sourceRoot":""}