\n \n
\n);\n\nEventCardSponsoredLarge.propTypes = {\n className: PropTypes.string,\n imageRight: PropTypes.bool,\n item: PropTypes.shape({\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n custom_sponsors: PropTypes.arrayOf(PropTypes.string),\n event_type: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image: PropTypes.shape({ url: PropTypes.string.isRequired }).isRequired,\n link: PropTypes.string.isRequired,\n platforms: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n url: PropTypes.string,\n })),\n start_date: PropTypes.string.isRequired,\n state: PropTypes.string,\n title: PropTypes.string.isRequired,\n user: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n itemIndex: PropTypes.number,\n overrideTracking: PropTypes.func,\n};\n\nEventCardSponsoredLarge.defaultProps = {\n className: '',\n imageRight: false,\n itemIndex: null,\n overrideTracking: null,\n};\n\nexport default EventCardSponsoredLarge;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnalyticsLink from '../../link/AnalyticsLink';\nimport DateRange from './DateRange';\nimport EventTypeOrLocation from './EventTypeOrLocation';\nimport LazyImage from '../../reusable_components/LazyImage';\nimport SponsorList from './SponsorList';\n\nimport { EVENT_CARD } from '../../../services/keen/events/linkConstants';\nimport { getDateRangeAsText } from './eventCardHelpers';\nimport { getInObj } from '../../../utility/accessors';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\nimport styles from './event_card.css';\nimport Icon from '../../icon';\n\nconst EventCardSponsoredSmall = ({ className, item, itemIndex, overrideTracking }) => (\n \n
\n \n \n
\n \n \n {item.title}\n \n
\n {!!item.summary\n && (\n \n {item.summary}\n
\n )}\n \n {getDateRangeAsText(item)}\n •\n \n Learn more\n
\n \n \n
\n);\n\nEventCardSponsoredSmall.propTypes = {\n className: PropTypes.string,\n item: PropTypes.shape({\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n custom_sponsors: PropTypes.arrayOf(PropTypes.string),\n event_type: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image: PropTypes.shape({ url: PropTypes.string.isRequired }).isRequired,\n link: PropTypes.string.isRequired,\n platforms: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n url: PropTypes.string,\n })),\n start_date: PropTypes.stringisRequired,\n state: PropTypes.string,\n title: PropTypes.string.isRequired,\n user: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n itemIndex: PropTypes.number,\n overrideTracking: PropTypes.func,\n};\n\nEventCardSponsoredSmall.defaultProps = {\n className: '',\n itemIndex: null,\n overrideTracking: null,\n};\n\nexport default EventCardSponsoredSmall;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnalyticsLink from '../../link/AnalyticsLink';\nimport EventTypeOrLocation from './EventTypeOrLocation';\n\nimport { EVENT_CARD } from '../../../services/keen/events/linkConstants';\nimport { getDateRangeAsText, getDateRangeWithYearAsText } from './eventCardHelpers';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\n\nconst EventCardText = ({ className, color, item, itemIndex, overrideTracking, showYear, size, statusBadge }) => (\n \n
\n \n \n
\n \n \n {item.title}\n \n
\n \n {getDateRangeAsText(item)}\n •\n \n Learn more\n
\n \n \n {item.title}\n \n
\n);\n\nEventCardText.propTypes = {\n className: PropTypes.string,\n color: PropTypes.string,\n item: PropTypes.shape({\n approved: PropTypes.bool.isRequired,\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n custom_sponsors: PropTypes.arrayOf(PropTypes.string),\n event_type: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image: PropTypes.shape({ url: PropTypes.string }),\n link: PropTypes.string.isRequired,\n start_date: PropTypes.string.isRequired,\n state: PropTypes.string,\n title: PropTypes.string.isRequired,\n }).isRequired,\n itemIndex: PropTypes.number,\n overrideTracking: PropTypes.func,\n showYear: PropTypes.bool,\n size: PropTypes.oneOf(['M', 'L']),\n statusBadge: PropTypes.func,\n};\n\nEventCardText.defaultProps = {\n className: '',\n color: 'charcoal',\n itemIndex: null,\n overrideTracking: null,\n showYear: false,\n size: 'M',\n statusBadge: null,\n};\n\nexport default EventCardText;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ActionsOverlay from './ActionsOverlay';\nimport BaseCardVertical from '../base_card/vertical/BaseCardVertical';\nimport EventCardText from './EventCardText';\n\nimport { EVENT_CARD } from '../../../services/keen/events/linkConstants';\n\nimport editCardStyles from '../project_edit_card/project_edit_card.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\n\nconst EventCardVertical = ({ editable, item, itemIndex, overrideTracking, redirectTo, responsive, statusBadge }) => (\n \n
\n {showYear ? getDateRangeWithYearAsText(item) : getDateRangeAsText(item)}
\n \n \n \n \n
\n);\n\nexport default DummyListCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport LazyImage from '../../reusable_components/LazyImage';\n\nimport { getProjectsCount } from '../../bookmarks/helpers';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\n\nconst ListCard = ({ list, imageURLs }) => (\n \n \n
\n);\n\nListCard.propTypes = {\n imageURLs: PropTypes.shape({\n bookmarkCoverDefault: PropTypes.shape({\n x1: PropTypes.string.isRequired,\n x2: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n list: PropTypes.shape({\n cover_image_url: PropTypes.string,\n id: PropTypes.number,\n name: PropTypes.string.isRequired,\n private: PropTypes.bool.isRequired,\n projects_count: PropTypes.number.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default ListCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnalyticsLink from '../../../link/AnalyticsLink';\nimport OptionalMobileLazyBgImageView from '../../base_card/templates/OptionalMobileLazyBgImageView';\n\nimport { NEWS_ARTICLE_CARD } from '../../../../services/keen/events/linkConstants';\n\nimport { getImgContainerStyles, getRootStyles, getTitleStyles } from './styleHelpers';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\n\nconst IMAGE_RATIO_CONFIG = {\n image: {\n breakpoint: layout.hiddenMedDown,\n classList: { root: utilStyles.absolutePlaceholderChild },\n ratio: '16:9',\n width: 555,\n },\n mobileImage: {\n breakpoint: layout.hiddenMedUp,\n classList: { root: utilStyles.absolutePlaceholderChild },\n ratio: '1:1',\n width: 120,\n },\n};\n\nconst NewsArticleFeaturedCard = ({ article, isHero, location }) => (\n \n {list.cover_image_url\n ? (\n
\n \n \n \n {list.name}\n \n
\n {getProjectsCount(list.projects_count)}
\n \n \n
\n);\n\nNewsArticleFeaturedCard.propTypes = {\n article: PropTypes.shape({\n id: PropTypes.number.isRequired,\n image: PropTypes.shape({ url: PropTypes.string.isRequired }).isRequired,\n mobile_image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n summary: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n user: PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n isHero: PropTypes.bool,\n location: PropTypes.string,\n};\n\nNewsArticleFeaturedCard.defaultProps = {\n isHero: false,\n location: null,\n};\n\nexport default NewsArticleFeaturedCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnalyticsLink from '../../link/AnalyticsLink';\nimport BaseCardVertical from '../base_card/vertical/BaseCardVertical';\n\nimport { timestampToPrettyDate, timestampToRelativeTime } from '../../../utility/time';\n\nimport { NEWS_ARTICLE_CARD } from '../../../services/keen/events/linkConstants';\n\nimport cardStyles from '../cards.css';\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\n\nconst NewsArticleCard = ({ article, location, onUserProfile }) => {\n const linkProps = { item: article, linkType: NEWS_ARTICLE_CARD, location };\n\n return (\n \n \n {article.title}\n \n
\n \n {article.summary}\n
\n \n {'by '}\n \n {article.user.name}\n \n \n\n \n {article.title}\n \n {onUserProfile && }\n
\n )}\n responsive={!onUserProfile}\n />\n );\n};\n\nNewsArticleCard.propTypes = {\n article: PropTypes.shape({\n image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n mobile_image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n published_at: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n user: PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }),\n url: PropTypes.string.isRequired,\n }).isRequired,\n location: PropTypes.string,\n onUserProfile: PropTypes.bool,\n};\n\nNewsArticleCard.defaultProps = {\n itemIndex: null,\n location: null,\n onUserProfile: false,\n overrideTracking: null,\n};\n\nexport default NewsArticleCard;\n","import React from 'react';\n\nimport animation from '../../../../styles/animation.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from '../news_card.css';\n\nconst NewsArticleLightDummyCard = ({ article, location, type }) => (\n \n {article.user.name}\n •\n {timestampToRelativeTime(article.published_at)}\n
\n\n \n \n \n
\n);\n\nexport default NewsArticleLightDummyCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnalyticsLink from '../../../link/AnalyticsLink';\nimport LazyImage from '../../../reusable_components/LazyImage';\n\nimport { NEWS_ARTICLE_CARD } from '../../../../services/keen/events/linkConstants';\nimport { getInObj } from '../../../../utility/accessors';\n\nimport { timestampToPrettyDate, timestampToRelativeTime } from '../../../../utility/time';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\nimport styles from '../news_card.css';\n\nconst _getSubtitle = ({ article, type }) => {\n switch (type) {\n case 'latest':\n return ({timestampToRelativeTime(article.published_at)});\n case 'trending':\n return ({article.user.name});\n default:\n return null;\n }\n};\n\nconst NewsArticleLightCard = ({ article, location, type }) => (\n \n \n
\n);\n\nNewsArticleLightCard.propTypes = {\n article: PropTypes.shape({\n id: PropTypes.number.isRequired,\n image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n mobile_image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n published_at: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n user: PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n location: PropTypes.string,\n type: PropTypes.oneOf(['latest', 'trending']).isRequired,\n};\n\nNewsArticleLightCard.defaultProps = { location: null };\n\nexport default NewsArticleLightCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnalyticsLink from '../../../link/AnalyticsLink';\nimport OptionalMobileLazyBgImageView from '../../base_card/templates/OptionalMobileLazyBgImageView';\n\nimport { NEWS_ARTICLE_CARD } from '../../../../services/keen/events/linkConstants';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\nimport styles from '../news_card.css';\n\nconst IMAGE_RATIO_CONFIG = {\n image: {\n breakpoint: layout.hiddenMedDown,\n classList: { root: utilStyles.absolutePlaceholderChild },\n ratio: '16:9',\n width: 555,\n },\n mobileImage: {\n breakpoint: layout.hiddenMedUp,\n classList: { root: utilStyles.absolutePlaceholderChild },\n ratio: '1:1',\n width: 120,\n },\n};\n\nconst NewsArticleSponsoredCardLarge = ({ article, location }) => (\n \n \n {article.title}\n \n
\n\n \n {_getSubtitle({ article, type })}\n
\n\n \n
\n);\n\nNewsArticleSponsoredCardLarge.propTypes = {\n article: PropTypes.shape({\n image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n sponsor_link: PropTypes.string.isRequired,\n sponsor_name: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n isResponsive: PropTypes.bool,\n location: PropTypes.string,\n};\n\nNewsArticleSponsoredCardLarge.defaultProps = {\n isResponsive: true,\n location: null,\n};\n\nexport default NewsArticleSponsoredCardLarge;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../icon';\nimport LazyImage from '../../reusable_components/LazyImage';\nimport ProjectCardStats from './ProjectCardStats';\nimport ProjectCardTeam from './ProjectCardTeam';\nimport ProjectLink from './ProjectLink';\n\nimport { normalizeProject } from './helpers';\n\nimport cardStyles from '../cards.css';\nimport colors from '../../../styles/global_ui/colors.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport styles from './project_card_horizontal.css';\n\nconst _getColor = (difficulty) => (difficulty === 'beginner') ? colors['v-easy'] : colors[`v-${difficulty}`];\nconst _getCustomIcon = (project) => \n \n {article.title}\n \n
\n \n {'Sponsored by '}\n
\n
\n );\n};\n\nHorizontalProjectCard.propTypes = {\n location: PropTypes.string,\n overrideTracking: PropTypes.func,\n project: PropTypes.shape({\n content_type: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n cover_image_url: PropTypes.string,\n difficulty: PropTypes.string,\n edit_url: PropTypes.string,\n guest_name: PropTypes.string,\n hid: PropTypes.string,\n name: PropTypes.string,\n one_liner: PropTypes.string,\n published_state: PropTypes.string,\n respects: PropTypes.number,\n stats: PropTypes.object,\n team: PropTypes.object,\n url: PropTypes.string,\n }).isRequired,\n toggleRespect: PropTypes.func,\n};\n\nHorizontalProjectCard.defaultProps = {\n enableOverlay: true,\n imageProps: {},\n location: null,\n maxWidth: 350,\n overrideTracking: null,\n toggleRespect: () => {},\n};\n\nexport default HorizontalProjectCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\n// TODO: get new icons for below\nimport MoveArrows from '../../reusable_components/icons/MoveArrows';\nimport Pencil from '../../reusable_components/icons/Pencil';\n\nimport { getProjectLink, isEditable } from '../project_card/helpers';\n\nimport styles from './project_edit_card.css';\n\nconst DragHandle = ({ attributes, listeners }) => (\n \n \n \n
\n \n \n \n
\n \n \n {project.name}\n \n
\n \n {project.published_state.toLowerCase() === 'private' ? 'Draft ' : null}\n {project.type_label}\n
\n \n
\n {!!project.one_liner && {project.one_liner}
}\n \n \n
\n);\n\nconst ActionsOverlay = ({ attributes, isTouchDevice, listeners, project, sortable }) => (\n \n
\n);\n\nActionsOverlay.propTypes = {\n attributes: PropTypes.object,\n isTouchDevice: PropTypes.bool,\n listeners: PropTypes.object,\n project: PropTypes.shape({\n edit_url: PropTypes.string,\n project_type: PropTypes.string,\n type_label: PropTypes.string,\n url: PropTypes.string,\n }).isRequired,\n sortable: PropTypes.bool,\n};\n\nActionsOverlay.defaultProps = {\n attributes: {},\n isTouchDevice: false,\n listeners: {},\n sortable: true,\n};\n\nexport default ActionsOverlay;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ActionsOverlay from './ActionsOverlay';\nimport ProjectCard from '../project_card';\n\nimport styles from './project_edit_card.css';\n\nconst ProjectEditCard = ({ attributes, cardBorder, isTouchDevice, listeners, item, sortable, toggleRespect }) => (\n \n {sortable &&
\n \n
\n);\n\nProjectEditCard.propTypes = {\n attributes: PropTypes.object,\n cardBorder: PropTypes.bool,\n isTouchDevice: PropTypes.bool,\n item: PropTypes.shape({\n cover_image_url: PropTypes.string,\n difficulty: PropTypes.string,\n edit_url: PropTypes.string,\n hid: PropTypes.string,\n name: PropTypes.string,\n one_liner: PropTypes.string,\n stats: PropTypes.object,\n url: PropTypes.string,\n }).isRequired,\n listeners: PropTypes.object,\n sortable: PropTypes.bool,\n toggleRespect: PropTypes.func,\n};\n\nProjectEditCard.defaultProps = {\n attributes: {},\n cardBorder: false,\n isTouchDevice: false,\n listeners: {},\n orderable: true,\n toggleRespect: () => Promise.resolve(),\n};\n\nexport default ProjectEditCard;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Body, CardImage, Stats, SubTitle, Tags, Title } from '../../sub_components';\nimport styles from './horizontal.css';\n\nconst HorizontalCard = ({ body, image, stats, subTitle, title, tags }) => (\n \n
\n \n);\n\nHorizontalCard.propTypes = {\n body: PropTypes.shape({\n htmlString: PropTypes.string,\n component: PropTypes.element,\n type: PropTypes.string,\n }),\n image: PropTypes.shape({\n linkTo: PropTypes.string,\n url: PropTypes.string,\n shape: PropTypes.string,\n }),\n stats: PropTypes.arrayOf(PropTypes.shape({\n metric: PropTypes.number,\n text: PropTypes.string,\n })),\n subTitle: PropTypes.arrayOf(PropTypes.shape({\n text: PropTypes.string,\n linkTo: PropTypes.string,\n })),\n tags: PropTypes.shape({\n highlight: PropTypes.array,\n normal: PropTypes.array,\n }),\n title: PropTypes.shape({\n text: PropTypes.string,\n linkTo: PropTypes.string,\n }),\n};\n\nHorizontalCard.defaultProps = {\n body: {},\n image: {},\n stats: [],\n subTitle: [],\n tags: {},\n title: {},\n};\n\nexport default HorizontalCard;\n","// DEPRECATED: 02-14-2023\n// Note: Used in 'RecommendedResults' component, which shows on project search. Doesn't look like algolia ever provides event reccs.\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Body, SubTitle, Title } from '../../sub_components';\n\nimport { timestampToPrettyDate } from '../../../../../utility/time';\n\nimport styles from './vertical.css';\n\nconst Event = ({ body, dateString, image, subTitle, title, location }) => {\n const dayOfMonth = timestampToPrettyDate(dateString, { day: 'numeric' }, false, null);\n const month = timestampToPrettyDate(dateString, { month: 'short' }, false, null);\n\n return (\n \n
\n \n
\n \n
\n );\n};\n\nEvent.propTypes = {\n body: PropTypes.shape({\n component: PropTypes.element,\n htmlString: PropTypes.string,\n type: PropTypes.string,\n }),\n id: PropTypes.string,\n image: PropTypes.shape({\n linkTo: PropTypes.string,\n shape: PropTypes.string,\n url: PropTypes.string,\n }),\n subTitle: PropTypes.arrayOf(PropTypes.shape({\n linkTo: PropTypes.string,\n text: PropTypes.string,\n })),\n title: PropTypes.shape({\n linkTo: PropTypes.string,\n text: PropTypes.string,\n }),\n};\n\nEvent.defaultProps = {}; // fill out default props\n\nexport default Event;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { CardImage, SubTitle, Title } from '../../sub_components';\n\nimport styles from './vertical.css';\n\nconst Thumb = ({ id, image, subTitle, title }) => (\n \n {month}\n
\n {dayOfMonth}
\n \n
\n \n
\n);\n\nThumb.propTypes = {\n id: PropTypes.number,\n image: PropTypes.shape({\n linkTo: PropTypes.string,\n shape: PropTypes.string,\n url: PropTypes.string,\n }),\n subTitle: PropTypes.arrayOf(PropTypes.shape({\n linkTo: PropTypes.string,\n text: PropTypes.string,\n })),\n title: PropTypes.shape({\n linkTo: PropTypes.string,\n text: PropTypes.string,\n additionalInfo: PropTypes.string,\n }),\n};\n\nThumb.defaultProps = {}; // fill out default props\n\nexport default Thumb;\n","export function formatUserSkillsFromAlgolia(skills, highlightResult, appliedFilters) {\n const emptySkills = { highlight: [], normal: [] };\n\n return !Array.isArray(skills)\n ? emptySkills\n : skills.reduce((acc, skill, i) => {\n const hasHighlightedResult = highlightResult && highlightResult.skills && highlightResult.skills[i].matchLevel !== 'none';\n const hasMatchInFilters = appliedFilters && appliedFilters.skills && !!appliedFilters.skills\n .filter((s) => s.toLowerCase().trim() === skill.toLowerCase().trim()).length;\n\n hasHighlightedResult || hasMatchInFilters\n ? acc.highlight.push(skill)\n : acc.normal.push(skill);\n\n return acc;\n }, emptySkills);\n}\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport sanitizer from 'sanitizer';\nimport { isObject } from '../../../../../utility/types';\n\nimport styles from './body.css';\n\nconst bodyTypes = {\n htmlString: (htmlString) => (),\n component: (component) => (\n
\n {component}
),\n};\n\nfunction getBody(body) {\n if (!isObject(body) || !Object.keys(body).length) return null;\n\n return Object.keys(bodyTypes).reduce((acc, key) => {\n const content = body[key];\n\n return body[key] && !acc ? bodyTypes[key](content) : acc;\n }, null);\n}\n\nconst Body = ({ body, children }) => {\n if (children) return {children}
;\n\n return getBody(body);\n};\n\nBody.propTypes = {\n body: PropTypes.shape({\n component: PropTypes.element,\n htmlString: PropTypes.string,\n }),\n};\n\nBody.defaultProps = { body: null };\n\nexport default Body;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport LazyImage from '../../../../reusable_components/LazyImage';\nimport defaultStyles from './card_image.css';\n\nconst CardImage = ({\n captureScroll,\n classList,\n component,\n fit,\n linkTo,\n loadBuffer,\n queryParams,\n ratio,\n shape,\n style,\n url,\n width,\n}) => {\n const styles = { ...defaultStyles, ...classList };\n\n return (\n \n {component // turn this into an Image component in sub_components\n ? component\n : (\n \n
\n );\n};\n\nCardImage.propTypes = {\n captureScroll: PropTypes.bool,\n classList: PropTypes.shape({ container: PropTypes.string }),\n component: PropTypes.element,\n fit: PropTypes.string,\n linkTo: PropTypes.string,\n loadBuffer: PropTypes.number,\n queryParams: PropTypes.object,\n ratio: PropTypes.string,\n shape: PropTypes.string,\n style: PropTypes.object,\n url: PropTypes.string,\n width: PropTypes.number.isRequired,\n};\n\nCardImage.defaultProps = {\n captureScroll: false,\n classList: {},\n component: null,\n fit: 'min',\n linkTo: '',\n loadBuffer: 0,\n queryParams: {},\n ratio: '1:1',\n shape: 'square',\n style: {},\n url: '',\n};\n\nexport default CardImage;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport EventCardDate from '../../../../cards/event_card/EventCardDate';\n\nimport styles from './event_info.css';\n\nconst EventDate = ({ dateString, orientation }) => (\n \n
\n);\n\nEventDate.propTypes = {\n dateString: PropTypes.string,\n orientation: PropTypes.string,\n};\n\nEventDate.defaultProps = {\n orientation: 'vertical',\n dateString: '',\n};\n\nexport default EventDate;\n","// DEPRECATED: 02-14-2023\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { timestampToPrettyDate } from '../../../../../utility/time';\n\nconst EventDetails = ({ dateString, location }) => {\n const verboseDateObj = { day: 'numeric', month: 'short', weekday: 'long', year: 'numeric' };\n const date = timestampToPrettyDate(dateString, verboseDateObj, false, null);\n\n return (\n \n {date &&
\n );\n};\n\nEventDetails.propTypes = {\n dateString: PropTypes.string,\n location: PropTypes.string,\n};\n\nEventDetails.defaultProps = {\n dateString: null,\n location: null,\n};\n\nexport default EventDetails;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { formatNumberWithCommas, pluralize } from '../../../../../utility/formatters';\n\nimport typography from '../../../../../styles/global_ui/typography.css';\nimport styles from './stats.css';\n\nconst getStat = ({ metric, text }) => `${formatNumberWithCommas(metric)} ${pluralize(text, metric)}`;\n\nconst Stats = ({ stats }) => {\n if (!stats || (Array.isArray(stats) && !stats.length)) return null;\n\n return (\n {`Date: ${date}`}
}\n {location && {`Location: ${location}`}
}\n \n {stats.map((stat, i) => (\n \n {stat.override ? stat.override : getStat(stat)}\n \n ))}\n
\n );\n};\n\nStats.propTypes = {\n stats: PropTypes.arrayOf(PropTypes.shape({\n metric: PropTypes.number,\n text: PropTypes.string,\n })),\n};\n\nStats.defaultProps = { stats: [] };\n\nexport default Stats;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport Badge from '../../../../reusable_components/Badge';\n\nimport layout from '../../../../../styles/global_ui/layout.css';\nimport typography from '../../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../../styles/global_ui/util.css';\n\nconst SubTitle = ({ classList, content, withCommas }) => {\n if (\n !content || (Array.isArray(content) && !content.length) || (content.length === 1 && !content[0].text)\n ) return null;\n\n return (\n \n {content.map((sub, i) => (\n \n {sub.linkTo\n ? (\n \n {sub.text}\n \n )\n : (\n {sub.text}\n )}\n {sub.user\n && (\n
\n );\n};\n\nSubTitle.propTypes = {\n classList: PropTypes.shape({ subTitle: PropTypes.string }),\n content: PropTypes.arrayOf(PropTypes.shape({\n text: PropTypes.string,\n linkTo: PropTypes.string,\n })),\n withCommas: PropTypes.bool,\n};\n\nSubTitle.defaultProps = {\n classList: {},\n content: [],\n withCommas: true,\n};\n\nexport default SubTitle;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport styles from './tags.css';\n\nconst Tags = ({ count, highlight, normal }) => {\n if (\n count === 0\n || !Array.isArray(highlight) || !Array.isArray(normal)\n || (highlight.length + normal.length) === 0\n ) return null;\n\n return (\n \n {highlight.slice(0, count).map((tag, i) => (\n
\n );\n};\n\nTags.propTypes = {\n count: PropTypes.number,\n highlight: PropTypes.array,\n normal: PropTypes.array,\n};\n\nTags.defaultProps = {\n count: 10,\n highlight: [],\n normal: [],\n};\n\nexport default Tags;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport Badge from '../../../../reusable_components/Badge';\n\nimport layout from '../../../../../styles/global_ui/layout.css';\nimport typography from '../../../../../styles/global_ui/typography.css';\n\nconst Title = ({ text, linkTo, additionalInfo, user }) => {\n if (!text) return null;\n\n return (\n {tag}
\n ))}\n {normal.slice(0, Math.max(count - highlight.length, 0)).map((tag, i) => (\n {tag}
\n ))}\n \n \n {linkTo\n ? (\n \n {text}\n \n )\n : (\n text\n )}\n \n {user && (\n
\n );\n};\n\nTitle.propTypes = {\n additionalInfo: PropTypes.string,\n linkTo: PropTypes.string,\n text: PropTypes.string.isRequired,\n};\n\nTitle.defaultProps = {\n additionalInfo: '',\n linkTo: '',\n};\n\nexport default Title;\n","export { default as Body } from './Body';\nexport { default as CardImage } from './CardImage';\nexport { default as EventDetails } from './EventInfo/EventDetails';\nexport { default as EventDate } from './EventInfo/EventDate';\nexport { default as Stats } from './Stats';\nexport { default as SubTitle } from './SubTitle';\nexport { default as Tags } from './Tags';\nexport { default as Title } from './Title';\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport Icon from '../../../../client/icon';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\nimport cardStyles from '../../../cards/cards.css';\nimport styles from './custom_checkbox_card.css';\n\nconst CheckboxCard = ({\n children,\n checkboxStyles,\n isChecked,\n isDisabled,\n name,\n onBlur,\n onChange,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n value,\n wrapperStyles,\n}) => {\n const handleClick = (e) => onChange({ value: value, checked: e.target.checked });\n\n return (\n \n \n {/* TODO: spinner on isBusy? */}\n
\n {isBusy ? 'Updating' : 'Update'}
\n{`photo${isBusy ? '...' : ''}`}
\n\n {getErrorHelperViewWithoutWrapper(errors, null, warningText)}\n
\n \n );\n }\n}\n\nAvatarButton.propTypes = {\n disabled: PropTypes.bool,\n errors: PropTypes.string,\n handleUploadBtnClick: PropTypes.func,\n imageData: PropTypes.shape({ url: PropTypes.string }).isRequired,\n isBusy: PropTypes.bool,\n};\n\nAvatarButton.defaultProps = {\n disabled: false,\n errors: '',\n handleUploadBtnClick: () => {},\n imageData: {},\n isBusy: false,\n};\n\nexport default AvatarButton;\n","import React from 'react';\n\nimport AvatarButton from './AvatarButton';\nimport UploaderWrapper from '../UploaderWrapper';\n\nimport { filterObject } from '../../../../utility/filters';\n/* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n/* eslint-disable-next-line no-prototype-builtins */\nconst viewHasProp = (val, key) => AvatarButton.propTypes.hasOwnProperty(key);\nconst filterProps = (props) => filterObject(props, viewHasProp);\n\nconst renderView = (props) => (\n {!!icon &&
\n {icon}
}\n \n {items.map((item, i) => (\n
\n);\n\nLinkList.propTypes = {\n className: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n })).isRequired,\n trackLinkClick: PropTypes.func,\n viewAllLink: PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n};\n\nLinkList.defaultProps = {\n className: '',\n trackLinkClick: () => {},\n viewAllLink: null,\n};\n\nexport default LinkList;\n","import React from 'react';\n\nimport { summonLoginPanel } from '../../../utility/dispatchers';\n\nimport typography from '../../../styles/global_ui/typography.css';\nimport styles from './mobile_nav.css';\n\nfunction summonAuth(type = 'login') {\n summonLoginPanel({\n detail: {\n state: { currentPanel: type },\n source: 'hamburgernav',\n },\n });\n}\n\nconst AuthButtons = () => (\n \n
\n);\n\nexport default AuthButtons;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../icon';\n\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\nimport styles from './mobile_nav.css';\n\nconst BackButton = ({ name, internalTarget, switchPanelOrDropdown }) => (\n \n summonAuth('signup')}\n >\n Sign up\n \n {' or '}\n summonAuth('login')}\n >\n log in\n \n
\n \n switchPanelOrDropdown(e, 'panel', internalTarget)}\n >\n
\n);\n\nBackButton.propTypes = {\n internalTarget: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n switchPanelOrDropdown: PropTypes.func.isRequired,\n};\n\nexport default BackButton;\n","/* eslint-disable no-prototype-builtins */\n/* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../icon';\nimport LinkList from '../link_list';\n\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\nimport styles from './mobile_nav.css';\n\nconst _shouldRenderDropdown = (item, currentDropdownKey) => item.hasOwnProperty('internalTarget') && (item.internalTarget === currentDropdownKey);\n\nconst _dropdownListView = (item, switchPanelOrDropdown, currentDropdownKey) => (\n \n {items.map((item, i) => (\n
\n);\n\nCategories.propTypes = {\n currentDropdownKey: PropTypes.string,\n items: PropTypes.arrayOf(PropTypes.shape({\n dropdownList: PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n })).isRequired,\n viewAllLink: PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n }),\n internalTarget: PropTypes.string,\n name: PropTypes.string.isRequired,\n url: PropTypes.string,\n })).isRequired,\n switchPanelOrDropdown: PropTypes.func.isRequired,\n trackLinkClick: PropTypes.func.isRequired,\n};\n\nCategories.defaultProps = { currentDropdownKey: null };\n\nexport default Categories;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport AuthButtons from './AuthButtons';\nimport BackButton from './BackButton';\nimport Categories from './Categories';\nimport Dialog from '../../reusable_components/Dialog';\nimport HacksterLogo from '../../reusable_components/HacksterLogo';\nimport Icon from '../../icon';\nimport LinkList from '../link_list';\nimport SocialIcons from '../social_icons';\n\nimport currentUserService from '../../../services/current_user';\nimport keenService from '../../../services/keen/main';\nimport errorHandler from '../../../services/error_handler';\nimport { getInObj } from '../../../utility/accessors';\n\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\nimport styles from './mobile_nav.css';\n\nconst NEWS_ADMIN_ROLES = ['admin', 'author', 'editor'];\nconst ARTICLES_LINK = { name: 'My articles', url: '/news/admin' };\n\nconst MobileLinkList = (props) => \n {_panelOrDropdownView(item, currentDropdownKey, switchPanelOrDropdown, trackLinkClick)}\n {_shouldRenderDropdown(item, currentDropdownKey)\n && (\n
\n ))}\n \n {column.header\n && (\n
\n);\n\nMenuColumn.propTypes = {\n column: PropTypes.shape({\n header: PropTypes.string,\n linkList: PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })).isRequired,\n viewAllLink: PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n }).isRequired,\n trackLinkClick: PropTypes.func,\n};\n\nMenuColumn.defaultProps = { trackLinkClick: () => {} };\n\nexport default MenuColumn;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport GridList from '../../../../client/wrappers/grid_list';\nimport Icon from '../../../icon';\nimport MenuColumn from './MenuColumn';\nimport SmallProjectCard from '../../../cards/small_project_card';\n\nimport keenService from '../../../../services/keen/main';\n\nimport layoutStyles from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './nav_dropdown.css';\n\nclass NavDropdown extends Component {\n constructor(props) {\n super(props);\n\n this.state = { showMenu: false };\n\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.handleMouseOver = this.handleMouseOver.bind(this);\n\n this.hovered = false;\n this.openEventFired = false;\n\n // refs\n this._menuContainer;\n }\n\n handleMouseLeave(event) {\n if (!this._menuContainer) {\n if (this.hovered) this.hovered = false;\n\n return;\n }\n\n const { top, right, bottom, left } = this._menuContainer.getBoundingClientRect();\n const { clientX, clientY } = event;\n\n if (\n (clientX <= left || clientX >= right)\n || (clientY <= top || clientY >= bottom)\n ) {\n const update = () => this.setState({ showMenu: false });\n setTimeout(() => !this.hovered ? update() : null, 350);\n this.hovered = false;\n }\n }\n\n handleMouseOver() {\n if (!this.hovered) {\n this.hovered = true;\n }\n\n setTimeout(() => {\n if (this.hovered) {\n if (!this.openEventFired) {\n this.openEventFired = true;\n keenService.reportEvent({ eventName: 'Opened menu' }, { type: this.props.openMenuEventType });\n }\n this.setState({ showMenu: true });\n }\n }, 500);\n }\n\n _featuredProjectsView(items, header, i) {\n return (\n \n {_getHeader({ column, trackLinkClick })}\n
\n )}\n \n
\n );\n }\n\n _renderLink(isDesktop) {\n const { classList, name, trackLinkClick, url } = this.props;\n\n return (\n {header}
\n \n this._menuContainer = c}\n className={styles.menuContainer}\n onMouseLeave={this.handleMouseLeave}\n onMouseOver={this.handleMouseOver}\n >\n {columns.map((column, i) => (\n column.header === 'Featured Projects'\n ? this._featuredProjectsView(column.items, column.header, i)\n :
\n \n )}\n \n );\n }\n}\n\nNavDropdown.propTypes = {\n classList: PropTypes.shape({\n link: PropTypes.string,\n wrapper: PropTypes.string,\n }),\n columns: PropTypes.arrayOf(PropTypes.oneOfType([\n PropTypes.shape({\n header: PropTypes.string.isRequired,\n linkList: PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })).isRequired,\n viewAllLink: PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n }).isRequired,\n PropTypes.shape({\n header: PropTypes.string.isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({\n cover_image_url: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })).isRequired,\n }).isRequired,\n ])).isRequired,\n name: PropTypes.string.isRequired,\n openMenuEventType: PropTypes.string,\n trackLinkClick: PropTypes.func,\n url: PropTypes.string.isRequired,\n};\n\nNavDropdown.defaultProps = {\n classList: {},\n openMenuEventType: 'nav-dropdown',\n trackLinkClick: () => {},\n};\n\nexport default NavDropdown;\n","import React from 'react';\nimport styles from './horizontal_part_card.css';\n\nconst DummyHorizontalPartCard = ({ className }) => (\n \n
\n);\n\nexport default DummyHorizontalPartCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AddToInterestsButton from '../../buttons/add_to_interests_button';\nimport BuyButton from '../../buttons/buy_button';\nimport AnchorButton from '../../buttons/anchor';\nimport LazyImage from '../../reusable_components/LazyImage';\n\nimport { getInObj } from '../../../utility/accessors';\n\nimport styles from './horizontal_part_card.css';\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\n\nconst HorizontalPartCard = ({ canManage, className, part, platformId, showLinks, transition }) => (\n \n \n
\n \n \n \n \n
\n \n e.preventDefault()}>\n {part.image_url\n && (\n transition('projects', part.slug, e)}\n queryParams={{ bg: 'fff' }}\n ratio=\"3:2\"\n src={part.image_url}\n width={255}\n />\n )}\n \n\n
\n);\n\nHorizontalPartCard.propTypes = {\n canManage: PropTypes.bool,\n className: PropTypes.string,\n part: PropTypes.shape({\n description: PropTypes.string,\n id: PropTypes.number.isRequired,\n image_url: PropTypes.string,\n links: PropTypes.shape({ get_started: PropTypes.string }),\n name: PropTypes.string,\n one_liner: PropTypes.string,\n online_stores: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n link: PropTypes.string,\n retailer: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }),\n })),\n slug: PropTypes.string,\n url: PropTypes.string.isRequired,\n }).isRequired,\n platformId: PropTypes.number.isRequired,\n showLinks: PropTypes.bool,\n transition: PropTypes.func,\n};\n\nHorizontalPartCard.defaultProps = {\n canManage: false,\n className: '',\n part: {\n description: null,\n image_url: null,\n links: { get_started: null },\n name: null,\n one_liner: null,\n online_stores: [],\n slug: '',\n },\n showLinks: true,\n transition: () => {},\n};\n\nexport default HorizontalPartCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ContentPlaceholder from '../../reusable_components/ContentPlaceholder';\nimport HorizontalPartCard from '../horizontal_part_card';\n\nimport buttonStyles from '../../../styles/global_ui/buttons.css';\nimport styles from './horizontal_parts_list.css';\n\nfunction getListView({ canManage, manageProductsLink, platformId, records, transition }) {\n return records.length > 0 ? renderListView({ canManage, platformId, records, transition }) : renderPlaceholderView({ canManage, manageProductsLink });\n}\n\nfunction renderListView({ canManage, platformId, records, transition }) {\n return (\n \n
\n \n \n
\n\n {showLinks\n && (\n
\n\n \n {\n e.preventDefault();\n transition('projects', part.slug, e);\n }}\n >\n {part.name}\n \n
\n\n {showLinks\n && (\n \n {getInObj(['links', 'get_started'], part) && React.Children.toArray([\n Getting Started,\n {String.fromCharCode(124)},\n ])}\n {\n e.preventDefault();\n transition('projects', part.slug, e);\n }}\n >\n View projects\n \n
\n )}\n\n {part.one_liner && {part.one_liner}
}\n \n {part.online_stores.length > 0 && \n Edit\n \n )}\n
\n \n {records.map((record) => (\n
\n );\n}\n\nfunction renderPlaceholderView({ canManage, manageProductsLink }) {\n return (\n \n
\n);\n\nconst List = ({ className, children }) => ({children}
);\n\nexport default class EditableProjectsList extends Component {\n constructor(props) {\n super(props);\n\n this.isTouchDevice = isTouchDevice();\n this.onSortEnd = this.onSortEnd.bind(this);\n }\n\n /**\n * Methods\n */\n onSortEnd(projects) {\n this.props.handleReorder(projects.map((project, i) => ({ ...project, position: i })));\n }\n\n /**\n * Views\n */\n _getUnsortableCell(project, className) {\n return (\n - \n {this.props.records.map((project) => this._getUnsortableCell(project, classNames.cell))}\n
Thank you!
Your feedback was received and will greatly help us improve Hackster.
`,\n pages: [\n {\n name: 'Start',\n questions: [\n {\n type: 'html',\n html: `Thanks for visiting Hackster!
We would love to get some feedback from you.
`,\n }],\n },\n {\n name: 'Feeling',\n questions: [\n {\n type: 'rating',\n name: `${QUESTION_NAME.FEELING}`,\n title: 'How was your recent experience with Hackster?',\n itemComponent: 'RobotRating',\n rateCount: 5,\n rateMax: 5,\n displayMode: 'buttons', // this forces options to be inline on one row.\n isRequired: true,\n errorLocation: 'bottom',\n },\n ],\n },\n {\n name: 'Account',\n questions: [\n {\n type: 'radiogroup',\n itemComponent: 'RadioGroup',\n isRequired: true,\n errorLocation: 'bottom',\n name: `${QUESTION_NAME.ACCOUNT}`,\n title: 'Do you have a Hackster account?',\n choices: [\n {\n value: 'true',\n text: 'Yes',\n },\n {\n value: 'false',\n text: 'No',\n },\n ],\n },\n ],\n },\n {\n name: 'Visit frequency',\n questions: [\n {\n type: 'radiogroup',\n itemComponent: 'RadioGroup',\n name: `${QUESTION_NAME.VISIT}`,\n title: 'How often do you visit Hackster?',\n choices: [\n {\n value: 'weekly',\n text: 'Weekly',\n },\n {\n value: 'monthly',\n text: 'Monthly',\n },\n {\n value: 'rarely',\n text: 'Rarely',\n },\n {\n value: 'first',\n text: 'First time',\n },\n ],\n },\n ],\n visibleIf: `{${QUESTION_NAME.ACCOUNT}} = 'false'`,\n },\n {\n name: 'Feature request',\n questions: [\n {\n type: 'comment',\n name: 'feature-request',\n title: 'Are there any features or benefits that you would drive you to sign up?',\n },\n ],\n visibleIf: `{${QUESTION_NAME.ACCOUNT}} = 'false'`,\n },\n {\n name: 'Like most',\n questions: [\n {\n type: 'comment',\n name: 'like-most',\n title: 'What do you like **most** about Hackster?',\n },\n ],\n visibleIf: `{${QUESTION_NAME.ACCOUNT}} = 'true'`,\n },\n {\n name: 'Like least',\n questions: [\n {\n type: 'comment',\n name: 'like-least',\n title: 'What do you like **least** about Hackster?',\n },\n ],\n visibleIf: `{${QUESTION_NAME.ACCOUNT}} = 'true'`,\n },\n {\n name: 'Comments',\n questions: [\n {\n type: 'comment',\n name: `${QUESTION_NAME.FEEDBACK}`,\n title: 'Any other feedback?',\n },\n ],\n },\n ],\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport store from '../../../services/user_relations_store';\nimport currentUser from '../../../services/current_user';\nimport errorHandler from '../../../services/error_handler';\n\nclass CurrentUserWrapper extends Component {\n constructor(props) {\n super(props);\n this.getCurrentUser = this.getCurrentUser.bind(this);\n this.state = { currentUser: null };\n }\n\n componentDidMount() {\n return currentUser.getStoreAsync()\n .then((user) => {\n /* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n /* eslint-disable-next-line no-prototype-builtins */\n const hasUser = user && user.hasOwnProperty('id');\n\n if (hasUser) {\n store.set('currentUser', user);\n }\n // We respond with null here if the user has no id, meaning the user is not logged in.\n // UUID will be the only property in this case, which is for tracking.\n this.setState({ currentUser: user });\n this.props.onResolve(user);\n })\n .catch((err) => errorHandler('CurrentUserWrapper Error:', err));\n }\n\n getCurrentUser() {\n return this.state.currentUser;\n }\n\n render() {\n return (\n\n {this.props.children}\n
\n );\n }\n}\n\nCurrentUserWrapper.propTypes = {\n onResolve: PropTypes.func,\n propsToFetch: PropTypes.array, // TODO: Use this as a way to optionally get currentUser data when we switch to a GraphQL request.\n};\n\nCurrentUserWrapper.defaultProps = {\n onResolve: () => {},\n propsToFetch: [],\n};\n\nexport default CurrentUserWrapper;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../icon';\nimport SurveyPopup from '../SurveyPopup';\nimport { QUESTION_NAME, SURVEY_SLUG } from '../SurveyPopup/enums';\nimport TooltipTarget from '../TooltipTarget';\nimport { angry, happy, love, neutral, sad } from '../icons/rating_svgs';\n\nimport { graphMutateWithoutUser } from '../../../requests/graphql';\nimport { summonGlobalMessenger } from '../../../utility/dispatchers';\n\nimport layout from '../../../styles/global_ui/layout';\nimport typography from '../../../styles/global_ui/typography';\nimport util from '../../../styles/global_ui/util';\nimport style from './feedback.css';\n\nconst VERSION = 1.0;\n\nconst surveyJson = {\n title: SURVEY_SLUG.PASSIVE_GENERAL_FEEDBACK,\n version: VERSION,\n showTitle: false,\n showQuestionNumbers: false,\n completeText: 'Submit',\n pagePrevText: '< Back',\n completedHtmlOnCondition: [\n {\n expression: `{${QUESTION_NAME.FEELING}} == 1`,\n html: `Thank you!Your feedback was received.
${angry}
{feedback}
`,\n },\n {\n expression: `{${QUESTION_NAME.FEELING}} == 2`,\n html: `Thank you!Your feedback was received.
${sad}
{feedback}
`,\n },\n {\n expression: `{${QUESTION_NAME.FEELING}} == 3`,\n html: `Thank you!Your feedback was received.
${neutral}
{feedback}
`,\n },\n {\n expression: `{${QUESTION_NAME.FEELING}} == 4`,\n html: `Thank you!Your feedback was received.
${happy}
{feedback}
`,\n },\n {\n expression: `{${QUESTION_NAME.FEELING}} == 5`,\n html: `Thank you!Your feedback was received.
${love}
{feedback}
`,\n },\n ],\n pages: [\n {\n name: 'Feeling and Comment',\n title: 'Help us improve Hackster!',\n elements: [\n {\n type: 'rating',\n name: `${QUESTION_NAME.FEELING}`,\n title: 'How was your recent experience with Hackster?',\n itemComponent: 'RobotRating',\n rateCount: 5,\n rateMax: 5,\n displayMode: 'buttons', // this forces options to be inline on one row.\n isRequired: true,\n errorLocation: 'bottom',\n },\n {\n type: 'comment',\n name: `${QUESTION_NAME.FEEDBACK}`,\n title: 'Feedback',\n isRequired: true,\n rows: 4,\n width: '100%',\n errorLocation: 'bottom',\n },\n ],\n },\n ],\n};\n\nconst c = {\n popupContainer: `${style.popupContainer}`,\n container: `${layout.flexColumn} ${layout.gutter10} ${style.container}`,\n iconWrapper: `${style.iconWrapper}`,\n};\n\nconst customCss = { completedPage: c.container };\n\nconst FeedbackSurvey = ({ align, alignOffset, sideOffset }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [showTip, setShowTip] = useState(!isOpen);\n const [isDisabled, setIsDisabled] = useState(false);\n const saveSurveyResults = useCallback(({ content }) => {\n const response = {\n content: JSON.stringify(content),\n survey_slug: SURVEY_SLUG.PASSIVE_GENERAL_FEEDBACK,\n version: VERSION,\n };\n\n graphMutateWithoutUser({ t: 'create_survey_result' }, { result: response })\n .catch((err) => {\n summonGlobalMessenger({ msg: 'Oops, something went wrong. Try again later.', type: 'error' });\n return err;\n });\n }, []);\n\n const onOpenChange = useCallback((isOpening) => {\n setShowTip(!isOpening);\n setIsOpen(isOpening);\n }, [setIsOpen, setShowTip]);\n\n // We need to disable the popup if any auto opening survey is mounted. If more than one survey is initialized, the data might get tied to the wrong survey model\n useEffect(() => {\n document.addEventListener('openSurvey', () => setIsDisabled(true));\n document.addEventListener('closeSurvey', () => setIsDisabled(false));\n\n return () => {\n document.removeEventListener('openSurvey');\n document.removeEventListener('closeSurvey');\n };\n }, []);\n\n return (\n\n \n \n {isComplete\n ? (\n
\n {!isLast && }\n \n 2 })}>{text}
\n question label with **markdown**?
` -> `question label with **markdown**?`. This is needed to keep the required asterisk inline.\n const result = html.slice(3, html.length - 5);\n options.html = result;\n }, []);\n\n const handleRender = useCallback((survey) => {\n const { visiblePageCount, currentPageNo, isShowStartingPage, title } = survey;\n pageCountRef.current = visiblePageCount;\n // the footer container has a few nested elements we won't show. Change flex layout if it is a single page\n const containerEl = document.getElementById(survey.title);\n const footer = containerEl.querySelectorAll('.sd-action-bar');\n footerRef.current = footer[footer.length - 1];\n\n if (visiblePageCount <= 1 || isShowStartingPage) {\n footerRef.current.style.display = 'flex';\n footerRef.current.style['justify-content'] = 'center';\n\n if (!isShowStartingPage) return;\n } else {\n footerRef.current.style.display = 'flex';\n footerRef.current.style['justify-content'] = 'end';\n }\n createProgressBar({ currentPageNo, title, isShowStartingPage });\n }, [createProgressBar]);\n\n const handleStart = useCallback((survey) => {\n // when there is a \"start\" page, show the progress bar on the \"first\" real page.\n if (!survey.firstPageIsStarted) {\n return;\n }\n\n const { title } = survey;\n\n addToDataLayer({\n event: 'Survey started',\n survey: title,\n version: surveyJson.version,\n });\n\n footerRef.current.style['justify-content'] = 'end';\n progressBarRef.current.style.cssText = progressBarStyle;\n }, [surveyJson.version]);\n\n const handlePageChange = useCallback((survey, options) => {\n const { currentPage, currentPageNo, visiblePageCount, title, isShowStartingPage, isLastPage } = survey;\n const { isGoingBackward } = options;\n\n !isGoingBackward && addToDataLayer({\n event: 'Survey page changed',\n survey: title,\n version: surveyJson.version,\n currentPageNo,\n currentPage: currentPage.name,\n });\n\n const shouldRecreateDots = pageCountRef.current !== visiblePageCount;\n updateFooter({ currentPageNo, isGoingBackward, isLastPage });\n updateProgressBar({ currentPageNo, isShowStartingPage, shouldRecreateDots, surveyTitle: title, visiblePageCount });\n }, [surveyJson.version, updateFooter, updateProgressBar]);\n\n const surveyComplete = useCallback((survey) => {\n addToDataLayer({\n event: 'Survey submitted',\n survey: survey.title,\n version: surveyJson.version,\n });\n onSubmit({ content: survey.data });\n }, [onSubmit, surveyJson.version]);\n\n const handleProcessHtml = useCallback((_survey, options) => {\n // When we exit the survey, ie. it is completed, we want to show the close button. This button is not apart of the survey, but a child of the Popup modal.\n if (options.reason === 'completed') {\n closeButton.current.style.display = 'flex';\n closeButton.current.style['justify-content'] = 'center';\n }\n }, []);\n\n const handleOpenChange = (isOpening) => {\n if (isOpening) {\n onOpenChange?.(isOpening);\n return;\n }\n // send partially completed survey\n if (survey.state !== 'completed' && Object.keys(survey.data).length) {\n onSubmit({ content: survey.data });\n }\n // reset survey and close\n survey.clear(true, true);\n const event = new Event('closeSurvey');\n document.dispatchEvent(event);\n\n addToDataLayer({\n event: 'Survey dismissed',\n survey: survey.title,\n version: surveyJson.version,\n });\n\n onOpenChange?.(isOpening);\n };\n\n const survey = useMemo(() => {\n if (!popup.open) {\n return null;\n }\n const model = new Model(surveyJson);\n\n model.css = { ...baseCss, ...surveyCss };\n\n ReactElementFactory.Instance.registerElement(\n 'RobotRating',\n (props) => React.createElement(RobotRating, { ...props, survey: model }),\n );\n\n ReactElementFactory.Instance.registerElement(\n 'RadioGroup',\n (props) => React.createElement(RadioGroup, { ...props, survey: model }),\n );\n\n addToDataLayer({\n event: 'Survey opened',\n survey: model.title,\n version: surveyJson.version,\n });\n\n // events will fire in this order, with the exception of onProcessHtml\n model.onTextMarkdown.add(handleConvertMarkdown);\n model.onAfterRenderSurvey.add(handleRender);\n model.onStarted.add(handleStart);\n model.onCurrentPageChanged.add(handlePageChange);\n model.onComplete.add(surveyComplete);\n model.onProcessHtml.add(handleProcessHtml); // we only care about this event when it fires after onComplete.\n\n return model;\n }, [handleConvertMarkdown, handlePageChange, handleProcessHtml, handleRender, handleStart, popup.open, surveyComplete, surveyCss, surveyJson]);\n\n return (asDialog\n ? (\n\n Close \n
\n \n )}\n \n )\n : (\n \n Close \n
\n \n )}\n \n )\n );\n};\n\nexport default SurveyPopup;\n\nSurveyPopup.propTypes = {\n onSubmit: PropTypes.func.isRequired,\n popup: PropTypes.shape({\n align: PropTypes.string,\n alignOffset: PropTypes.number,\n classList: PropTypes.shape({ container: PropTypes.string, trigger: PropTypes.string }),\n hasClose: PropTypes.bool,\n open: PropTypes.bool,\n onOpenChange: PropTypes.func,\n side: PropTypes.string,\n sideOffset: PropTypes.number,\n title: PropTypes.string,\n trigger: PropTypes.node.isRequired,\n }),\n surveyCss: PropTypes.shape({}), // target surveyJS elements directly\n surveyJson: PropTypes.shape({}).isRequired,\n};\n","import React from 'react';\n\nconst Camera = ({ className }) => (\n \n);\n\nexport default Camera;\n","import React from 'react';\n\nconst HacksterPro = ({ className }) => (\n {children}
\n \n);\n\nMaxHeightTransition.propTypes = {\n className: PropTypes.string,\n maxHeight: PropTypes.number,\n timeout: PropTypes.number,\n};\n\nMaxHeightTransition.defaultProps = {\n className: '',\n maxHeight: 500,\n timeout: 350,\n};\n\nexport default MaxHeightTransition;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Transition from 'react-transition-group/Transition';\n\n/* Based off CSSTransition (http://reactcommunity.org/react-transition-group/css-transition)\n * except using style prop instead of CSS classes. This is for transitions where\n * we might want to dynamically set style based on current conditions, or if we want to\n * customize/tweak default style values, but not write a whole new set of CSS classes\n * for each variation.\n * TODO: set CSS classes AND style for each state?\n * Note: the child of this Transition component must make use of the style prop for it to work\n */\nclass StyleTransition extends Component {\n static contextTypes = { transitionGroup: PropTypes.object };\n\n constructor(props, context) {\n super(props, context);\n\n this.state = { style: props.getStyle(null, this._initStatus(props, context)) };\n\n this.onEnter = this.onEnter.bind(this);\n this.onEntering = this.onEntering.bind(this);\n this.onEntered = this.onEntered.bind(this);\n this.onExit = this.onExit.bind(this);\n this.onExiting = this.onExiting.bind(this);\n this.onExited = this.onExited.bind(this);\n }\n\n // https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js\n _initStatus(props, context) {\n const parentGroup = context.transitionGroup;\n\n // In the context of a TransitionGroup all enters are really appears\n const appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n\n if (props.in) {\n if (appear) {\n return EXITED;\n } else {\n return ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n return UNMOUNTED;\n } else {\n return EXITED;\n }\n }\n }\n\n componentDidMount() {\n this._isMounted = true;\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n onEnter(node, appearing) {\n this._safelySetState({ style: this.props.getStyle(node, ENTER, appearing) });\n\n if (this.props.onEnter) {\n this.props.onEnter(node, appearing);\n }\n }\n\n onEntering(node, appearing) {\n this._forceReflow(node);\n this._safelySetState({ style: this.props.getStyle(node, ENTERING, appearing) });\n\n if (this.props.onEntering) {\n this.props.onEntering(node, appearing);\n }\n }\n\n onEntered(node, appearing) {\n this._safelySetState({ style: this.props.getStyle(node, ENTERED, appearing) });\n\n if (this.props.onEntered) {\n this.props.onEntered(node, appearing);\n }\n }\n\n onExit(node) {\n this._safelySetState({ style: this.props.getStyle(node, EXIT) });\n\n if (this.props.onExit) {\n this.props.onExit(node);\n }\n }\n\n onExiting(node) {\n this._forceReflow(node);\n this._safelySetState({ style: this.props.getStyle(node, EXITING) });\n\n if (this.props.onExiting) {\n this.props.onExiting(node);\n }\n }\n\n onExited(node) {\n this._safelySetState({ style: this.props.getStyle(node, EXITED) });\n if (this.props.onExited) {\n this.props.onExited(node);\n }\n }\n\n _forceReflow(node) {\n // Trick used by CSSTransition (https://github.com/reactjs/react-transition-group/blob/master/src/CSSTransition.js)\n return node && node.scrollTop;\n }\n\n _safelySetState(state, cb) {\n if (this._isMounted) this.setState(state, cb);\n }\n\n render() {\n const {getStyle, ...transitionProps} = this.props; // eslint-disable-line\n\n return (\n \n {`${formatNumberLimit4Chars(stats.live_projects)} ${pluralize('project', stats.live_projects)} • ${formatNumberLimit4Chars(stats.followers)} ${pluralize('follower', stats.followers)}`}\n
\n \n \n Contact\n \n
\n \n );\n }\n}\n\nPlatformMemberCard.propTypes = {\n item: PropTypes.shape({\n avatar_url: PropTypes.string,\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n stats: PropTypes.shape({\n followers: PropTypes.number,\n live_projects: PropTypes.number,\n }),\n url: PropTypes.string,\n }).isRequired,\n};\n\nexport default PlatformMemberCard;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport BookmarkListForm from '../../../bookmarks/bookmark_list_form';\nimport ButtonDropdown from '../../../buttons/button_dropdown';\nimport DummyList from '../../../wrappers/grid_list/DummyList';\nimport GridList from '../../../wrappers/grid_list';\nimport ListCard from '../../../cards/list_card';\nimport DummyListCard from '../../../cards/list_card/DummyListCard';\nimport Paginator from '../../../nav_components/paginator';\n\nimport GraphQLBookmarkListsService from '../../../../services/graphql/bookmark_lists_service';\nimport bookmarkStore from '../../../../services/bookmark_store';\nimport errorHandler from '../../../../services/error_handler';\nimport urlService from '../../../../services/url_service';\nimport { summonGlobalMessenger } from '../../../../utility/dispatchers';\nimport { windowScrollTo } from '../../../../services/window';\n\nimport { GENERIC_ERROR } from '../../../../constants/alerts';\n\nimport bookmarkStyles from '../../../bookmarks/bookmarks.css';\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport headerStyles from '../../page_header/page_header.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\n\nconst ANALYTICS_CONSTANTS = { widget_src: 'bookmarks_page' };\nconst PER_PAGE = 20;\n\nconst Loader = () => (\n \n
\n );\n }\n}\n\nBookmarks.propTypes = {\n currentUser: PropTypes.shape({ user_name: PropTypes.string.isRequired }).isRequired,\n history: PropTypes.object.isRequired,\n imageURLs: PropTypes.shape({\n bookmarkCoverDefault: PropTypes.shape({\n x1: PropTypes.string.isRequired,\n x2: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n path: PropTypes.string.isRequired,\n store: PropTypes.shape({ get: PropTypes.func.isRequired }).isRequired,\n};\n\nexport default Bookmarks;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport Router, { history, initCurrentPath, Route, transition } from '../../../reusable_components/Router';\n\nimport Bookmarks from '../bookmarks';\nimport Events from '../events';\nimport Home from '../home';\nimport Navbar from '../navbar';\nimport Notifications from '../notifications';\nimport ProfileForm from '../profile_form';\nimport Projects from '../projects';\n\nimport SeoHandler from '../../../../services/seo_handler';\nimport seoConfig from '../seoConfig';\n\nimport urlService from '../../../../services/url_service';\n\nfunction getRoutes(hiddenRoutes) {\n const defaults = [\n { href: '/', name: 'Dashboard' },\n { href: '/profile', name: 'Edit Profile' },\n {\n href: '/projects', name: 'Projects', dropdown: [\n { href: '/projects/drafts', name: 'Drafts' },\n { href: '/projects/public', name: 'Public Projects' },\n { href: '/projects/guest', name: 'Guest Projects' },\n { href: '/projects/new', name: 'Create a new project', redirect: true },\n ],\n },\n { href: '/events', name: 'Events' },\n { href: '/bookmarks', name: 'Bookmarks' },\n { href: '/notifications', name: 'Notifications' },\n { href: '/users/edit', name: 'Account', redirect: true },\n ];\n\n return defaults.reduce((memo, route) => route.dropdown\n ? [...memo, { ...route, dropdown: route.dropdown.filter((subroute) => !hiddenRoutes[subroute.href]) }]\n : !hiddenRoutes[route.href]\n ? [...memo, route]\n : memo, []);\n}\n\nclass Dashboard extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n basePath: props.pathHelpers.basePath,\n initPath: initCurrentPath(props.pathHelpers.fullPath, props.pathHelpers.basePath),\n };\n\n this.handleLocationChange = this.handleLocationChange.bind(this);\n\n this.seoHandler = new SeoHandler({ config: seoConfig });\n urlService.setRootPath(props.pathHelpers.rootPath);\n }\n\n componentDidMount() {\n this.seoHandler.reportView({ path: this.state.initPath });\n }\n\n handleLocationChange(location, action) {\n this.seoHandler.reportView({ path: location.pathname });\n }\n\n render() {\n const hiddenRoutes = {\n '/projects/guest': this.props.hide_guest_projects,\n '/events': this.props.isWhitelabel,\n };\n const routes = getRoutes(hiddenRoutes);\n\n return (\n \n
\n \n this._buttonDropdown = c}\n alignRight={true}\n classList={{\n button: `${buttonStyles.md} ${typography.whitespaceNowrap}`,\n dropdown: `${bookmarkStyles.dropdown} ${utilStyles.boxShadow2}`,\n }}\n label=\"Create new list\"\n >\n
\n {initialized\n ? (\n \n My bookmarks\n
\n\n
\n \n Under review
);\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n\nEvents.propTypes = {\n history: PropTypes.object.isRequired,\n path: PropTypes.string.isRequired,\n store: PropTypes.shape({ get: PropTypes.func.isRequired }).isRequired,\n};\n\nexport default Events;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ContentPlaceholder from '../../../reusable_components/ContentPlaceholder';\nimport ProjectsSection from '../../projects_section';\n\nimport styles from '../dashboard/dashboard.css';\n\nconst Drafts = ({ currentUser, drafts }) => (\n drafts && drafts.records.length\n ? (\n \n \n \n Create a new event\n \n \n \n \n Published events\n \n this._getStatusBadge(event) },\n placeholder: () => this._getNoResultsPlaceholder(),\n }}\n loaderComponent={renderDummyList}\n />\n \n
\n \n Events\n
\n\n
\n );\n }\n}\n\nHome.propTypes = {\n currentUser: PropTypes.shape({\n id: PropTypes.number,\n stats: PropTypes.shape({ projects: PropTypes.number }),\n }).isRequired,\n isWhitelabel: PropTypes.bool,\n store: PropTypes.object,\n};\n\nHome.defaultProps = {\n isWhitelabel: false,\n store: {},\n};\n\nexport default Home;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isCurrentPath, history, Link } from '../../../reusable_components/Router';\nimport urlService from '../../../../services/url_service';\nimport Icon from '../../../icon';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from '../../../../styles/navbar.css';\n\nfunction getHref(route, basePath, rootPath) {\n return route.redirect ? urlService.url(route.href) : `${basePath}${route.href}`;\n}\n\nconst NavBar = ({ basePath, initPath, rootPath, routes, store, transition }) => (\n \n
\n \n
\n);\n\nNavBar.propTypes = {\n basePath: PropTypes.string.isRequired,\n initPath: PropTypes.string.isRequired,\n rootPath: PropTypes.string.isRequired,\n routes: PropTypes.array.isRequired,\n store: PropTypes.object.isRequired,\n transition: PropTypes.func.isRequired,\n};\n\nexport default NavBar;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TooltipTarget from '../../../reusable_components/TooltipTarget';\n\nimport buildMessage from './buildMessage';\n\nimport { timestampToPrettyDate, timestampToRelativeTime } from '../../../../utility/time';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\nimport styles from './notifications.css';\n\nconst Notification = ({ currentUser, markRead, notification }) => {\n const onClick = () => markRead(notification.receipt_id);\n\n const msg = buildMessage({\n currentUserId: currentUser.id,\n event: notification.event,\n fields: notification.message_fields,\n onClick,\n type: notification.notifiable_type,\n });\n\n if (!msg) return null;\n\n return (\n - \n {routes.map((route, i) => (\n
\n\n {route.dropdown.map((subroute, ii) => (\n transition(subroute.href, store)}\n redirect={subroute.redirect}\n />\n ))}\n
\n )}\n\n \n {route.dropdown && \n
\n \n
\n {msg}
\n {timestampToRelativeTime(notification.created_at)}
\n \n {notification.read\n ? /* Placeholder so text doesn't jump */\n : (\n \n \n \n )}\n
\n - \n {createList(props)}\n {props.loading && props.notifications.length > 0\n && }\n
\n {props.individualTransitions ? transitionIndividualItems(props) : transitionFullList(props)}\n
\n);\n\nNotificationsList.propTypes = {\n className: PropTypes.string,\n currentUser: PropTypes.shape({ id: PropTypes.number }).isRequired,\n individualTransitions: PropTypes.bool,\n loading: PropTypes.bool,\n markRead: PropTypes.func,\n notifications: PropTypes.array.isRequired,\n pageKey: PropTypes.string,\n};\n\nNotificationsList.defaultProps = {\n className: '',\n individualTransitions: false,\n loading: false,\n markRead: () => Promise.resolve(),\n pageKey: '',\n};\n\nexport default NotificationsList;\n","import React from 'react';\n\nimport urlService from '../../../../services/url_service';\nimport { DATE_AT_TIME_FORMAT, timeIsPast, timestampToPrettyDate } from '../../../../utility/time';\nimport { isObjectWithLength } from '../../../../utility/types';\n\nimport typography from '../../../../styles/global_ui/typography.css';\n\nconst challengeText = {\n // completed: (name, path, onClick) => (The challenge {createLink(path, name, onClick)} is now closed for submissions. Time to award prizes!),\n ending_soon: (name, path, onClick) => (\n \n {createLink(path, name, onClick)}\n {' '}\n is ending soon, time to submit your\n project!\n \n ),\n free_hardware_complete: (name, path, onClick, contestType) => (\n \n {contestType === 'challenge' ? 'Proposal' : 'Free hardware'}\n {' '}\n winners for\n {' '}\n {createLink(path, name, onClick)}\n {' '}\n have been selected!\n \n ),\n free_hardware_end_soon: (name, path, onClick, contestType) => (\n \n {contestType === 'challenge' ? 'Proposals' : 'Free hardware applications'}\n {' '}\n for\n {' '}\n {createLink(path, name, onClick)}\n {' '}\n are closing soon, time to submit yours!\n \n ),\n half_way: (name, path, onClick) => (\n \n {createLink(path, name, onClick)}\n {' '}\n is half-way through, how is your\n submission going?\n \n ),\n judged: (name, path, onClick) => (\n \n The results for\n {createLink(path, name, onClick)}\n {' '}\n are out!\n \n ),\n // launched_pre_contest: (name, path, onClick) => ({createLink(path, name, onClick)} is now accepting ideas!),\n launched_contest: (name, path, onClick) => (\n \n {createLink(path, name, onClick)}\n {' '}\n is now open for submissions!\n \n ),\n // pre_contest_awarded: (name, path, onClick) => (Winners for the pre-contest of {createLink(path, name, onClick)} have been announced.),\n // pre_contest_ending_soon: (name, path, onClick) => (The precontest of {createLink(path, name, onClick)} is ending soon, time to submit your idea!),\n // pre_contest_winners: (name, path, onClick) => (Your idea has been selected as a winner for the pre-contest of {createLink(path, name, onClick)}. Congrats!),\n};\n\n// Takes the \"relations\" field from comments/posts and tries to find current user id\nfunction isCurrentUserMentioned(relations, currentUserId) {\n if (!isObjectWithLength(relations)) return false;\n\n return Object.keys(relations).some((key) => relations[key].id === currentUserId && relations[key].type === 'user');\n}\n\nfunction getCommentActionText({ currentUserId, parent_comment_author_id, relations }) {\n if (isCurrentUserMentioned(relations, currentUserId)) {\n return ` mentioned you in a${parent_comment_author_id === currentUserId ? ' reply to your' : ' '} comment on `;\n } else {\n return parent_comment_author_id === currentUserId ? ' replied to your comment on ' : ' commented on ';\n }\n}\n\nfunction getCommentLinkText({ commentable_name, commentable_type, currentUserId, post_author_id, post_author_name }) {\n switch (commentable_type) {\n case 'Project':\n return commentable_name;\n case 'FeedPost':\n return post_author_id === currentUserId ? 'your post' : `${post_author_name}'s post`;\n default:\n return '';\n }\n}\n\nfunction commentLink({ commentable_name, commentable_path, commentable_type, currentUserId, post_author_id, post_author_name }, onClick) {\n const body = getCommentLinkText({ commentable_name, commentable_type, currentUserId, post_author_id, post_author_name });\n\n return createLink(commentable_path, body, onClick);\n}\n\nfunction userLink(path, name, onClick) {\n return name && path ? createLink(path, name, onClick) : 'Someone';\n}\n\nfunction createLink(path, body, onClick) {\n return (\n {body}\n );\n}\n\n// TODO: 11-2022\n// :approved is deprecated\nfunction projectMessage(event, { made_public_at, name, path }, onClick) {\n return (\n \n {createLink(path, name, onClick)}\n {' has been approved and will show on the home page and related platform pages '}\n {timeIsPast(made_public_at) ? 'immediately' : `on ${timestampToPrettyDate(made_public_at, DATE_AT_TIME_FORMAT)}.`}\n \n );\n}\n\n// TODO: Remove deprecated Classes.\nconst builders = {\n Challenge: (event, { contest_type, name, path }, onClick) => {\n const getText = challengeText[event];\n\n return typeof getText === 'function' ? getText(name, path, onClick, contest_type) : null;\n },\n // TODO: 11-2022\n // 1) :marked_incomplete is not being handled here.\n // 2) :approved is deprecated\n ChallengeEntry: (event, { name, path }, onClick) => (\n \n {`${event === 'awarded' ? 'Congratulations! ' : ''}Your entry for `}\n {createLink(path, name, onClick)}\n {`${event === 'awarded'\n ? ' has been awarded a prize. Follow instructions sent to your email to claim it.'\n : ' has been approved.'}`}\n \n ),\n // TODO: 11-2022\n // :awarded is deprecated\n ChallengeIdea: (event, { comm, challenge_name, challenge_path, idea_name }, onClick) => (\n \n {`Your idea ${idea_name} for `}\n {createLink(challenge_path, challenge_name, onClick)}\n {`${event === 'approved' ? ' has been approved.' : ' has won.'}`}\n \n ),\n // TODO: 11-2002\n // :mention, :mentioned are deprecated\n Comment: (event, { author_name, author_path, commentable_id, commentable_name, commentable_path, commentable_type, origin_name, parent_comment_author_id, post_author_id, post_author_name, relations }, onClick, currentUserId) => (\n \n {userLink(author_path, author_name, onClick)}\n {getCommentActionText({ currentUserId, parent_comment_author_id, relations })}\n {commentLink({ commentable_name, commentable_path, commentable_type, currentUserId, post_author_id, post_author_name }, onClick)}\n {origin_name ? ` in ${origin_name}` : '.'}\n \n ),\n FeedPost: (event, { author_name, author_path, post_path, origin_name, relations }, onClick, currentUserId) => (\n \n {userLink(author_path, author_name, onClick)}\n {isCurrentUserMentioned(relations, currentUserId) ? ' mentioned you in a ' : ' created a '}\n {createLink(post_path, 'new post', onClick)}\n {origin_name ? ` in ${origin_name}.` : '.'}\n \n ),\n FollowRelation: (event, { followed_id, followed_name, followed_path, follower_name, follower_path }, onClick, currentUserId) => (\n \n {createLink(follower_path, follower_name, onClick)}\n {' followed '}\n {followed_id === currentUserId ? 'you' : createLink(followed_path, followed_name, onClick)}\n .\n \n ),\n // GlobalAnnouncement: (event, {body_elements=[]}, onClick) => (\n // \n // {body_elements.map((elem, i) =>\n // \n // {elem.type === 'link' ? createLink(elem.href, elem.text, onClick) : elem.text}\n // )\n // }\n // \n // ),\n Member: (event, { group_name, group_path, user_name, user_path }, onClick, currentUserId) => (\n \n {createLink(user_path, user_name, onClick)}\n {event === 'accepted' ? ' has accepted your invitation to join ' : ' has invited you to join '}\n {createLink(group_path, group_name, onClick)}\n .\n \n ),\n Project: (event, { made_public_at, name, path }, onClick) => (projectMessage(event, { made_public_at, name, path }, onClick)),\n Receipt: (event, { user_name, user_path, conversation_path }, onClick) => (\n \n {createLink(user_path, user_name, onClick)}\n {' has sent you '}\n {createLink(conversation_path, 'a message', onClick)}\n .\n \n ),\n Respect: (event, { user_name, user_path, respectable_name, respectable_path, respectable_type }, onClick) => {\n const body = respectable_type === 'Comment'\n ? 'one of your comments'\n : respectable_type === 'FeedPost'\n ? 'one of your posts'\n : respectable_name;\n\n return (\n \n {createLink(user_path, user_name, onClick)}\n {' respected '}\n {createLink(respectable_path, body, onClick)}\n .\n \n );\n },\n User: (event, { name, path }, onClick) => (\n \n {createLink(path, name, onClick)}\n {' has accepted your invitation to join Hackster.'}\n \n ),\n};\n\n// eslint-disable-next-line react/display-name\nexport default function({ type, event, fields, currentUserId, onClick }) {\n return builders[type] ? builders[type](event, fields, onClick, currentUserId) : null;\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport Paginator from '../../../nav_components/paginator';\nimport Loader from '../../../reusable_components/Router/Loader';\nimport NotificationsList from './NotificationsList';\nimport PageHeader from '../../page_header';\n\nimport errorHandler from '../../../../services/error_handler';\nimport notificationsStore from '../../../../services/notifications_store';\nimport smoothScroll from '../../../utils/smoothScroll';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport util from '../../../../styles/global_ui/util.css';\n\n// TODO: When this page is loaded, we should probably reset the new_notification_count and update the Dropdown?\nclass Notifications extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentPage: 1,\n loading: true,\n notifications: notificationsStore.get('notifications'),\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.paginateTo = this.paginateTo.bind(this);\n\n this.updateSub = notificationsStore.getChannel().subscribe('notifications.markRead.#', this.handleChange);\n }\n\n componentDidMount() {\n this.paginateTo(1);\n smoothScroll(0, 300);\n }\n\n componentWillUnmount() {\n this.updateSub.unsubscribe();\n }\n\n handleChange(changes) {\n this.setState({ notifications: notificationsStore.get('notifications') });\n }\n\n paginateTo(pageNum) {\n this.setState({ loading: true });\n\n return notificationsStore.fetchPage(pageNum, 'FOR_DASHBOARD')\n .then(() => {\n this.setState({\n currentPage: pageNum,\n loading: false,\n notifications: notificationsStore.get('notifications'),\n });\n smoothScroll(0, 0);\n })\n .catch((err) => {\n this.setState({ loading: false });\n errorHandler('Error changing page:', err);\n });\n }\n\n render() {\n const { notifications, currentPage } = this.state;\n const pageKey = notificationsStore.getPageKey(currentPage);\n\n return (\n \n
\n );\n }\n}\n\nNotifications.propTypes = {\n currentUser: PropTypes.shape({ id: PropTypes.number }).isRequired,\n notifications: PropTypes.array,\n};\n\nNotifications.defaultProps = { notifications: [] };\n\nexport default Notifications;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ActionsSection from '../../../form_components/templates/ActionsSection';\nimport AvatarUploader from '../../../form_components/image_uploaders/avatar_uploader';\nimport BasicFormInput from '../../../form_components/inputs/basic_form_input';\nimport DecimalInput from '../../../form_components/inputs/decimal_input';\nimport FormLocationSelect from '../../../form_components/selects/form_location_select';\nimport FormSelect from '../../../form_components/selects/form_select';\nimport RadioGroup from '../../../form_components/inputs/radio_group';\n\nimport errorHandler from '../../../../services/error_handler';\nimport urlService from '../../../../services/url_service';\n\nimport { boolOrNullIn, boolOrNullOut, imageWithNestedFileIn, imageWithNestedFileOut, locationSelectIn, locationSelectOut, arrayToMultiSelectIn, multiSelectToArrayOut } from '../../../../utility/forms/formatters';\nimport { isBlank } from '../../../../utility/types';\nimport { filterObject } from '../../../../utility/filters';\nimport { getErrorForField, getFieldValuesAsObject, initFields, setIsBusy, scrollToError, setStateOrError, validateFields } from '../../../../utility/forms';\nimport { getFirstString } from '../../../../utility/accessors';\nimport {\n containsNoLinks,\n imageV,\n isDecimal,\n maxLength,\n minLength,\n} from '../../../../services/validation/validators';\nimport OAuth from '../../../../services/oauth';\nimport { summonGlobalMessenger } from '../../../../utility/dispatchers';\nimport { transformObjValues } from '../../../../utility/converters';\nimport { updateUserProfile } from '../../../../requests/dashboard';\n\nimport formStyles from '../../../../styles/global_ui/forms.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './profile_form.css';\n\nconst FIELDS_TEMPLATE = {\n avatar: {\n order: 0,\n validate: (value) => imageV(value),\n value: {},\n formatIn: imageWithNestedFileIn,\n formatOut: imageWithNestedFileOut,\n },\n available_for_hire: {\n order: 7,\n validate: () => null,\n value: null,\n formatIn: boolOrNullIn,\n formatOut: boolOrNullOut,\n notRequired: true,\n },\n bio: {\n order: 4,\n validate: (value) => {\n const tooManyChars = maxLength(140, value);\n if (tooManyChars) {\n return tooManyChars;\n }\n return containsNoLinks(value);\n },\n value: '',\n notRequired: true,\n },\n hourly_rate: {\n order: 8,\n validate: (value) => isDecimal(value),\n value: '',\n notRequired: true,\n },\n location: {\n order: 3,\n validate: (value) => null,\n value: {},\n notRequired: true,\n formatIn: locationSelectIn,\n formatOut: locationSelectOut,\n },\n name: { order: 1, validate: (value) => null, value: '', notRequired: true },\n skills: {\n order: 6,\n validate: (value) => null,\n value: [],\n notRequired: true,\n formatIn: (v) => arrayToMultiSelectIn(v),\n formatOut: (v) => multiSelectToArrayOut(v),\n },\n user_name: { order: 2, validate: (value) => minLength(3, value), value: '' },\n website: {\n order: 5,\n validate: (value) => null,\n value: '',\n notRequired: true,\n },\n};\n\nclass ProfileForm extends Component {\n constructor(props) {\n super(props);\n\n const storedFields = props.store.has(props.path) ? this._getStoredFields() : null;\n const fields = storedFields || initFields(FIELDS_TEMPLATE, this._nestLocation(props.currentUser));\n if (!storedFields) this._setStoredFields(fields);\n\n this.state = {\n errors: {},\n fields,\n hasUnsavedChanges: false,\n isBusy: false,\n warnings: {},\n workers: [],\n };\n\n // Form helpers\n this.getErrorForField = getErrorForField.bind(this);\n this.getFieldValuesAsObject = getFieldValuesAsObject.bind(this);\n this.setIsBusy = setIsBusy.bind(this);\n this.setStateOrError = setStateOrError.bind(this);\n this.validate = validateFields.bind(this);\n\n this.setStateAndFlagUnsaved = this.setStateAndFlagUnsaved.bind(this);\n this.discardChanges = this.discardChanges.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n /**\n * Methods\n */\n discardChanges() {\n this.setState({ fields: this._getStoredFields(), errors: {}, warnings: {} });\n\n this._flagUnsaved(false);\n summonGlobalMessenger({ msg: 'Your changes have been discarded.' });\n }\n\n handleSubmit() {\n if (!this.state.hasUnsavedChanges) return;\n const errors = this.state.errors;\n\n if (Object.keys(errors).length >= 1) {\n summonGlobalMessenger({\n msg: 'Unable to save changes. Please try again.',\n type: 'error',\n });\n return;\n }\n\n if (this.validate()) this._submitForm();\n }\n\n setStateAndFlagUnsaved(errorMsg, key, value) {\n this.setStateOrError(errorMsg, key, value);\n this._flagUnsaved(true);\n }\n\n /**\n * Helpers\n */\n _flagUnsaved(hasUnsavedChanges) {\n if (this.state.hasUnsavedChanges !== hasUnsavedChanges) {\n this.setState({ hasUnsavedChanges });\n this.props.store.set('showPrompt', hasUnsavedChanges);\n }\n }\n\n _flattenForSubmission(values) {\n return { ...values, ...values.location, avatar_id: values.avatar.id };\n }\n\n _getFieldErrorsFromServerError(err) {\n const filteredErrors = filterObject(\n OAuth.processApiRequestError(err),\n /* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n /* eslint-disable-next-line no-prototype-builtins */\n (val, key) => this.state.fields.hasOwnProperty(key),\n );\n\n return transformObjValues(filteredErrors, getFirstString);\n }\n\n _getProfilePath() {\n return urlService.url(`/${this.state.fields.user_name.value}`);\n }\n\n _getStoredFields() {\n return this.props.store.get(this.props.path).fields;\n }\n\n _isSubmitting() {\n return this.state.workers.includes('submit');\n }\n\n _nestLocation(values) {\n const { city, country_iso2, state, ...otherValues } = values;\n\n return { ...otherValues, location: { city, country_iso2, state } };\n }\n\n _setStoredFields(fields) {\n this.props.store.set(this.props.path, { fields });\n }\n\n _submitForm() {\n this.setIsBusy(true, 'submit');\n this.setState({ warnings: {} });\n\n const fields = { ...this.state.fields }; // make a shallow copy - trust that no mutations happen within field objects\n const values = this._flattenForSubmission(this.getFieldValuesAsObject(fields));\n\n return updateUserProfile(values)\n .then((profile) => {\n this.setIsBusy(false, 'submit');\n this._setStoredFields(fields);\n this._flagUnsaved(false);\n\n summonGlobalMessenger({ msg: this._getSavedMsg() });\n })\n .catch((err) => {\n this.setIsBusy(false, 'submit');\n const errors = this._getFieldErrorsFromServerError(err);\n\n if (!isBlank(errors)) {\n // field-specific errors exist, treat it like client-side validation\n this.setState({ errors }, () => scrollToError(errors, this.state.fields));\n } else {\n // Unkown server error, show the default message.\n summonGlobalMessenger({ msg: 'Unable to save changes. Please try again.', type: 'error' });\n errorHandler(err);\n }\n });\n }\n\n /**\n * Views\n */\n _getSavedMsg() {\n return (\n \n {'Your changes have been saved. '}\n View your profile.\n \n );\n }\n\n _validateBio(value) {\n const tooManyChars = maxLength(140, value);\n if (tooManyChars) {\n return tooManyChars;\n }\n return containsNoLinks(value);\n }\n\n render() {\n const isSubmitting = this._isSubmitting();\n\n return (\n \n
\n \n
\n )}\n \n \n View Profile\n \n
\n \n this.setIsBusy(status, 'avatar')}\n propagateUpload={(imageData) => this.setStateAndFlagUnsaved(null, 'avatar', imageData)}\n reportError={(error) => this.setState({ warnings: { ...this.state.warnings, avatar: error } })}\n warningText={this.state.warnings.avatar}\n />\n
\n \n
\n \n \n );\n }\n}\n\nProfileForm.propTypes = {\n classNames: PropTypes.shape({\n root: PropTypes.string,\n container: PropTypes.string,\n }),\n currentUser: PropTypes.shape({\n available_for_hire: PropTypes.bool,\n avatar: PropTypes.shape({\n file: PropTypes.shape({ url: PropTypes.string }),\n id: PropTypes.number,\n }),\n bio: PropTypes.string,\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n email: PropTypes.string,\n hourly_rate: PropTypes.number,\n id: PropTypes.number,\n name: PropTypes.string,\n skills: PropTypes.array,\n state: PropTypes.string,\n user_name: PropTypes.string,\n website: PropTypes.string,\n }),\n history: PropTypes.object,\n path: PropTypes.string.isRequired,\n store: PropTypes.object.isRequired,\n};\n\nProfileForm.defaultProps = {\n classNames: {\n root: '',\n container: '',\n },\n currentUser: {\n avatar: {},\n user_name: '',\n },\n enableMessenger: true,\n history: {},\n};\n\nexport default ProfileForm;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport InfiniteScroll from '../../../reusable_components/InfiniteScroll';\nimport Loader from '../../../reusable_components/Router/Loader';\nimport PageHeader from '../../page_header';\nimport EditableProjectsList from '../../../projects/projects_list/EditableProjectsList';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from '../dashboard/dashboard.css';\n\nconst ProjectsCategory = ({ category, currentUser, handleReorder, loadMore, projects, toggleRespect }) => {\n const loading = !projects;\n const numProjects = loading ? null : projects.metadata.total_records;\n\n return (\n \n
\n \n this.setStateAndFlagUnsaved(null, 'name', e.target.value)}\n value={this.state.fields.name.value}\n />\n
\n \n this.setStateAndFlagUnsaved(\n null,\n 'user_name',\n e.target.value,\n )}\n value={this.state.fields.user_name.value}\n />\n
\n \n this.setStateAndFlagUnsaved(null, 'location', location)}\n placeholder=\"E.g. Seattle, WA, USA\"\n renderDistanceInput={false}\n value={this.state.fields.location.value}\n />\n
\n \n this.setStateAndFlagUnsaved(\n this._validateBio(e.target.value),\n 'bio',\n e.target.value,\n )}\n placeholder=\"Hardware engineer specializing in embedded systems, circuit design, PCB layout, and low-level integration for IoT.\"\n value={this.state.fields.bio.value}\n />\n
\n {this.props.currentUser.stats.projects >= 1 && (\n \n this.setStateAndFlagUnsaved(\n null,\n 'website',\n e.target.value,\n )}\n value={this.state.fields.website.value}\n />\n
\n )}\n \n this.setStateAndFlagUnsaved(null, 'skills', skills)}\n placeholder=\"3D Printing\"\n searchOpts={{ rule: 'absolute' }}\n type=\"multi\"\n value={this.state.fields.skills.value}\n />\n
\n \n this.setStateAndFlagUnsaved(\n null,\n 'available_for_hire',\n e.target.value,\n )}\n value={this.state.fields.available_for_hire.value}\n />\n
\n {boolOrNullOut(this.state.fields.available_for_hire.value) && (\n \n this.setStateAndFlagUnsaved(\n null,\n 'hourly_rate',\n hourly_rate,\n )}\n value={this.state.fields.hourly_rate.value}\n />\n
\n )}\n \n
\n );\n};\n\nProjectsCategory.propTypes = {\n category: PropTypes.string.isRequired,\n currentUser: PropTypes.shape({ id: PropTypes.number }),\n handleReorder: PropTypes.func,\n loadMore: PropTypes.func,\n projects: PropTypes.shape({\n records: PropTypes.array,\n metadata: PropTypes.object,\n }),\n toggleRespect: PropTypes.func,\n};\n\nProjectsCategory.defaultProps = {\n currentUser: {},\n handleReorder: () => Promise.resolve(),\n loadMore: () => Promise.resolve(),\n projects: {\n records: [],\n metadata: { total_records: 0 },\n },\n toggleRespect: () => Promise.resolve(),\n};\n\nexport default ProjectsCategory;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport Loader from '../../../reusable_components/Router/Loader';\nimport PageHeader from '../../page_header';\nimport ProjectsSection from '../../projects_section';\n\nimport layout from '../../../../styles/global_ui/layout.css';\n\nconst ProjectsRoot = ({ currentUser, handleReorder, projects, toggleRespect }) => {\n const loading = !(projects.drafts && projects.public && projects.guest);\n\n const numProjects = loading\n ? null\n : ['drafts', 'public', 'guest'].reduce((memo, category) => (\n memo + projects[category].metadata.total_records\n ), 0);\n\n return (\n \n \n
\n \n
\n );\n};\n\nProjectsRoot.propTypes = {\n currentUser: PropTypes.shape({ id: PropTypes.number }),\n projects: PropTypes.shape({\n drafts: PropTypes.shape ({\n records: PropTypes.array,\n metadata: PropTypes.object,\n }),\n public: PropTypes.shape ({\n records: PropTypes.array,\n metadata: PropTypes.object,\n }),\n guest: PropTypes.shape ({\n records: PropTypes.array,\n metadata: PropTypes.object,\n }),\n }),\n};\n\nProjectsRoot.defaultProps = {\n currentUser: {},\n projects: {\n drafts: {\n records: [],\n metadata: { total_records: 0 },\n },\n public: {\n records: [],\n metadata: { total_records: 0 },\n },\n guest: {\n records: [],\n metadata: { total_records: 0 },\n },\n },\n};\n\nexport default ProjectsRoot;\n","export function setStore(store, projects) {\n ['drafts', 'public', 'guest'].forEach((category) => {\n if (projects[category]) {\n store.set(`projects/${category}`, { projects: { [category]: projects[category] } });\n }\n });\n}\n\nexport function updateRecords(updated, oldProjects, category = 'public', startIndex = 0) {\n const newRecords = oldProjects[category].records.slice(0, startIndex)\n .concat(updated)\n .concat(oldProjects[category].records.slice(startIndex + updated.length));\n\n return {\n ...oldProjects,\n [category]: {\n ...oldProjects[category],\n records: newRecords,\n },\n };\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport ProjectsCategory from './ProjectsCategory';\nimport ProjectsRoot from './ProjectsRoot';\n\nimport errorHandler from '../../../../services/error_handler';\nimport smoothScroll from '../../../utils/smoothScroll';\nimport { graphQuery } from '../../../../requests/graphql';\nimport { setStore, updateRecords } from './helpers';\nimport { summonGlobalMessenger } from '../../../../utility/dispatchers';\n\nimport { AUTHOR, PRIVATE, PUBLIC } from '../../../../graphql/projects/enums';\n\nclass Projects extends Component {\n constructor(props) {\n super(props);\n\n this.getExistingProjects = this.getExistingProjects.bind(this);\n this.getMissingProjects = this.getMissingProjects.bind(this);\n this.handleReorder = this.handleReorder.bind(this);\n this.loadMore = this.loadMore.bind(this);\n this.toggleRespect = this.toggleRespect.bind(this);\n\n const category = this.props.path.split('/').pop();\n const categories = props.isRoot ? ['drafts', 'public', 'guest'] : [category];\n const projects = this.getExistingProjects(categories);\n\n this.state = {\n category,\n projects,\n };\n }\n\n /**\n * Lifecycle Methods\n */\n componentDidMount() {\n smoothScroll(0, 300);\n this.getMissingProjects(this.props.isRoot ? ['drafts', 'public', 'guest'] : [this.state.category]);\n }\n\n /**\n * Methods\n */\n getExistingProjects(categories = ['drafts', 'public', 'guest']) {\n return categories.reduce((acc, category) => {\n const store = this.props.store.get(`projects/${category}`);\n const projects = store ? store.projects[category] : null;\n\n return { ...acc, [category]: projects };\n }, {});\n }\n\n getMissingProjects(categories = ['drafts', 'public', 'guest']) {\n // 5-13-2021 - Removed dynamic JS queries. Rails template \"get_projects_by_category_all\" is a potentially expensive request.\n // If there are projects missing from state (pulled from store), we must fetch all projects for the 3 categories.\n\n const emptyCategories = categories.filter((category) => this.state.projects[category] === null);\n const params = {\n author_id: this.props.currentUser.id,\n public_publication_state: PUBLIC,\n private_publication_state: PRIVATE,\n public_sort: AUTHOR,\n };\n\n return emptyCategories.length > 0\n ? graphQuery({ t: 'get_projects_by_category_all' }, params)\n .then((res) => {\n const projects = { ...this.state.projects, ...res };\n setStore(this.props.store, projects);\n this.setState({ projects });\n })\n .catch((err) => {\n summonGlobalMessenger({ msg: 'There was a problem loading projects. Please try again.', type: 'error' });\n errorHandler(`Error fetching projects ${err}`);\n })\n : Promise.resolve();\n }\n\n handleReorder(updated) {\n const oldProjects = this.state.projects;\n const newProjects = updateRecords(updated, oldProjects);\n this.setState({ projects: newProjects }); // Optimistic loading\n\n const formattedProjects = updated.map((project) => ({ projectHid: project.hid, projectPosition: project.position }));\n\n return graphQuery({ t: 'update_projects_position' }, { projects: formattedProjects })\n .then((res) => setStore(this.props.store, newProjects))\n .catch((err) => {\n this.setState({ projects: oldProjects });\n summonGlobalMessenger({ msg: 'Could not reorder projects. Please try again.', type: 'error' });\n errorHandler('Dashboard Projects', err);\n });\n }\n\n loadMore(category) {\n const { current_page, per_page } = this.state.projects[category].metadata;\n const { query, extendedParams } = this._getTemplateAndParamsFromCategory({ category, author_id: this.props.currentUser.id, page: current_page + 1, per_page });\n\n return graphQuery(query, extendedParams)\n .then((res) => {\n const projects = {\n ...this.state.projects,\n [category]: {\n metadata: res[category].metadata,\n records: this.state.projects[category].records.concat(res[category].records),\n },\n };\n setStore(this.props.store, projects);\n this.setState({ projects });\n })\n .catch((err) => {\n summonGlobalMessenger({ msg: 'There was a problem loading more projects. Please try again.', type: 'error' });\n errorHandler('Project Load Error:', err);\n });\n }\n\n toggleRespect(hid, createOrDeleteBool, category) {\n const oldProjects = this.state.projects;\n\n const records = oldProjects[category].records.map((record) => record.hid === hid\n ? {\n ...record,\n stats: {\n ...record.stats,\n respects: createOrDeleteBool ? record.stats.respects + 1 : Math.max(record.stats.respects - 1, 0),\n },\n }\n : record);\n\n const projects = {\n ...oldProjects,\n [category]: {\n metadata: oldProjects[category].metadata,\n records,\n },\n };\n\n this.setState({ projects });\n }\n\n /**\n * Helpers\n */\n _extendedParamsByCategory(category) {\n if (category !== 'public' && category !== 'drafts') return {};\n\n return category === 'public' ? { publication_state: PUBLIC, sort: AUTHOR } : { publication_state: PRIVATE };\n }\n\n _getTemplateAndParamsFromCategory({ category, ...params }) {\n const query = { t: `get_projects_by_category_${category}` };\n const extendedParams = { ...params, ...this._extendedParamsByCategory(category) };\n\n return { query, extendedParams };\n }\n\n render() {\n const { category, projects } = this.state;\n\n return this.props.isRoot\n ? (\n \n toggleRespect(id, createOrDeleteBool, category)}\n totalRecords={projects[category].metadata.total_records}\n />\n ))}\n
\n \n {links.map((link, i, list) => (\n \n {\n link.href\n ? {link.text}\n : link.callback && !link.isCurrentView\n ? link.callback()}>{link.text}\n : link.isCurrentView\n ? {link.text}\n : {link.text}\n }\n {i !== list.length - 1 && >}\n \n ))}\n
\n );\n};\n\nBreadcrumbs.propTypes = {\n classList: PropTypes.shape({\n linkContainer: PropTypes.string,\n link: PropTypes.string,\n arrow: PropTypes.string,\n current: PropTypes.string,\n }),\n links: PropTypes.array, // link object => { text: '', href: '' }\n};\nBreadcrumbs.defaultProps = {\n classList: {},\n links: [],\n};\n\nexport default Breadcrumbs;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport ContentPlaceholder from '../../reusable_components/ContentPlaceholder';\nimport Breadcrumbs from './breadcrumbs';\nimport { transition, history } from '../../reusable_components/Router';\n\nimport { labels } from '../projects_section';\nimport urlService from '../../../services/url_service';\n\nimport buttonStyles from '../../../styles/global_ui/buttons.css';\nimport styles from './page_header.css';\n\nfunction getPlaceholderType(category) {\n return category === 'drafts'\n ? 'no-draft-projects'\n : 'no-projects';\n}\n\nconst headerValues = {\n notifications: ({ count }) => ({\n header: (\n \n Notifications\n \n Notification settings\n \n
),\n subHeader: count === 0\n ? \n {breadcrumbs\n && (\n
\n {showProjectButton\n && (\n \n \n
\n);\n\nexport default DummyPlatformMemberList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport GridList from '../../wrappers/grid_list';\n\nimport PlatformMemberCard from '../cards/platform_member_card';\n\nconst renderContentPlaceholder = () => (\n There are no members
\n);\n\nconst PlatformMemberList = ({ isLoading, records }) => (\n \n
\n {totalRecords > displayCount\n\n && (\n ):\n * renderReact will use the key to find any mounted components in the dom and hydrate them. Hypernova renders script tags below the mounting\n * elements which hold the props for its matching component. If a component doesn't exist on the page (no matching dom nodes), renderReact will\n * skip over any mounting logic.\n */\nexport default function renderHypernovaClient() {\n for (const component in components) {\n renderReact(component, components[component]);\n }\n}\n","/**\n * Components exported here are what Hacksternova uses to match the component by key.\n */\nimport ActiveFeedbackSurvey from '../client/reusable_components/ActiveFeedbackSurvey';\nimport Business from '../scenes/business';\nimport CategoryTagDropdown from '../server/projects/category_tag_dropdown';\nimport ChannelPage from '../scenes/channel_page';\nimport ChannelsPage from '../scenes/channels_page';\nimport ContentTypeSelector from '../server/projects/content_type_selector/app';\nimport ContestBriefPage from '../scenes/contest_page/brief';\nimport ContestEntrySubmitForm from '../scenes/contest_page/entry/submit_form';\nimport ContestIdeaPage from '../scenes/contest_page/idea';\nimport ContestIdeaForm from '../scenes/contest_page/idea/idea_form';\nimport ContestIdeasPage from '../scenes/contest_page/ideas';\nimport ContestsPage from '../scenes/contests_page';\nimport Dashboard from '../client/user/edit/dashboard';\nimport EventsHomePage from '../scenes/events/events_home_page';\nimport FeedbackSurvey from '../client/reusable_components/FeedbackSurvey';\nimport FeedPage from '../scenes/feed_page';\nimport HomePage from '../scenes/home_page';\nimport ImageCarousel from '../server/projects/image_carousel';\nimport MembershipPage from '../scenes/tiers/membership_page';\nimport HacksterLogo from '../client/reusable_components/HacksterLogo';\nimport MobileNav from '../client/nav/mobile_nav';\nimport ModularAd from '../client/ads/modular_ad/ModularAd';\nimport NewsArticlePage from '../scenes/news/article_page';\nimport NewsHomePage from '../scenes/news/home_page';\nimport NotificationDropdown from '../server/layouts/notification_dropdown';\nimport Projects from '../scenes/projects_page';\nimport ProsAboutPage from '../scenes/tiers/pros_page';\nimport Search from '../server/search';\nimport SearchInput from '../server/search/input';\nimport TopNav from '../client/nav/top_nav';\nimport UserOnboardingPage from '../scenes/user_onboarding_page';\nimport UserProfile from '../server/user/profile';\nimport UserRelationButton from '../server/user/relation_button';\nimport VideoPage from '../scenes/video_page';\nimport VideosPage from '../scenes/videos_page';\nimport WhitelabelPage from '../scenes/whitelabel_page';\nimport WhitelabelSearchInput from '../server/search/whitelabel_input';\n\nexport default {\n ActiveFeedbackSurvey,\n Business,\n CategoryTagDropdown,\n ChannelPage,\n ChannelsPage,\n ContentTypeSelector,\n ContestBriefPage,\n ContestEntrySubmitForm,\n ContestIdeaForm,\n ContestIdeaPage,\n ContestIdeasPage,\n ContestsPage,\n Dashboard,\n EventsHomePage,\n FeedPage,\n FeedbackSurvey,\n HomePage,\n ImageCarousel,\n HacksterLogo,\n MobileNav,\n MembershipPage,\n ModularAd,\n NewsArticlePage,\n NewsHomePage,\n NotificationDropdown,\n Projects,\n ProsAboutPage,\n Search,\n SearchInput,\n TopNav,\n UserOnboardingPage,\n UserProfile,\n UserRelationButton,\n VideoPage,\n VideosPage,\n WhitelabelPage,\n WhitelabelSearchInput,\n};\n","import getAlgoliaIndex from '../services/algolia/getAlgoliaIndex';\n\nexport function searchTags(query) {\n return new Promise((resolve, reject) => getAlgoliaIndex('tags').search(query, { hitsPerPage: 5 })\n .then((res) => resolve(res))\n .catch((err) => reject(err)));\n}\n","import request from 'superagent';\nimport OAuth from '../services/oauth';\n\nexport function updateChallengeRegistration(data) {\n return OAuth.apiRequest(\n request\n .patch(`${OAuth.getApiPath()}/private/challenge_registrations`)\n .send(data),\n true,\n false,\n );\n}\n","import request from 'superagent';\nimport OAuth from '../services/oauth';\n\nexport function updateUserProfile(form) {\n return OAuth.apiRequest(\n request\n .patch(`${OAuth.getApiPath()}/private/users/update_me`)\n .send(form),\n true,\n );\n}\n","import React from 'react';\n\nimport LazyImage from '../../../client/reusable_components/LazyImage';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\nimport styles from './channels.css';\n\nconst c = {\n section: `${layout.flexColumn} ${layout.gutter30}`,\n headingP: `${typography.bodyM} ${typography.staticCharcoal}`,\n listWrapper: `${layout.flexJustifySpaceBetween} ${typography.staticCharcoal} ${styles.listsWrapper}`,\n p: `${typography.bodyM} ${typography.bold} ${typography.staticCharcoal} ${layout.marginBottom10}`,\n ul: `${typography.bodyM} ${typography.staticCharcoal}`,\n imageWrapper: `${layout.flexJustifySpaceBetween} ${layout.flexCenterItems} ${layout.gutter30} ${styles.imageWrapper}`,\n image: `${util.bgTransparent} ${layout.heightAuto}`,\n};\n\nconst Channels = () => (\n \n \n Platform and Community Hubs are the quickest and most effective way to begin engaging the global Hackster community around products or shared interests within your own branded space. Post announcements, tutorials from your team, engineering resources, or any other content of your choosing. Think of a hub as your dedicated page on Hackster.io. The best part? Hubs are 100% free and 100% self-managed. There's no need to go through a Hackster admin to promote your latest content or directly engage with developers.\n
\n \n \n Hub Features and Capabilities:
\n \n - Home tab with customizable sections to highlight content
\n - Discussion board
\n - Products catalog
\n - Project gallery
\n - Intuitive admin interface
\n
\n \n \n Why Start a Hub?
\n \n - Create a branded channel for your platform or interest group
\n - Connect with your users and members
\n - Grow your follower base
\n - Gain insights on what developers are doing with your products
\n
\n \n \n \n \n);\n\nexport default Channels;\n","import React from 'react';\n\nimport LazyImage from '../../../client/reusable_components/LazyImage';\nimport TextImageSection from './TextImageSection';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\nimport styles from './imageLinks.css';\nimport { c as sectionStyles } from './TextImageSection';\n\nconst c = {\n section: `${layout.flexColumn} ${layout.gutter15} ${layout.paddingBottom30}`,\n text: `${typography.bodyM} ${typography.staticCharcoal}`,\n image: `${util.bgTransparent} ${layout.fullWidth}`,\n bannersWrapper: `${layout.flexJustifyCenter} ${layout.gutter10} ${styles.imageWrapper}`,\n};\n\nconst Contests = () => (\n <>\n \n \n Want to increase technology adoption, drive customer expansion, and build a rich user-generated project collection? Hackster contests enable you to reach a global community, get direct feedback from engineers about your product, and activate that community of engineers to generate content that include a creative, well-documented, and high-quality showcase of your product.\n
\n \n We know contests like the back of our hands, and we also know how complicated they can be to manage. Hackster's SaaS contest tool and suite of services help take the complexity out of running contests for our partners while providing a smooth experience and interface for participants.\n
\n \n \n Intuitive interface \n Customizable contest landing page \n Judging/entries management \n Live analytics dashboard \n Discussion and announcement board \n Easy-to-use project builder for participants \n Automated email reminders to participants \n Project submissions gallery that automatically syncs to your branded channel \n Integrated hardware application form \n Automatic badges for winning entrants' profiles and projects \n \n )}\n images={[\n { alt: 'Contest creation app', ratio: '658:496', src: 'contest_creation', width: 329 },\n ]}\n title=\"Industry-Leading SaaS Contest Tool\"\n />\n\n \n Dedicated project manager \n Contest marketing and promotion \n Hardware applications facilitation \n Global hardware/prize distribution \n Technical webinar/workshop or office hours facilitation \n …and more! \n \n )}\n images={[\n { alt: 'Infineon contest example', ratio: '380:360', src: 'infineon_contest', width: 190 },\n { alt: 'Build2gether inclusive innovation challenge example', ratio: '392:360', src: 'build_2_together_contest', width: 196 },\n ]}\n title=\"Scalable Services for Every Level of Design Contest\"\n />\n\n \n Get Inspired by These Cool Example Contests
\n \n \n \n);\n\nexport default Contests;\n","import React from 'react';\n\nimport LazyImage from '../../../client/reusable_components/LazyImage';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\nimport styles from './imageLinks.css';\n\nconst c = {\n section: `${layout.flexColumn} ${layout.gutter30}`,\n text: `${typography.bodyM} ${typography.staticCharcoal}`,\n columnWrapper: `${layout.flexColumn} ${layout.gutter10}`,\n boldText: `${typography.bodyM} ${typography.bold} ${typography.staticCharcoal}`,\n columnWrapper20: `${layout.flexColumn} ${layout.gutter20}`,\n imageWrapper: `${layout.flexJustifyCenter} ${layout.gutter10} ${styles.imageWrapper}`,\n image: `${util.bgTransparent} ${layout.fullWidth}`,\n};\n\nconst DevEngagement = () => (\n \n \n We craft bespoke developer engagement programs to fit your specific business goals — whether it be brand awareness, product training, collect feedback, or to understand developer preferences. Our programs are constructed by taking your audience and goals and adding in our expertise and out of the box engagement tactics in order to create a customized experience for you and your community.\n
\n \n Why consider a bespoke program?
\n \n Developer engagement isn't something that happens overnight. We design our programs to be interactive and run anywhere from 3-9+ months, allowing community members to become fully immersed with our partners' brand and products, while enabling our partners to gain deeper insights from participants.\n
\n \n \n \n);\n\nexport default DevEngagement;\n","import React from 'react';\n\nimport TextImageSection from './TextImageSection';\n\nimport typography from '../../../styles/global_ui/typography.css';\nimport styles from './events.css';\n\nconst c = {\n text: `${typography.bodyM} ${typography.staticCharcoal}`,\n sectionRoot: styles.sectionRoot,\n};\n\nconst Events = () => (\n <>\n \n Host your next event with Hackster to expand your guest list and make logistics a breeze! You bring the content and speakers; we'll invite all our friends (and a few new faces too) to the party, create a relaxed and engaging atmosphere, and do all the heavy lifting.\n
\n \n Webinars \n Half-day workshops \n Single or multi-day seminars \n \n )}\n images={[\n { alt: 'Infineon and Hackster.io event webinar', ratio: '516:258', src: 'infineon_event', width: 258 },\n { alt: 'Intel event: The secret behind AI Optimization', ratio: '402:258', src: 'intel_event', width: 201 },\n ]}\n title=\"What Types of Events Can Hackster Host?\"\n />\n\n \n Dedicated project manager \n Online virtual hosting \n Event moderator \n Custom landing page \n Lead capture form \n Registration management and email reminders \n Recorded sessions \n Marketing and promotion \n Post-event reporting \n Completion certificates for participants \n \n )}\n images={[\n { alt: 'Make: Hangout and Nerdout event', ratio: '1:1', src: 'make_event', width: 237 },\n { alt: 'DevAcademy event with Nordic', ratio: '448:474', src: 'nordic_event', width: 224 },\n ]}\n title=\"Turn-key Event Logistics\"\n />\n \n);\n\nexport default Events;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TextImageSection from './TextImageSection';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\nimport styles from './marketing.css';\n\nconst c = {\n center: typography.textCenter,\n number: `${typography.h1Responsive} ${layout.marginBottom0} ${typography.hackster}`,\n text: `${typography.bodyM} ${typography.staticCharcoal}`,\n section: `${layout.paddingBottom30} ${util.borderBottom}`,\n header: `${typography.h4} ${typography.staticCharcoal} ${layout.marginBottom22}`,\n reach: `${layout.flexJustifySpaceAround} ${layout.gutter22} ${styles.reach}`,\n imageHeader: `${typography.textCenter} ${typography.bodyM} ${typography.staticCharcoal} ${typography.bold} ${layout.marginBottom22} ${styles.imageHeader}`,\n brandsWrapper: styles.brandsWrapper,\n};\n\nconst Reach = ({ number, text }) => (\n \n {number}
\n {text}
\n \n);\n\nReach.propTypes = {\n number: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n};\n\nconst MonthlyReach = () => (\n <>\n \n Monthly Average Reach
\n \n \n Our team of creators and network of community contributors set the bar high for content that always puts the developer first. The result? Authentic, relatable, and informative content that your audiences WANT to see in a variety of formats including project tutorials, deep dives, videos, article series, demos, unboxings, white papers, and more.\n }\n images={[\n { alt: 'Screenshot of unboxing video showcasing Raspberry Pi Pico W', ratio: '578:324', src: 'pico_w_unboxing', width: 289 },\n ]}\n title=\"Engaging Content Creation\"\n />\n\n We keep our eyes on the prize — getting eyes on your ads. Each ad campaign is optimized based on personas, regions, or topics and placed in premium Hackster-owned properties and channels.}\n images={[\n { alt: 'Example Meta post for Anker', ratio: '228:410', src: 'anker_ad', width: 114 },\n { alt: 'Example X post for AMD Space Webinar', ratio: '348:410', src: 'space_webinar', width: 174 },\n ]}\n title=\"Targeting Advertising\"\n />\n\n Hackster News is a go-to source for hardware news, from the biggest launches to niche happenings in the industry with more than 550,000 monthly readers. Our writing staff is made up of technical contributors across a spectrum of specialties who generate articles that are not only read by our audience but also reach and are picked up by peer publications.}\n imageHeader={Featured on
}\n images={[\n { alt: 'Logo for TC', ratio: '88:44', src: 'tc', width: 44 },\n { alt: 'Logo for TNW', ratio: '170:44', src: 'tnw', width: 85 },\n { alt: 'Logo for Fast Company', ratio: '224:34', src: 'fast_company', width: 112 },\n { alt: 'Logo for Digital Trends', ratio: '212:38', src: 'digital_trends', width: 106 },\n { alt: 'Logo for Gizmodo', ratio: '208:30', src: 'gizmodo', width: 104 },\n { alt: 'Logo for Forbes', ratio: '140:36', src: 'forbes', width: 70 },\n { alt: 'Logo for Engadget', ratio: '170:38', src: 'engadget', width: 85 },\n { alt: 'Logo for Fortune', ratio: '160:36', src: 'fortune', width: 80 },\n ]}\n title=\"Hackster News\"\n />\n \n);\n\nexport default MonthlyReach;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport LazyImage from '../../../client/reusable_components/LazyImage';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\nimport styles from './textImageSection.css';\n\nexport const c = {\n section: styles.section,\n content: styles.content,\n header: `${typography.h4} ${typography.staticCharcoal} ${layout.marginBottom10}`,\n imageWrapper: styles.imageWrapper,\n transparent: util.bgTransparent,\n};\n\nconst TextImageSection = ({ classList, content, images, imageHeader, title }) => (\n \n \n {title}
\n {content}\n \n \n {imageHeader && imageHeader}\n \n {images.map((image, i) => (\n \n);\n\nTextImageSection.propTypes = {\n classList: PropTypes.shape({ imageWrapper: PropTypes.string, root: PropTypes.string }),\n content: PropTypes.node.isRequired,\n images: PropTypes.arrayOf(PropTypes.shape({\n alt: PropTypes.string.isRequired,\n ratio: PropTypes.string.isRequired,\n src: PropTypes.string.isRequired,\n width: PropTypes.number.isRequired,\n })),\n title: PropTypes.string.isRequired,\n};\n\nTextImageSection.defaultProps = { classList: { imageWrapper: '', root: '' } };\n\nexport default TextImageSection;\n","import React from 'react';\n\nimport LazyImage from '../../client/reusable_components/LazyImage';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport util from '../../styles/global_ui/util.css';\nimport styles from './business.css';\n\nconst c = {\n section: `${layout.wrapper1170} ${layout.flexColumnCenterCenter} ${layout.marginAuto} ${layout.padding015} ${typography.textCenter} ${styles.community}`,\n header: `${typography.h3Responsive} ${typography.bold} ${typography.hackster} ${layout.margin0} ${layout.marginBottom10}`,\n subHeading: `${typography.h1Responsive} ${typography.staticCharcoal}`,\n imageWrapper: `${layout.flexJustifyCenter} ${layout.flexCenterItems} ${layout.fullWidth} ${styles.imageWrapper}`,\n transparent: util.bgTransparent,\n image: `${util.bgTransparent} ${layout.fullWidth}`,\n};\n\nconst Community = () => (\n \n Our Community Members
\n Real users, real customers, real engagement.
\n \n \n\n);\n\nexport default Community;\n","import React from 'react';\n\nimport AnchorButton from '../../client/buttons/anchor';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport styles from './business.css';\n\nconst c = {\n section: `${layout.flexColumnCenterCenter} ${typography.textCenter} ${styles.footer}`,\n wrapper: layout.wrapper1170,\n header: `${typography.h1Responsive} ${typography.bold} ${typography.staticWhite} ${layout.margin0} ${layout.marginBottom10}`,\n text: `${typography.h4} ${typography.staticWhite} ${typography.fontWeightNormal}`,\n};\n\nconst Connect = () => (\n \n \n Let's connect
\n Our team is here to help design custom programs and packages to meet your company's unique objectives.
\n \n Contact Me\n \n \n \n);\n\nexport default Connect;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Accordion from '../../client/reusable_components/Accordion/Accordion';\nimport Contests from './AccordionContent/Contests';\nimport Channels from './AccordionContent/Channels';\nimport DevEngagement from './AccordionContent/DevEngagement';\nimport Events from './AccordionContent/Events';\nimport LazyImage from '../../client/reusable_components/LazyImage';\nimport MonthlyReach from './AccordionContent/Marketing';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport util from '../../styles/global_ui/util.css';\nimport styles from './business.css';\n\nconst c = {\n title: `${layout.flexCenterCenter} ${layout.gutter30} ${styles.accordionTitle}`,\n image: `${util.bgTransparent} ${layout.flexCenterCenter} ${styles.accordionIcon}`,\n section: `${layout.wrapper1170} ${layout.flexColumnCenterCenter} ${typography.textCenter} ${styles.expertise}`,\n header: `${typography.h3Responsive} ${typography.bold} ${typography.hackster} ${layout.margin0} ${layout.marginBottom10}`,\n subHeading: `${typography.h1Responsive} ${typography.staticCharcoal} ${layout.marginBottom30}`,\n accordionWrapper: `${layout.flexColumn} ${layout.fullWidth} ${layout.gutter15} ${typography.textLeft}`,\n accordion: `${layout.flexColumn} ${styles.accordion}`,\n accordionDetails: `${util.bgStaticWhite} ${typography.staticCharcoal}`,\n};\n\nconst Title = ({ iconSrc, title }) => (\n \n \n Our Expertise
\n What can we do for you?
\n \n \n\n);\n\nexport default Expertise;\n","import React from 'react';\n\nimport LazyImage from '../../client/reusable_components/LazyImage';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport styles from './business.css';\n\nconst c = {\n section: `${layout.flexCenterCenter} ${layout.gutter5} ${layout.fullWidth} ${styles.hero}`,\n header: `${typography.h1Responsive} ${typography.staticWhite}`,\n subHeading: `${typography.h3Responsive} ${typography.fontWeightNormal} ${typography.staticWhite}`,\n rightImage: styles.rightImage,\n};\n\nconst Hero = () => (\n \n \n Hackster for business
\n The biggest names in tech partner with Hackster.io because we are one of the largest and most trusted hardware developer communities in the world.
\n \n \n);\n\nexport default Hero;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport LazyImage from '../../client/reusable_components/LazyImage';\n\nimport TopSwoosh from './TopSwoosh';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport util from '../../styles/global_ui/util.css';\nimport styles from './business.css';\n\nconst c = {\n section: styles.partnersWrapper,\n bgWrapper: `${util.bgStaticWhite} ${styles.partnersBG}`,\n partners: `${layout.wrapper1170} ${layout.wrapper1170} ${layout.flexColumnCenterCenter} ${layout.marginAuto} ${layout.padding015} ${layout.flexRow} ${styles.partners}`,\n header: `${typography.h3Responsive} ${typography.bold} ${typography.hackster} ${layout.margin0} ${layout.marginBottom10}`,\n subHeading: `${typography.h1Responsive} ${typography.staticCharcoal}`,\n text: `${typography.staticCharcoal}`,\n ul: `${util.ulReset} ${layout.flexRowWrap} ${styles.logos}`,\n logo: layout.flexCenterCenter,\n transparent: util.bgTransparent,\n};\n\nconst Partners = ({ logos }) => (\n \n Our Partners
\n Who we work with
\n Our partners, ranging from industry leaders to startups, fuel our collaborative ecosystem. Together, we drive innovation, share knowledge, and contribute to the ever-evolving tech landscape. Join us in shaping the future of technology.
\n \n \n {logos.map((logo) => (\n - \n
\n ))}\n
\n \n \n \n\n);\n\nPartners.propTypes = {\n logos: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n src: PropTypes.string.isRequired,\n })).isRequired,\n};\n\nexport default Partners;\n","import React from 'react';\n\nconst TopSwoosh = () => (\n \n);\n\nexport default TopSwoosh;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Community from './Community';\nimport Connect from './Connect';\nimport Expertise from './Expertise';\nimport Hero from './Hero';\nimport Partners from './Partners';\n\nimport styles from './business.css';\n// TODO: case studies! pdf downloads? or maybe just links?\nconst Business = ({ logos }) => (\n \n \n);\n\nBusiness.propTypes = {\n logos: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string.isRequired,\n src: PropTypes.string.isRequired,\n })).isRequired,\n};\n\nexport default Business;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ButtonDropdown from '../../../client/buttons/button_dropdown';\nimport Icon from '../../../client/icon';\n\nimport styles from './admin_menu.css';\nimport dropdownStyles from '../../../styles/common-dropdown.css';\nimport buttonStyles from '../../../styles/global_ui/buttons.css';\n\nclass AdminMenu extends Component {\n constructor(props) {\n super(props);\n }\n\n _renderOptions() {\n return this.props.menu.map((item, i) => (\n \n {item.label}\n \n ));\n }\n\n _renderLabel(open = false) {\n return (\n \n \n Settings\n \n \n {this._renderOptions()}\n
\n \n );\n }\n}\n\nAdminMenu.propTypes = {\n canManage: PropTypes.bool,\n menu: PropTypes.arrayOf(PropTypes.shape({\n label: PropTypes.string,\n url: PropTypes.string,\n })).isRequired,\n};\n\nAdminMenu.defaultProps = { canManage: null };\n\nexport default AdminMenu;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ErrorPage from '../../../client/reusable_components/Router/ErrorPage';\nimport Loader from '../../../client/reusable_components/Router/Loader';\n\nimport { graphQuery } from '../../../requests/graphql';\nimport errorHandler from '../../../services/error_handler';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\n\nclass Analytics extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n analytics: null,\n initialized: false,\n };\n }\n\n componentDidMount() {\n if (this.props.initialized && this.props.permitAdminView()) {\n this._fetchUrl();\n }\n }\n\n componentDidUpdate(prevProps) {\n if (!this.state.initialized && (this.props.initialized && !prevProps.initialized)) {\n this._fetchUrlOrInitialize();\n }\n }\n\n // The MODE iframeUrl works once per request, so when we navigate away from this view and come back we're forced to\n // fetch another url. DidMount will handle the fetch when the user navigates via the Router. DidUpdate handles the fetch\n // when this route is the landing page via url. PlatformPage fetches permissions first, initializes then we deal with the logic\n // to grab the url or not.\n _fetchUrl() {\n return graphQuery({ t: 'get_channel_analytics' }, { id: this.props.platformId })\n .then(({ channel }) => {\n this.setState({\n analytics: channel.analytics,\n initialized: true,\n });\n this.props.seoHandler(this.props.path, this.props.history);\n })\n .catch((err) => errorHandler('Platform Page Analytics: ', err));\n }\n\n _fetchUrlOrInitialize() {\n if (this.props.permitAdminView()) {\n this._fetchUrl();\n } else {\n this.setState({ initialized: true });\n }\n }\n\n /**\n * Views\n */\n _getAnalyticsView() {\n return (\n \n \n seoHandler.reportView({ path, data: channel }),\n transition: (path) => handleProjectsTransition(path, { scrollTo: 'reactSceneHeader' }, 'sort=trending'),\n viewAllBuilderArg: () => ({ type: channel_type, props: { [channel_type]: channel } }),\n }}\n />\n);\n\nconst getProjectsRoute = ({ channel, currentHistoryData, filters, path = '/projects', seoHandler, userPermissions }) => (\n seoHandler.reportView({ path, data: channel }),\n }}\n />\n);\n\nconst getDiscussionRoutes = ({ channel, currentUser, discussion_props, pathHelpers, seoHandler }) => {\n const routerProps = {\n currentUser,\n origin: discussion_props.origin,\n pathHelpers,\n pathPrefix: 'discussion',\n seoHandler: () => seoHandler.reportView({ path: '/discussion', data: channel }),\n };\n\n return [\n seoHandler.reportView({ path, data: channel }),\n transition: (route, partSlug, e) => handleProductTransition(route, partSlug, { scrollTo: 'reactSceneHeader' }, '', e),\n }}\n />,\n seoHandler.reportView({ path, data: { part, platform: channel } }),\n transition: handleProductTransition,\n }}\n />,\n seoHandler.reportView({ path, data: { part, platform: channel } }),\n transition: handleProductTransition,\n }}\n />,\n ]\n);\n\nconst getMembersRoute = ({ channel, channel_type, currentHistoryData, seoHandler }) => (\n seoHandler.reportView({ path, data: channel }),\n }}\n />\n);\n\n// currently only used with platforms. If this ever changes, generalize platform-specific props\nconst getAnalyticsRoute = ({ basePath, channel, initialized, seoHandler, transition, userPermissions }) => (\n permitAdminView(userPermissions),\n platformId: channel.id,\n transition: (history, route) => transition(history, route),\n seoHandler: (path) => seoHandler.reportView({ path, data: channel }),\n }}\n />\n);\n\n/**\n * Channel-type specific route getters\n */\nconst getRouteComponentsForCommunity = (props) => (\n [\n getHomeRoute(props),\n getProjectsRoute(props),\n ...getDiscussionRoutes(props),\n getMembersRoute(props),\n ]\n);\n\nconst getRouteComponentsForPlatform = (props) => (\n [\n getHomeRoute(props),\n getProjectsRoute(props),\n ...getDiscussionRoutes(props),\n ...getProductRoutes(props),\n getMembersRoute(props),\n getAnalyticsRoute(props),\n ]\n);\n\nconst getRouteComponentsForTopic = (props) => (\n [\n getHomeRoute(props),\n getProjectsRoute(props),\n ...getDiscussionRoutes(props),\n getMembersRoute(props),\n ]\n);\n\n/**\n * exports\n */\nexport const getConfigForChannelType = (channelType) => {\n switch (channelType) {\n case 'community':\n return {\n getRouteComponents: getRouteComponentsForCommunity,\n routes: COMMUNITY_ROUTES,\n seoConfig: communitySeoConfig,\n };\n\n case 'platform':\n return {\n getRouteComponents: getRouteComponentsForPlatform,\n routes: PLATFORM_ROUTES,\n seoConfig: platformSeoConfig,\n };\n\n case 'topic':\n return {\n getRouteComponents: getRouteComponentsForTopic,\n routes: TOPIC_ROUTES,\n seoConfig: topicSeoConfig,\n };\n\n default:\n errorHandler('Invalid channel type:', channelType);\n\n return null;\n }\n};\n","import React from 'react';\nimport { getCategoryEnum } from '../../../graphql/feed_posts/enums';\nimport CategoryBadgeLabel from '../../../client/discussion/templates/CategoryBadgeLabel';\n\n// TODO: DRY out duplicated code between this and app/react/scenes/contest_page/discussion/categoryConfig.js\n\nconst CATEGORY_CONFIGS = [\n {\n colorClass: 'categoryGreenBG',\n enum: getCategoryEnum('Announcements'),\n path: getCategoryEnum('Announcements').toLowerCase(),\n text: 'Announcements from the admin team',\n title: 'Announcements',\n },\n {\n colorClass: 'categoryCobaltBG',\n enum: getCategoryEnum('General'),\n path: getCategoryEnum('General').toLowerCase(),\n text: 'Share ideas, chat and interact with other members',\n title: 'General',\n },\n {\n colorClass: 'categoryRoseBG',\n enum: getCategoryEnum('Technical help'),\n path: getCategoryEnum('Technical help').toLowerCase(),\n text: 'Getting started, hardware troubleshooting and project help',\n title: 'Technical help',\n },\n];\n\nconst getCategoriesForSelect = (categoryConfigs, labelFn = null) => categoryConfigs.map((config) => ({\n label: (labelFn && typeof labelFn === 'function') ? labelFn(config) : config.title,\n labelText: config.title,\n value: config.enum,\n}));\n\nexport const createCategoryConfigs = () => ({\n CATEGORY_CONFIGS: CATEGORY_CONFIGS,\n SELECT_CATEGORIES: getCategoriesForSelect(CATEGORY_CONFIGS, (categoryConfig) => (\n {routes.map((route, i) => (\n \n transition(route.href)}\n redirect={route.redirect}\n />\n \n ))}\n
\n \n);\n\nNavBar.propTypes = {\n currentPath: PropTypes.string.isRequired,\n externalLinkRoot: PropTypes.string.isRequired,\n isWorking: PropTypes.bool.isRequired,\n routes: PropTypes.arrayOf(PropTypes.shape({\n href: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n transition: PropTypes.func.isRequired,\n};\n\nNavBar.defaultProps = {};\n\nexport default NavBar;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AdminMenu from './../admin_menu';\nimport BasicImage from '../../../client/image/BasicImage';\nimport NavBar from './NavBar';\nimport UserRelationButton from '../../../server/user/relation_button';\n\nimport styles from './header.css';\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\n\nconst isWebsiteLinkAvailable = ({ websites }) => !!websites && !!websites.website_link;\n\nconst shouldRenderWebsiteLink = function(model) {\n const hasCTA = model.call_to_action && model.call_to_action.url;\n\n return hasCTA // Do not render website link if its the same as CTA.\n ? isWebsiteLinkAvailable(model) && model.websites.website_link !== model.call_to_action.url\n : isWebsiteLinkAvailable(model);\n};\n\nconst Header = ({\n admin_menu,\n currentPath,\n initPath,\n initialized,\n isWorking,\n model,\n newFeatureMsg,\n routes,\n transition,\n userPermissions,\n}) => (\n \n {newFeatureMsg()}\n\n \n \n \n \n {(model.logo_url || model.avatar_url) && (\n \n \n {model.name}\n
\n {model.about && (\n \n {model.about}\n \n )}\n {model.call_to_action\n && model.call_to_action.label\n && model.call_to_action.url && (\n \n {model.call_to_action.label}\n \n )}\n\n {shouldRenderWebsiteLink(model) && (\n \n Visit website\n \n )}\n \n \n\n \n {initialized && userPermissions.channelRole !== 'admin' && (\n transition(history, route)}\n userPermissions={this.state.userPermissions}\n />\n );\n }\n\n render() {\n return (\n \n this._onRouterUpdate(pathData, action)}\n >\n {/* need to pre-build this flat array of children in order to appease the Router component */}\n {React.Children.toArray(\n [this._getHeader()].concat(this.config.getRouteComponents(this._getRouteProps())),\n )}\n \n \n );\n }\n}\n\nChannelPage.propTypes = {\n channel: PropTypes.shape({\n about: PropTypes.string,\n admin_menu: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n call_to_action: PropTypes.shape({\n label: PropTypes.string,\n url: PropTypes.string,\n }),\n home_sections: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string,\n label: PropTypes.string,\n title: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),\n })),\n id: PropTypes.number.isRequired,\n logo_url: PropTypes.string,\n name: PropTypes.string,\n url: PropTypes.string,\n user_name: PropTypes.string.isRequired, // Used for Navbar links\n websites: PropTypes.shape({ website_link: PropTypes.string }),\n }).isRequired,\n channel_type: PropTypes.oneOf(['community', 'platform', 'topic']).isRequired,\n discussion_props: PropTypes.shape({\n origin: PropTypes.shape({\n admin_ids: PropTypes.arrayOf(PropTypes.number).isRequired,\n id: PropTypes.number,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n filters: PropTypes.shape({\n product_filters: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n options: PropTypes.array.isRequired,\n })),\n project_filters: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n options: PropTypes.array.isRequired,\n })),\n }).isRequired,\n pathHelpers: PropTypes.shape({\n basePath: PropTypes.string.isRequired,\n fullPath: PropTypes.string.isRequired,\n rootPath: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nChannelPage.defaultProps = { home_sections: [] };\n\nexport default ChannelPage;\n","export const FILTERS = [\n {\n key: 'sort',\n options: [\n {\n label: 'Alphabetically',\n value: 'alpha',\n },\n {\n default: true,\n label: 'Most active',\n value: null,\n },\n {\n label: 'Most followers',\n value: 'followers',\n },\n {\n label: 'Most projects',\n value: 'projects',\n },\n {\n label: 'Most recently joined',\n value: 'recent',\n },\n ],\n },\n];\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport DummyPlatformMemberList from '../../../client/user/platform_member_list/DummyPlatformMemberList';\nimport PlatformMemberList from '../../../client/user/platform_member_list';\nimport GraphQLPaginatedList from '../../../client/wrappers/graph_ql/GraphQLPaginatedList';\nimport GraphQLMembersService from '../../../services/graphql/members_service';\n\nimport { FILTERS } from './filters';\n\nimport layoutStyles from '../../../styles/global_ui/layout.css';\n\nclass Members extends Component {\n constructor(props) {\n super(props);\n\n this.handleQuery = this.handleQuery.bind(this);\n this.graphQLService = new GraphQLMembersService({ history: props.history, type: props.graphQLServiceType });\n }\n\n handleQuery() {\n this.props.seoHandler(this.props.path);\n }\n\n render() {\n return (\n \n \n \n {PATHS.filter((path) => path.shouldDisplay(part)).map((path, i) => (\n - \n
path.onClick(e, part, transition)}\n rel=\"noopener nofollow noreferrer\"\n target=\"_blank\"\n >\n {path.label}\n {path.icon && {path.icon}}\n \n \n ))}\n
\n);\n\nNavBar.propTypes = {\n currentPath: PropTypes.string.isRequired,\n part: PropTypes.shape({\n name: PropTypes.string,\n links: PropTypes.shape({\n datasheet: PropTypes.string,\n documentation: PropTypes.string,\n get_started: PropTypes.string,\n libraries: PropTypes.string,\n product_page: PropTypes.string,\n }),\n }),\n transition: PropTypes.func.isRequired,\n};\n\nNavBar.defaultProps = {\n part: {\n name: '',\n links: {\n datasheet: '',\n documentation: '',\n get_started: '',\n libraries: '',\n product_page: '',\n },\n },\n};\n\nexport default NavBar;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport GraphQLPaginatedList from '../../../client/wrappers/graph_ql/GraphQLPaginatedList';\nimport ProjectsList from '../../../client/projects/projects_list';\nimport DummyProjectsList from '../../../client/projects/projects_list/DummyProjectsList';\nimport ProductWrapper from './ProductWrapper';\n\nimport GraphQLProjectsService from '../../../services/graphql/projects_service';\nimport styles from './product.css';\n\nclass ProductProjects extends Component {\n constructor(props) {\n super(props);\n\n this.state = { part: null };\n\n this.reportPageView = this.reportPageView.bind(this);\n this.qlService = new GraphQLProjectsService({ history: this.props.history });\n }\n\n reportPageView() {\n this.props.seoHandler(this.props.path, this.state.part);\n }\n\n render() {\n return (\n this.setState({ part })}\n transition={this.props.transition}\n >\n {this.state.part\n && (\n this.setState({ part }, () => this._updateSEOHeaders(part))}\n transition={this.props.transition}\n >\n {this.state.part && this.state.part.html_description\n && (\n {this.props.launch_config.text}
\n\n \n Launch it\n \n \n );\n }\n\n render() {\n return (\n \n \n \n {this.props.title}
\n {this._getNewChannelButtonView()}\n \n\n \n {this._getUnregisterPromptIdeasSection(this.state.user.ideas, this.props.challenge.contest_type)}\n {entriesCount > 0\n && (\n \n {`Your ${pluralize('submission', entriesCount)} will be withdrawn and will not be considered for prizes.`}\n \n )}\n \n );\n }\n\n _getPromptCopy(methodName) {\n switch (methodName) {\n case 'deleteEntry':\n return {\n action: 'Withdraw',\n title: 'Are you sure you want to withdraw your submission?',\n body: 'If you withdraw you can resubmit later.',\n };\n case 'deleteIdea':\n return {\n action: 'Withdraw',\n title: 'Are you sure you want to withdraw your idea?',\n body: 'Once you withdraw your idea, it cannot be undone.',\n };\n case 'resubmitEntry':\n return {\n action: 'Resubmit',\n title: 'Are you sure you want to resubmit your entry?',\n body: \"Please confirm you've made updates according to the moderators' feedback.\",\n };\n case 'deleteRegistration':\n return {\n body: this._getUnregisterPromptBody(),\n title: 'Are you sure you want to unregister?',\n };\n default:\n return {};\n }\n }\n\n _getPromptProps(methodName) {\n const { action, body, title } = this._getPromptCopy(methodName);\n\n return {\n action,\n body,\n message: getErrorHelperView(this.state.serverErrors[methodName]),\n okay: () => {\n if (this.hasOwnProperty(methodName)) {\n this[methodName](this.state.prompt.data);\n }\n },\n title,\n };\n }\n\n render() {\n return (\n \n this._summonPrompt(null, 'unregister')}\n editNotificationsPath={this.props.editNotificationsPath}\n faqPath={this.props.faqPath}\n getUserProjects={this.getUserProjects}\n initialized={this.state.initialized}\n isBusy={this.state.isBusy}\n newProjectPath={this.props.newProjectPath}\n requiredUserTier={this.props.challenge.required_user_tier}\n resubmitEntry={(entry) => this._summonPrompt(entry, 'resubmit')}\n serverErrors={this.state.serverErrors}\n timelineEvents={this.state.timelineEvents}\n user={this.state.user}\n withdrawEntryOrIdea={(record, type) => this._summonPrompt(record, type)}\n />\n this.setState({ dialog: { data: null, open: false, view: null } })}\n open={this.state.dialog.open}\n >\n {this._getDialogBody()}\n \n this.setState({ prompt: { data: null, open: false, view: null } })}\n isBusy={this.state.isBusy}\n open={this.state.prompt.open}\n {...this._getPromptProps(this.state.prompt.view)}\n >\n \n \n );\n }\n}\n\nContestBriefPage.propTypes = {\n challenge: PropTypes.shape({\n allow_multiple_entries: PropTypes.bool.isRequired,\n end_date: PropTypes.string,\n free_hardware_end_date: PropTypes.string,\n free_hardware_winners_announced_date: PropTypes.string,\n id: PropTypes.number.isRequired,\n ready: PropTypes.bool,\n required_user_tier: PropTypes.oneOf(MEMBERSHIP_TIERS).isRequired,\n start_date: PropTypes.string,\n status: PropTypes.string.isRequired,\n winners_announced_date: PropTypes.string,\n }).isRequired,\n editNotificationsPath: PropTypes.string.isRequired,\n faqPath: PropTypes.string.isRequired,\n newProjectPath: PropTypes.string.isRequired,\n registrationPath: PropTypes.string.isRequired,\n rulesPath: PropTypes.string.isRequired,\n user_signed_in: PropTypes.bool.isRequired,\n};\n\nexport default ContestBriefPage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AsyncCheckbox from '../../../../client/form_components/checkboxes/async';\nimport Icon from '../../../../client/icon';\nimport { updateChallengeRegistration } from '../../../../requests/challenges';\nimport { isPendingVerification, isVerified } from '../../../../utility/user_helpers';\nimport { VERIFICATION_LINK } from '../../../tiers/constants';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './post_registration_dialog.css';\n\nconst PostRegistrationDialog = ({\n activate_email_sharing,\n after_registration_tweet,\n challengeId,\n email_sharing_label,\n facebook_url,\n reddit_url,\n twitter_url,\n userTier,\n}) => {\n const verified = isVerified(userTier);\n const pendingVerification = isPendingVerification(userTier);\n return (\n \n \n Thanks for your interest!\n
\n {verified\n ? (\n \n Now don't forget to submit your entry!\n
\n )\n : pendingVerification\n ? (\n \n We are working on getting your verification processed. You can get\n started now! You'll be notified regarding your verification\n status.\n
\n )\n : (\n \n In order to participate in this contest, you must get verified. Head\n over to your email and follow the instructions, or\n {' '}\n \n learn more\n \n {' '}\n about getting verified.\n
\n )}\n\n {activate_email_sharing && (\n \n ({\n challenge_id: challengeId,\n challenge_registration: { receive_sponsor_news: checked },\n })}\n successMsg=\"You're subscribed\"\n />\n \n )}\n \n In the meantime, tell your friends:\n
\n \n {after_registration_tweet}\n \n \n\n \n \n \n \n Facebook\n \n \n\n \n \n \n\n \n \n \n Reddit\n \n \n \n \n );\n};\n\nPostRegistrationDialog.propTypes = {\n activate_email_sharing: PropTypes.bool,\n after_registration_tweet: PropTypes.string.isRequired,\n challengeId: PropTypes.number.isRequired,\n email_sharing_label: PropTypes.string,\n facebook_url: PropTypes.string.isRequired,\n reddit_url: PropTypes.string.isRequired,\n twitter_url: PropTypes.string.isRequired,\n userTier: PropTypes.oneOf([\n 'BASIC',\n 'HACKSTER',\n 'PENDING',\n 'PRO',\n 'VERIFIED',\n ]),\n};\n\nexport default PostRegistrationDialog;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from '../../../../client/buttons/base';\nimport FormSelect from '../../../../client/form_components/selects/form_select';\n\nimport { isRequired } from '../../../../services/validation/validators';\nimport { getErrorHelperView } from '../../../../client/form_components/templates';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './side_panel.css';\n\nconst FIELD_ERROR = 'Please select a project to add.';\n\nclass AddProjectPanel extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: null,\n value: '',\n };\n\n this.validate = this.validate.bind(this);\n }\n\n validate() {\n const error = isRequired(this.state.value, FIELD_ERROR);\n\n if (error) {\n this.setState({ error });\n } else {\n this.props.createEntry(this.state.value.value);\n }\n }\n\n render() {\n return (\n \n Add existing project
\n \n ({ options: res.map((p) => ({ label: p.name, value: p.id })) }),\n }}\n onSelectedChange={(opt) => this.setState({ value: opt })}\n placeholder=\"Select a project\"\n value={this.state.value}\n />\n {getErrorHelperView(this.state.error)}\n \n \n \n \n {getErrorHelperView(this.props.serverError)}\n \n \n );\n }\n}\n\nAddProjectPanel.propTypes = {\n createEntry: PropTypes.func.isRequired,\n dismiss: PropTypes.func.isRequired,\n isBusy: PropTypes.bool.isRequired,\n serverError: PropTypes.string,\n};\n\nAddProjectPanel.defaultProps = { serverError: null };\n\nexport default AddProjectPanel;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { IN_PROGRESS, PRE_REGISTRATION } from '../../constants';\nimport { MEMBERSHIP_TIERS } from '../../../contests_page/enum';\nimport { canRegisterForContest } from '../../helpers';\n\nimport AnchorButton from '../../../../client/buttons/anchor';\nimport ProBadge from '../../../../client/reusable_components/Badge/ProBadge';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './side_panel.css';\n\nclass ContestStatus extends PureComponent {\n constructor(props) {\n super(props);\n\n this.state = { shouldShowStatusView: false };\n }\n\n componentDidMount() {\n this.setState({ shouldShowStatusView: true });\n }\n\n /**\n * HELPERS\n */\n isPreRegistrationOrInProgress(status) {\n return [PRE_REGISTRATION, IN_PROGRESS].includes(status);\n }\n\n /**\n * VIEWS\n */\n getSingleLineStatus({ text, date }) {\n return (\n \n {text[0]}\n {' '}\n {date && {date}}\n
\n );\n }\n\n getStatusWithTimeRemaining({ date, text, timeRemaining }) {\n return (\n \n \n {text[0]}\n {' '}\n {timeRemaining}\n \n \n {text[1]}\n {' '}\n {date}\n \n \n );\n }\n\n getStatusView(props) {\n return this.isPreRegistrationOrInProgress(props.status)\n ? this.getStatusWithTimeRemaining(props)\n : this.getSingleLineStatus(props);\n }\n\n render() {\n const canRegister = canRegisterForContest(this.props.requiredUserTier, this.props.userTier);\n\n return (\n \n \n Contest Status\n {this.props.requiredUserTier === 'PRO' && (\n \n Learn more about PRO\n \n )}\n {this.state.shouldShowStatusView\n ? (\n this.getStatusView(this.props)\n )\n : (\n \n )}\n \n );\n }\n}\n\nContestStatus.propTypes = {\n date: PropTypes.string,\n requiredUserTier: PropTypes.oneOf(MEMBERSHIP_TIERS).isRequired,\n status: PropTypes.string,\n text: PropTypes.arrayOf(PropTypes.string).isRequired,\n timeRemaining: PropTypes.string,\n userTier: PropTypes.oneOf(MEMBERSHIP_TIERS).isRequired,\n};\n\nContestStatus.defaultProps = {\n date: null,\n status: null,\n timeRemaining: null,\n};\n\nexport default ContestStatus;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport TransitionGroup from 'react-transition-group/TransitionGroup';\n\nimport AddProjectPanel from './AddProjectPanel';\nimport CustomIcon from '../../../../client/icon/custom';\nimport JumboButton from '../../../../client/buttons/jumbo';\nimport MaxHeightTransition from '../../../../client/transitions/max_height';\nimport SubmissionCard from './submission_card';\n\nimport { getInObj } from '../../../../utility/accessors';\n\nimport { ENTRY, IDEA, IN_PROGRESS } from '../../constants';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from './side_panel.css';\n\nclass EntryManager extends Component {\n constructor(props) {\n super(props);\n\n this.state = { showProjectPanel: false };\n\n this.__dismissAddProjectPanelHook = this.__dismissAddProjectPanelHook.bind(this);\n this.createEntry = this.createEntry.bind(this);\n this.dismissAddProjectPanel = this.dismissAddProjectPanel.bind(this);\n this.summonAddProjectPanel = this.summonAddProjectPanel.bind(this);\n }\n\n /**\n * Hooks\n */\n __dismissAddProjectPanelHook() {\n this.dismissAddProjectPanel();\n }\n\n /**\n * Methods\n */\n createEntry(id) {\n return this.props.createEntry(id, this.__dismissAddProjectPanelHook);\n }\n\n dismissAddProjectPanel() {\n this.setState({ showProjectPanel: false });\n }\n\n summonAddProjectPanel() {\n if (this.state.showProjectPanel) return;\n this.setState({ showProjectPanel: true });\n }\n\n /**\n * Helpers\n */\n _shouldShowAddProjectButtons() {\n const { allowMultipleEntries, contestStatus, contestType, user } = this.props;\n const contestInProgress = contestStatus === IN_PROGRESS;\n const userCanSubmitMoreEntries = user.entries.length === 0 || allowMultipleEntries;\n\n const challengeType = contestType === 'challenge';\n\n const proposalWinner\n = challengeType && user.ideas.some(({ status }) => status === 'APPROVED');\n\n return contestInProgress && userCanSubmitMoreEntries && (proposalWinner || !challengeType);\n }\n\n /**\n * Views\n */\n _getRegisteredView() {\n const {\n canEditSubmission,\n contestType,\n faqPath,\n getUserProjects,\n isBusy,\n newProjectPath,\n resubmitEntry,\n serverErrors,\n user,\n withdrawEntryOrIdea,\n } = this.props;\n\n return (\n \n {this._shouldShowAddProjectButtons() && (\n \n \n \n \n \n \n );\n }\n\n render() {\n return this.props.user.isRegistered\n ? this._getRegisteredView()\n : {headerText}
\n {date}
\n \n );\n }\n\n _getEventsView({ challengeEvents }) {\n return (\n \n {challengeEvents.map((event) => this._getEventRow(event))}\n \n );\n }\n\n _getTimeIndicatorLine({ challengeEvents, nowMs }) {\n const eventsCount = challengeEvents.length;\n const baseLineHeight = this._getBaseLineHeight(eventsCount);\n const progressLineHeight = this._getProgressLineHeight(challengeEvents, nowMs);\n\n return (\n \n \n \n );\n }\n\n render() {\n return (\n \n Timeline
\n \n {this.state.shouldShowTimeIndicatorLine && this._getTimeIndicatorLine(this.props)}\n {this._getEventsView(this.props)}\n \n \n );\n }\n}\n\nTimeline.propTypes = {\n challengeEvents: PropTypes.arrayOf(PropTypes.shape({\n date: PropTypes.string.isRequired,\n headerText: PropTypes.string.isRequired,\n isPast: PropTypes.bool.isRequired,\n ms: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n nowMs: PropTypes.number.isRequired,\n};\n\nexport default Timeline;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TransitionGroup from 'react-transition-group/TransitionGroup';\n\nimport MaxHeightTransition from '../../../../client/transitions/max_height';\n\nimport Button from '../../../../client/buttons/base';\nimport ContestStatus from './ContestStatus';\nimport EntryManager from './EntryManager';\nimport Timeline from './Timeline';\n\nimport { ENTRY, IDEA, IN_PROGRESS, PRE_REGISTRATION } from '../../constants.js';\nimport { MEMBERSHIP_TIERS } from '../../../contests_page/enum';\nimport {\n isPendingVerification,\n isVerified,\n} from '../../../../utility/user_helpers';\nimport { VERIFICATION_LINK } from '../../../tiers/constants';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './side_panel.css';\n\n/**\n * Helpers\n */\nconst _registrationOpen = (status) => [PRE_REGISTRATION, IN_PROGRESS].includes(status);\nconst _shouldShowTimeline = ({ timelineEvents }) => timelineEvents.challengeEvents.length > 0;\nconst _shouldShowUnregisterButton = ({ contestStatus }) => _registrationOpen(contestStatus.status);\n\n/**\n * Views\n */\nconst _getEntrySection = (props) => (\n props.initialized ? _getEntryManagerView(props) : null\n);\n\nconst _getEntryManagerView = (props) => (\n Registration
\n {(!verified && !pending) && (\n \n You still need to get verified to participate.\n {' '}\n \n Learn more.\n \n \n )}\n {pending && (\n \n We are working on your verification. You'll be notified with any\n updates.\n \n )}\n \n You are registered!\n {_shouldShowUnregisterButton(props) && (\n \n Unregister\n \n )}\n \n \n \n Edit notification preferences\n \n \n \n );\n};\n\nconst _getRegistrationView = (props) => {\n const innerView = _getRegistrationInnerView(props);\n\n return (\n \n {!!innerView\n && (\n \n \n {innerView}\n \n \n )}\n \n );\n};\n\nconst _getRegistrationInnerView = (props) => {\n const shouldShowRegisteredViewV2Layout = props.user.isRegistered && _shouldShowUnregisterButton(props);\n\n if (!props.initialized) return null;\n if (shouldShowRegisteredViewV2Layout) return _getRegisteredView(props);\n\n return null;\n};\n\n/**\n * Main Component\n */\nconst ContestBriefSidePanel = (props) => (\n \n {_getEntrySection(props)}\n {_getRegistrationView(props)}\n \n {canEdit && !_isRejectedEntry(item, type)\n && (\n - \n
\n Edit\n \n \n )}\n {canEdit\n && (\n - withdraw(item, type)}>\n Withdraw\n
\n )}\n
\n \n);\n\nSubmissionMenu.propTypes = {\n canEdit: PropTypes.bool.isRequired,\n item: PropTypes.oneOfType([\n PropTypes.shape({ // ENTRY\n can_be_resubmitted: PropTypes.bool.isRequired,\n id: PropTypes.number.isRequired,\n is_prize_address_present: PropTypes.bool,\n moderator_feedback: PropTypes.string,\n prize_requires_shipping: PropTypes.bool,\n project: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n edit_url: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }),\n status: PropTypes.string.isRequired,\n submit_url: PropTypes.string,\n updated_at: PropTypes.string.isRequired,\n }),\n PropTypes.shape({ // IDEA\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n updated_at: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }),\n ]),\n type: PropTypes.oneOf([ENTRY, IDEA]).isRequired,\n withdraw: PropTypes.func,\n};\n\nSubmissionMenu.defaultProps = { withdraw: () => {} };\n\nexport default SubmissionMenu;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../../../../client/icon';\nimport QuestionMarkTooltip from '../../../../../client/tooltips/question_mark';\nimport SubmissionStatusTooltip from './SubmissionStatusTooltip';\n\nimport colors from '../../../../../styles/global_ui/colors.css';\nimport layout from '../../../../../styles/global_ui/layout.css';\nimport typography from '../../../../../styles/global_ui/typography.css';\nimport styles from './submission_card.css';\n\nimport {\n // type\n ENTRY,\n IDEA,\n // status: idea/entry\n APPROVED,\n DRAFT,\n PENDING_REVIEW,\n REJECTED,\n // status: entry only\n INCOMPLETE,\n RESUBMITTED,\n LOST,\n WON,\n WON_OTHER_CONTEST,\n} from '../../../constants';\n\nconst _getDisqualifiedStatusProps = () => ({\n backgroundColor: 'var(--errorBG)',\n iconColor: 'var(--errorToWhite)',\n icon: 'exclamation',\n text: 'Disqualified',\n});\n\nconst _getLosingStatusProps = (type, contestType) => ({\n backgroundColor: colors['v-asphalt'],\n text: type === ENTRY ? 'Non-winning submission' : contestType === 'challenge' ? 'Proposal not approved' : 'Not awarded hardware',\n});\n\nconst _getIncompleteStatusProps = (rejected) => ({\n backgroundColor: 'var(--errorBG)',\n iconColor: 'var(--errorToWhite)',\n icon: 'exclamation',\n text: rejected ? 'Not eligible' : 'Missing requirements',\n});\n\nconst _getSubmittedStatusProps = (resubmitted) => ({\n backgroundColor: 'var(--successBG)',\n iconColor: 'var(--successToWhite)',\n icon: 'checkmark',\n text: resubmitted ? 'Resubmitted' : 'Submitted',\n});\nconst _getWinningStatusProps = (type, contestType) => ({\n backgroundColor: 'var(--successBG)',\n text: type === ENTRY ? 'Winning submission' : contestType === 'challenge' ? 'Proposal accepted' : 'Awarded hardware',\n});\n\nconst _getStatusProps = (item, type, contestType) => {\n switch (item.status) {\n case APPROVED:\n return type === ENTRY\n ? _getSubmittedStatusProps()\n : _getWinningStatusProps(type, contestType);\n case INCOMPLETE:\n return _getIncompleteStatusProps();\n case LOST:\n return _getLosingStatusProps(type, contestType);\n case PENDING_REVIEW:\n return _getSubmittedStatusProps();\n case REJECTED:\n return type === ENTRY\n ? _getIncompleteStatusProps(true)\n : _getLosingStatusProps(type, contestType);\n case RESUBMITTED:\n return _getSubmittedStatusProps(true);\n case WON:\n return _getWinningStatusProps(type, contestType);\n case WON_OTHER_CONTEST:\n return _getDisqualifiedStatusProps();\n case DRAFT:\n default:\n return null;\n }\n};\n\nconst SubmissionStatus = ({ closeTooltip, contestType, faqPath, item, summonTooltip, type }) => {\n const statusProps = _getStatusProps(item, type, contestType);\n if (!statusProps) return null;\n\n return (\n \n \n {statusProps.icon && (\n \n \n \n Learn more.\n \n \n )\n )}\n {buttonProps\n ? (\n \n {buttonProps.text}\n \n )\n : null}\n \n );\n};\n\nconst _getCategoriesView = (categories) => (\n \n {'In '}\n {arrayToSentence(categories.map((cat) => {cat}))}\n \n);\n\nconst _getSubmissionMenuView = ({ canEdit, item, type, withdraw }) => canEdit\n ? (\n \n {`${_getTypeLabel(type)} submission`}\n
\n \n \n {type === ENTRY ? item.project.name : item.name}\n \n {!!item.categories\n && item.categories.length > 0\n && _getCategoriesView(item.categories)}\n \n {_getLastUpdated(item, type)}\n \n \n {_getSubmissionMenuView({ canEdit, item, type, withdraw })}\n \n {_getButtonView({ canEdit, isBusy, item, resubmitEntry, type, userTier })}\n \n);\n\nSubmissionCard.propTypes = {\n canEdit: PropTypes.bool.isRequired,\n contestType: PropTypes.oneOf(['challenge', 'competition']),\n faqPath: PropTypes.string.isRequired,\n isBusy: PropTypes.bool,\n item: PropTypes.oneOfType([\n PropTypes.shape({\n // ENTRY\n can_be_resubmitted: PropTypes.bool.isRequired,\n categories: PropTypes.arrayOf(PropTypes.string).isRequired,\n edit_address_url: PropTypes.string,\n id: PropTypes.number.isRequired,\n is_prize_address_present: PropTypes.bool,\n moderator_feedback: PropTypes.string,\n prize_requires_shipping: PropTypes.bool,\n project: PropTypes.shape({\n edit_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }),\n status: PropTypes.string.isRequired,\n submit_url: PropTypes.string,\n updated_at: PropTypes.string,\n }),\n PropTypes.shape({\n // IDEA\n edit_address_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n updated_at: PropTypes.string,\n url: PropTypes.string.isRequired,\n }),\n ]),\n resubmitEntry: PropTypes.func,\n type: PropTypes.oneOf([ENTRY, IDEA]).isRequired,\n userTier: PropTypes.oneOf([\n 'BASIC',\n 'HACKSTER',\n 'PENDING',\n 'PRO',\n 'VERIFIED',\n ]),\n withdraw: PropTypes.func,\n};\n\nSubmissionCard.defaultProps = {\n isBusy: false,\n resubmitEntry: () => {},\n withdraw: () => {},\n};\n\nexport default SubmissionCard;\n","// challenge status\nexport const IN_PROGRESS = 'IN_PROGRESS';\nexport const JUDGED = 'JUDGED';\nexport const JUDGING = 'JUDGING';\nexport const PRE_REGISTRATION = 'PRE_REGISTRATION';\n\n// free hardware status\nexport const CLOSED = 'CLOSED';\nexport const OPEN = 'OPEN';\nexport const LAUNCH_PENDING = 'LAUNCH_PENDING';\nexport const WINNERS_ANNOUNCED = 'WINNERS_ANNOUNCED';\n\n// leftover idea status\nexport const IDEA_EDITING_STATUS = 'DRAFT';\n\n// submission type: project entry or idea\nexport const ENTRY = 'ENTRY';\nexport const IDEA = 'IDEA';\n\n/* Contest Submission statuses. TODO: combine with IDEA_EDITING_STATUS above? */\n// Idea OR Project Entry\nexport const APPROVED = 'APPROVED';\nexport const DRAFT = 'DRAFT';\nexport const PENDING_REVIEW = 'PENDING_REVIEW';\nexport const REJECTED = 'REJECTED';\n\n// Project Entry only\nexport const INCOMPLETE = 'INCOMPLETE';\nexport const LOST = 'LOST';\nexport const RESUBMITTED = 'RESUBMITTED';\nexport const WON = 'WON';\nexport const WON_OTHER_CONTEST = 'WON_OTHER_CONTEST';\n","import { boolOrNullOut } from '../../../../utility/forms/formatters';\nimport { agreeTo, maxLength } from '../../../../services/validation/validators';\nimport { isInputTypeRadio, isInputTypeSelect, resolveInputType } from '../../../../graphql/challenges/enums';\n\nconst AGREE_TO_ERROR_MSG = 'You must review your project before submitting.';\nconst AGREE_TO_VALIDATION = (value) => agreeTo(value, boolOrNullOut, AGREE_TO_ERROR_MSG);\n\nconst getLabelForQuestion = (q) => q.required ? `${q.label} (is required)` : q.label;\n\nconst getValidation = (q) => {\n if (q.input_type === 'TEXT' || q.input_type === 'TEXTAREA') {\n return { validate: (value) => maxLength(255, value) };\n }\n return;\n};\n\nconst getOptionsForQuestion = (q) => {\n if (q.input_type === 'MULTI') {\n return { formatOut: (value) => JSON.stringify(value), options: q.options.map((o) => ({ label: o, value: o })), placeholder: 'Select option(s)' };\n } else if (isInputTypeSelect(q.input_type) || isInputTypeRadio(q.input_type)) {\n return { formatOut: (value) => value, options: q.options.map((o) => ({ label: o, value: o })), placeholder: isInputTypeRadio(q.input_type) ? undefined : 'Select an option' };\n } else {\n return {};\n }\n};\n\n/**\n * Creates the states.fields object for ContestEntrySubmitForm.\n */\nexport function buildFields({ challenge, user }) {\n const full_name = !user.has_full_name\n ? { full_name: { order: 0, validate: (v) => maxLength(155, v), inputType: 'input', label: 'Enter your full name', value: '' } }\n : {};\n\n const categoryIdOrder = !user.has_full_name ? 1 : 0;\n const prize_category_ids = challenge.submission_categories.length > 0\n ? { prize_category_ids: { order: categoryIdOrder, validate: (v) => null, inputType: 'multi', label: 'Choose categories for your submission', placeholder: 'Select categories', options: challenge.submission_categories.map((c) => ({ label: c.name, value: c.id })), value: [] } }\n : {};\n\n // Start question order at index 1 if theres a category field.\n const questionOrder = challenge.submission_categories.length > 0 ? (categoryIdOrder + 1) : categoryIdOrder;\n const questions = challenge.submission_questions.length > 0\n ? challenge.submission_questions.reduce((acc, q, i) => {\n acc[`question_${q.id}`] = {\n order: i + questionOrder,\n validate: (v) => maxLength(255, v),\n value: '',\n id: q.id,\n inputType: resolveInputType(q.input_type),\n label: getLabelForQuestion(q),\n notRequired: !q.required,\n ...getValidation(q),\n ...getOptionsForQuestion(q),\n };\n\n return acc;\n }, {})\n : {};\n\n const agreeOrder = Object.keys(full_name).length + Object.keys(prize_category_ids).length + Object.keys(questions).length;\n const agree = { agree: { order: agreeOrder, validate: AGREE_TO_VALIDATION, value: false, customRequired: (n) => null, formatOut: boolOrNullOut } };\n\n // Maintain the order of the full_name, prize_category_ids and questions here so we dont have to reorder them when creating the views.\n return {\n ...full_name,\n ...prize_category_ids,\n ...questions,\n ...agree,\n };\n}\n","/* eslint-disable react/jsx-key */\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport BasicFormInput from '../../../../client/form_components/inputs/basic_form_input';\nimport Button from '../../../../client/buttons/base';\nimport Checkbox from '../../../../client/form_components/checkboxes/custom';\nimport FormSelect from '../../../../client/form_components/selects/form_select';\nimport ImageUploader from '../../../../client/form_components/image_uploaders/form_image_uploader';\nimport Link from '../../../../client/link';\nimport RadioGroup from '../../../../client/form_components/inputs/radio_group';\n\nimport { graphMutate } from '../../../../requests/graphql';\n\nimport { buildFields } from './config';\nimport { getErrorHelperView } from '../../../../client/form_components/templates';\nimport { getTypeForFormSelect } from '../../../../graphql/challenges/enums';\nimport { getErrorForField, getFieldValuesAsObject, setStateOrError, validateFields } from '../../../../utility/forms';\nimport { isBlank } from '../../../../utility/types';\nimport { windowLocationRedirect } from '../../../../services/window';\n\nimport errorHandler from '../../../../services/error_handler';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './submit_form.css';\n\nconst CHECKBOX_LABEL = 'I have reviewed my submission and made sure it meets all the requirements above.';\nconst HARDWARE_INFO = 'Trying to submit an idea for free hardware? Ideas submitted in project format will not be considered. ';\n\nclass ContestEntrySubmitForm extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n errors: {},\n fields: buildFields(props),\n isBusy: false,\n serverError: null,\n };\n\n this.getErrorForField = getErrorForField.bind(this);\n this.getFieldValuesAsObject = getFieldValuesAsObject.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n this.setStateOrError = setStateOrError.bind(this);\n this.validate = validateFields.bind(this);\n }\n\n /**\n * Methods\n */\n handleSubmit() {\n const validated = this.validate();\n\n if (validated) {\n return this._submitChallengeEntry();\n }\n }\n\n /**\n * Requests\n */\n _submitChallengeEntry() {\n this.setState({ isBusy: true, serverError: null });\n\n return graphMutate({ t: 'submit_contest_entry' }, this._formatEntrySubmissionOut())\n .then(() => this._redirectToContest())\n .catch((err) => {\n this.setState({ isBusy: false, serverError: 'There was an issue saving your entry, please try again.' });\n errorHandler('ContestEntrySubmitForm _submitChallengeEntry', err);\n });\n }\n\n /**\n * Helpers\n */\n _formatEntrySubmissionOut() {\n const fields = this.getFieldValuesAsObject();\n const keys = Object.keys(fields);\n /* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n /* eslint-disable-next-line no-prototype-builtins */\n const prize_category_ids = fields.hasOwnProperty('prize_category_ids') ? { prize_category_ids: fields.prize_category_ids } : {};\n /* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n /* eslint-disable-next-line no-prototype-builtins */\n const fullName = fields.hasOwnProperty('full_name') ? { user_full_name: fields.full_name } : {};\n\n const questions = keys.filter((k) => k.includes('question')).reduce((acc, key) => acc.concat({ answer: fields[key], id: this.state.fields[key].id }), []);\n\n const submissionQuestions = questions.length > 0 ? { submission_questions: questions } : {};\n return {\n id: this.props.challenge_entry.id,\n ...prize_category_ids,\n ...fullName,\n ...submissionQuestions,\n };\n }\n\n _formatOptions(list) {\n return list.map((item) => {\n if (typeof item === 'string') return { value: item, label: item };\n\n return item;\n });\n }\n\n _redirectToContest() {\n windowLocationRedirect(this.props.challenge.url);\n }\n\n /**\n * Views\n */\n _getErrorMsgForForm() {\n const errorKeys = Object.keys(this.state.errors).filter((e) => e !== 'agree');\n if (errorKeys.length > 0) {\n return 'There seems to be errors on the form. Please fill out the required fields.';\n } else if (this.state.serverError) {\n return this.state.serverError;\n }\n\n return null;\n }\n\n _getOptionalInputsView() {\n return React.Children.toArray(\n Object.keys(this.state.fields)\n .filter((k) => !['agree'].includes(k))\n .reduce((acc, key) => (acc.concat(this._getViewForInputType(this.state.fields[key], key))), []),\n );\n }\n\n _getViewForInputType(field, key) {\n switch (field.inputType) {\n case 'multi':\n case 'select':\n return this._getFormSelectView(field, key);\n case 'radio':\n return this._getFormRadioView(field, key);\n case 'image':\n return this._getFormImageView(field, key);\n default:\n return this._getBasicFormInputView(field, key, field.inputType);\n }\n }\n\n _getBasicFormInputView(field, key, element) {\n return (\n \n this.setStateOrError(null, key, e.target.value)}\n type={element}\n value={field.value}\n />\n \n );\n }\n\n _getFormRadioView(field, key, element) {\n const handleChange = (v) => {\n const opt = { label: v.target.value, value: v.target.value };\n this.setStateOrError(null, key, opt.value);\n };\n return (\n \n this.setStateOrError(null, key, e.url)}\n />\n \n );\n }\n\n _getFormSelectView(field, key) {\n const handleSelectChange = (optObj) => {\n const isMulti = field.inputType === 'multi';\n\n const value = isMulti ? optObj.map(({ value }) => value) : optObj?.value;\n this.setStateOrError(null, key, value);\n };\n\n return (\n \n \n Your project must meet all the\n {' '}\n submission requirements\n .\n ,\n \n Your project must make use of\n {' '}\n {this.props.challenge.technology_requirement}\n .\n ,\n \n Any licensed content (open source or otherwise) used in your submission must properly credit original authors as well as follow the original license terms.\n {' '}\n Read more\n .\n ,\n After submitting, you are still able to make updates to your entry until the contest deadline. ,\n ];\n\n return this.props.challenge.technology_requirement ? reqs : [reqs[0], reqs[2], reqs[3]];\n }\n\n _getSubmissionForm() {\n return (\n \n {this._getOptionalInputsView()}\n Submission requirements
\n Review your submission to make sure it meets all the following requirements. Projects that fail to meet the requirements will be disqualified.
\n \n {React.Children.toArray(this._getRequirementsList())}\n
\n\n \n this.setStateOrError(null, 'agree', value)}\n />\n {getErrorHelperView(this.getErrorForField('agree'))}\n \n\n \n \n Submit project\n \n this._redirectToContest()}\n size=\"lg\"\n >\n Cancel\n \n {getErrorHelperView(this._getErrorMsgForForm())}\n \n \n );\n }\n\n _getChecklistView() {\n const { edit_url, missing_fields } = this.props.challenge_entry;\n\n return (\n \n Submission requirements
\n Please ensure that the following fields are filled before submitting:
\n \n {missing_fields.map((field) => (- {field}
))}\n
\n \n \n Add missing fields\n \n \n \n );\n }\n\n render() {\n return (\n \n {this.props.challenge.name}
\n {this.props.challenge.free_hardware_applications_open\n && (\n \n {HARDWARE_INFO}\n Fill out an application here.\n \n )}\n {!isBlank(this.props.challenge_entry.missing_fields)\n ? this._getChecklistView()\n : this._getSubmissionForm()}\n \n );\n }\n}\n\nContestEntrySubmitForm.propTypes = {\n challenge: PropTypes.shape({\n free_hardware_applications_open: PropTypes.bool.isRequired,\n ideas_url: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n rules_url: PropTypes.string.isRequired,\n submission_categories: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n })).isRequired,\n submission_questions: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n input_type: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n options: PropTypes.arrayOf(PropTypes.string),\n required: PropTypes.bool.isRequired,\n })),\n technology_requirement: PropTypes.string,\n url: PropTypes.string.isRequired,\n }).isRequired,\n challenge_entry: PropTypes.shape({\n edit_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n missing_fields: PropTypes.arrayOf(PropTypes.string).isRequired,\n }).isRequired,\n user: PropTypes.shape({ has_full_name: PropTypes.bool.isRequired }).isRequired,\n};\n\nexport default ContestEntrySubmitForm;\n","import { MEMBERSHIP_TIERS_RANK_MAP } from '../contests_page/enum';\n\nexport const canRegisterForContest = (contestTier, userTier) => MEMBERSHIP_TIERS_RANK_MAP[contestTier.toUpperCase()]\n <= MEMBERSHIP_TIERS_RANK_MAP[userTier.toUpperCase()];\n\nconst MAX_TIMEOUT = 2147483647; // JS limit.\nconst UNITS_TO_MS = {\n seconds: 1000,\n minutes: 60000,\n hours: 3600000,\n days: 86400000,\n};\n\nexport const timeTilEndDateMs = (endDate) => {\n const diff = new Date(endDate).valueOf() - Date.now();\n const diffMax = Math.max(diff, 0);\n\n return diffMax < MAX_TIMEOUT ? diffMax : 0;\n};\n\nexport const timeRemaining = (endDate, startDate = new Date().toString()) => {\n const units = ['seconds', 'minutes', 'hours', 'days'];\n\n const time = units.reduce(\n (acc, unit, i) => {\n if (acc.unit) return acc;\n\n const diffMs\n = new Date(endDate).valueOf() - new Date(startDate).valueOf();\n const diff = Math.round(diffMs / UNITS_TO_MS[unit]);\n\n if (i === units.length - 1) return { unit, value: diff };\n\n return diff < 100 && diff > 0 ? { unit, value: diff } : acc;\n },\n { unit: null, value: 0 },\n );\n\n if (time.value <= 0) return '0 seconds';\n\n return `${time.value} ${\n time.value === 1 ? time.unit.replace(/s$/, '') : time.unit\n }`;\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Breadcrumb from '../../../client/nav_components/breadcrumb';\n\nimport styles from './idea_page.css';\n\nconst Breadcrumbs = ({ basePath, nextID, prevID, onClick }) => (\n \n {prevID === null\n ? \n : (\n onClick(e, prevID)}\n size=\"S\"\n text=\"Prev submission\"\n />\n )}\n {nextID === null\n ? \n : (\n onClick(e, nextID)}\n size=\"S\"\n text=\"Next submission\"\n />\n )}\n \n);\n\nBreadcrumbs.propTypes = {\n basePath: PropTypes.string.isRequired,\n nextID: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n onClick: PropTypes.func,\n prevID: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n};\n\nBreadcrumbs.defaultProps = {\n nextID: null,\n onClick: () => {},\n prevID: null,\n};\n\nexport default Breadcrumbs;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Link from '../../../client/link';\nimport UserCard from '../../../client/cards/user_card';\n\nimport { CONTEST_DATE_AT_TIME_FORMAT, formatContestTimestampPT } from '../../../utility/time';\nimport { isBlank } from '../../../utility/types';\n\nimport layoutStyles from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport util from '../../../styles/global_ui/util.css';\nimport styles from './idea_page.css';\n\nconst adminSections = {\n fullSection: ['skills'],\n oneLine: ['hours_weekly', 'hours_total', 'owned'],\n};\n\nconst bodySections = ['problem', 'build', 'solution', 'components'];\n\nconst sectionHeaders = {\n build: () => 'What are you going to build to solve this problem? How is it different from existing solutions? Why is it useful?',\n problem: () => 'What problem are you going to solve?',\n solution: (hardwareName) => `How does your solution work? What are the main features? Please specify how you will use the ${hardwareName} in your solution.`,\n components: () => 'List the hardware and software you will use to build this.',\n skills: () => 'Tell us about yourself. What do you spend most of your time doing? What skills or experience do you have that will enable you to be successful in building this project?',\n hours_weekly: () => 'Time commitment: ',\n hours_total: () => 'Estimated time required: ',\n owned: () => 'Purchased hardware: ',\n};\n\n/**\n * Helpers\n */\nconst _isOldIdeaFormat = (idea) => !!idea.old_html_description;\n\nconst _shouldShowAdminSections = ({ fullPage, idea }) => (\n fullPage && !_isOldIdeaFormat(idea) && _userCanViewAdminSections(idea)\n);\n\nconst _userCanViewAdminSections = (idea) => (\n idea.current_user_permissions.edit || idea.current_user_permissions.admin || idea.current_user_permissions.moderate\n);\n\n/**\n * Views\n */\nconst _getAdminSections = (idea) => (\n \n {adminSections.fullSection.map((fieldName) => _getSection({ fieldName, idea }))}\n \n {adminSections.oneLine.map((key) => (\n \n {sectionHeaders[key]()}\n {idea.application[key]}\n \n ))}\n \n \n);\n\nconst _getBodySections = ({ hardwareName, idea, skipDefault }) => (\n skipDefault ? [] : bodySections.map((fieldName) => _getSection({ fieldName, idea, hardwareName }))\n);\n\nconst _getExtraFields = (idea) => {\n if (isBlank(idea.extra_fields)) return;\n\n const fields = _userCanViewAdminSections(idea)\n ? idea.extra_fields.filter((f) => isBlank(f.answer) === false)\n : idea.extra_fields.filter((f) => (f.hide === false && isBlank(f.answer) === false));\n\n return React.Children.toArray(fields.map((f) => (\n \n {f.label}
\n {\n f.input_type === 'image'\n ? (\n \n {f.input_type === 'multi'\n ? JSON.parse(f.answer).map((item) => item).join(', ')\n : f.answer}\n
\n )\n }\n \n )));\n};\n\nconst _getSection = ({ fieldName, hardwareName, idea }) => (\n \n {sectionHeaders[fieldName](hardwareName)}
\n {idea.application[fieldName]}
\n \n);\n\nconst IdeaView = ({\n contestType,\n fullPage,\n idea,\n hardwareName,\n hideDefaultQuestions,\n}) => {\n const skipDefault = hideDefaultQuestions || contestType === 'challenge';\n return (\n \n \n \n {`Submitted ${formatContestTimestampPT(\n idea.submitted_at_pt,\n CONTEST_DATE_AT_TIME_FORMAT,\n )}`}\n \n \n \n {idea.name}\n \n {_isOldIdeaFormat(idea)\n ? (\n \n Edit\n \n )}\n {!fullPage\n && (idea.current_user_permissions.admin\n || idea.current_user_permissions.moderate) && (\n \n Go to judging panel\n \n )}\n \n \n );\n};\n\nIdeaView.propTypes = {\n fullPage: PropTypes.bool,\n hardwareName: PropTypes.string.isRequired,\n idea: PropTypes.shape({\n application: PropTypes.shape({\n build: PropTypes.string,\n components: PropTypes.string,\n hours_total: PropTypes.number, // admin\n hours_weekly: PropTypes.number, // admin\n owned: PropTypes.string, // admin\n problem: PropTypes.string,\n skills: PropTypes.string, // admin\n solution: PropTypes.string,\n }),\n created_at: PropTypes.string.isRequired,\n current_user_permissions: PropTypes.shape({\n admin: PropTypes.bool.isRequired,\n edit: PropTypes.bool.isRequired,\n moderate: PropTypes.bool.isRequired,\n }).isRequired,\n extra_fields: PropTypes.arrayOf(\n PropTypes.shape({\n answer: PropTypes.string.isRequired,\n hide: PropTypes.bool.isRequired,\n label: PropTypes.string.isRequired,\n }),\n ).isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n old_html_description: PropTypes.string,\n project: PropTypes.shape({\n cover_image_url: PropTypes.string,\n hid: PropTypes.string,\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n submitted_at: PropTypes.string.isRequired,\n user: PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n challenge_stats: PropTypes.shape({\n // admin\n entries_submitted: PropTypes.number,\n entries_won: PropTypes.number,\n ideas_awarded: PropTypes.number,\n ideas_submitted: PropTypes.number,\n registrations: PropTypes.number,\n status: PropTypes.string,\n }),\n country: PropTypes.string, // admin\n created_at: PropTypes.string, // admin\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n stats: PropTypes.shape({ live_projects: PropTypes.number }), // admin\n url: PropTypes.string.isRequired,\n }).isRequired,\n status: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nIdeaView.defaultProps = { fullPage: false };\n\nexport default IdeaView;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './idea_form.css';\n\nconst ChallengeFAQ = ({ hardware }) => (\n \n \n Frequently Asked Questions\n \n\n \n \n Will I be able to compete in this challenge if my proposal is not selected?\n \n Only official contenders are able to submit solutions to this challenge. Please take your time and submit a thorough proposal in order to be considered.\n
\n \n\n \n What kind of proposals are more likely to be accepted?\n \n We encourage you to write a comprehensive plan to demonstrate your\n ability to deliver the solution on time. For instance, your technical\n abilities & skills; your project portfolio; and any additional\n resources you might have to support your build. Include visuals,\n images, videos, or any other supportive media to enrich your proposal.\n
\n \n\n \n \n Do I have to submit a project entry if I am selected to be a\n contender?\n \n \n Once you are an official contender, you will be entering into a\n legally binding agreement with Hackster to deliver a solution based on\n your proposal. Contenders who receive free hardware and do not finish\n the challenge may be ineligible for future challenges and competitions\n unless the hardware is returned. If you receive free hardware and\n become unable to finish, please contact us at\n {' '}\n \n contests@hackster.io\n \n {' '}\n and let us know as soon as possible. We may choose to arrange for the\n hardware to be shipped to another proposal.\n
\n \n\n \n How many contender slots are available?\n \n {`${hardware.remaining} are available.`}\n
\n \n\n \n How many ideas can I submit?\n \n Each user is allowed to submit one idea.\n
\n \n \n \n);\n\nChallengeFAQ.propTypes = {\n hardware: PropTypes.shape({ remaining: PropTypes.number.isRequired }).isRequired,\n supportEmail: PropTypes.string.isRequired,\n};\n\nexport default ChallengeFAQ;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { pluralize } from '../../../../utility/formatters';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './idea_form.css';\n\nconst FAQ = ({ hardware, supportEmail }) => (\n \n Frequently Asked Questions
\n\n \n \n What kind of idea is more likely to win free hardware?\n We encourage creative ideas. For instance, pet feeders and home automation systems are very common nowadays and less creative. We also encourage realistic ideas. While solving world hunger is a great goal, it may not be realistic.
\n \n\n \n Do I have to submit a project entry if I receive free hardware?\n Yes, all free hardware recipients must submit a project entry by the contest deadline. Free hardware recipients who do not submit a project entry will become ineligible to receive free hardware in future giveaways.
\n \n\n \n What happens if I receive free hardware and do not submit a project entry?\n Participants who receive free hardware and do not submit a project may be ineligible for future giveaways unless the hardware is returned.
\n \n If you receive free hardware and become unable to submit a project, please contact us at \n {supportEmail}\n and let us know as soon as possible. We may choose to arrange for the hardware to be shipped to another participant.\n
\n \n\n \n {`How many ${hardware.name} are available?`}\n {`${hardware.remaining} ${pluralize(hardware.name, hardware.remaining)} are available.`}
\n \n\n \n How many ideas can I submit?\n Each user is allowed to submit one idea.
\n \n \n \n);\n\nFAQ.propTypes = {\n hardware: PropTypes.shape({\n name: PropTypes.string.isRequired,\n remaining: PropTypes.number.isRequired,\n }).isRequired,\n supportEmail: PropTypes.string.isRequired,\n};\n\nexport default FAQ;\n","import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Breadcrumbs from './Breadcrumbs';\nimport ErrorPage from '../../../client/reusable_components/Router/ErrorPage';\nimport IdeaView from './IdeaView';\nimport JudgingPanel from './judging_panel';\n\nimport SeoHandler from '../../../services/seo_handler';\nimport seoConfig from '../seoConfig';\n\nimport { cancelablePromise } from '../../../utility/promises';\nimport createHistory from '../../../client/reusable_components/Router/history';\nimport errorHandler from '../../../services/error_handler';\nimport { getInObj } from '../../../utility/accessors';\nimport { graphQuery } from '../../../requests/graphql';\nimport { windowLocationRedirect, windowLocationReload } from '../../../services/window';\n\nimport layoutStyles from '../../../styles/global_ui/layout.css';\nimport overlayStyles from '../../../styles/common-overlay.css';\nimport styles from './idea_page.css';\n\nclass IdeaPage extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n error: false,\n idea: null,\n isBusy: true,\n };\n\n this.goToBasePath = this.goToBasePath.bind(this);\n this.handleBreadcrumbClick = this.handleBreadcrumbClick.bind(this);\n this.handleLocationChange = this.handleLocationChange.bind(this);\n\n this.basePath = props.pathHelpers.basePath;\n this.history = createHistory(this.basePath);\n\n this.seoHandler = new SeoHandler({ config: seoConfig });\n\n this._activePromise;\n this.unlisten;\n }\n\n componentDidMount() {\n this.unlisten = this.history.listen(this.handleLocationChange);\n this._fetchIdea(this.props.initIdeaID, 'replace');\n }\n\n componentWillUnmount() {\n this._cancelActivePromise();\n this.unlisten();\n }\n\n /**\n * Initializers\n */\n\n _fetchIdea(id, historyAction = null) {\n this.setState({ isBusy: true });\n\n this._cancelActivePromise(); // cancel any previous request so requests don't stack and mess with state\n this._activePromise = cancelablePromise(graphQuery({ t: 'get_challenge_idea' }, { id: parseInt(id), judging: true }));\n\n return this._activePromise\n .promise\n .then((res) => {\n if (res.promiseCanceled) return;\n\n const idea = res.paginated_challenge_idea;\n if (!idea) return this._showErrorPage();\n\n this._showIdea(idea);\n\n if (historyAction) {\n this.history[historyAction](`/${idea.id}`, { idea });\n }\n })\n .catch((err) => {\n errorHandler(err);\n if (err.promiseCanceled) return;\n this._showErrorPage();\n });\n }\n\n /**\n * Methods\n */\n goToBasePath() {\n windowLocationRedirect(this.basePath);\n }\n\n handleBreadcrumbClick(e, id) {\n e.preventDefault();\n\n return this._fetchIdea(id, 'push');\n }\n\n handleLocationChange(location, action) {\n /* this is a rare case. If a user reloads the /ideas page while the idea modal is shown,\n it will bring them here, at /idea scene. then If the user tries to go back using\n browser buttons, the browser thinks it's a pushState navigation, and will not load /ideas,\n so we have to reload to display the correct page.\n */\n if (location.pathname === '/') return windowLocationReload();\n\n // action is \"REPLACE\" on mount. globalKeenService has already recorded this pageView. no need to do anything\n if (action === 'REPLACE') return;\n\n const idea = getInObj(['state', 'idea'], location);\n this.seoHandler.reportView({ path: '/ideas/*', data: idea });\n\n if (action === 'POP') {\n this._cancelActivePromise();\n this._showIdea(idea);\n }\n }\n\n /**\n * Helpers\n */\n _canCurrentUserJudgeIdea() {\n return (\n (getInObj(['current_user_permissions', 'admin'], this.state.idea) === true)\n || (getInObj(['current_user_permissions', 'moderate'], this.state.idea) === true)\n );\n }\n\n _cancelActivePromise() {\n if (this._activePromise) this._activePromise.cancel();\n }\n\n _showErrorPage() {\n this.setState({ error: true, idea: null, isBusy: false });\n }\n\n _showIdea(idea) {\n this.setState({ error: false, idea, isBusy: false });\n }\n\n render() {\n const { contestType, dashboardURL, hardwareName, hideDefaultHWQuestions }\n = this.props;\n const { error, idea, isBusy } = this.state;\n\n return (\n \n {this.state.idea !== null && (\n \n \n \n \n )}\n {error && (\n \n {header}
\n \n \n {rows.map((row, i) => (\n \n {row[0]} \n {row[1]} \n \n ))}\n \n
\n \n);\n\nStatTable.propTypes = {\n header: PropTypes.string,\n rows: PropTypes.arrayOf(PropTypes.array),\n};\n\nStatTable.defaultProps = {\n header: '',\n rows: [],\n};\n\nexport default StatTable;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport AnchorButton from '../../../../client/buttons/anchor';\nimport Breadcrumb from '../../../../client/nav_components/breadcrumb';\nimport Button from '../../../../client/buttons/base';\nimport Icon from '../../../../client/icon';\nimport Prompt from '../../../../client/reusable_components/Dialog/Prompt';\nimport RingSpinner from '../../../../client/spinners/ring';\nimport SimpleSelect from '../../../../client/form_components/simple_select';\nimport StatTable from './StatTable';\n\nimport { graphMutate } from '../../../../requests/graphql';\nimport errorHandler from '../../../../services/error_handler';\nimport { windowLocationRedirect } from '../../../../services/window';\nimport { timestampToRelativeTime } from '../../../../utility/time';\n\nimport inputStyles from '../../../../styles/global_ui/inputs.css';\nimport layoutStyles from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\nimport styles from '../idea_page.css';\n\nconst CHALLENGE_HISTORY_STATS = [\n { key: 'registrations', label: 'Participated' },\n { key: 'ideas_submitted', label: 'Submitted idea' },\n { key: 'ideas_awarded', label: 'Awarded hardware / Proposal accepted' },\n { key: 'entries_submitted', label: 'Submitted projects' },\n { key: 'entries_won', label: 'Won' },\n];\n\nconst IDEA_STATUS_OPTIONS = [\n { label: 'Needs review', value: 'PENDING_REVIEW' },\n { label: 'Approved', value: 'APPROVED' },\n { label: 'Rejected', value: 'REJECTED' },\n];\n\nconst USER_STATUS_LABELS = {\n AVERAGE: '60%',\n BLACKLISTED: '20%',\n PROMISING: '80%',\n SUPER: '99%',\n WORRISOME: '40%',\n};\n\nconst LoadingIcon = () => Manage submission
\n \n \n Edit idea\n \n \n \n \n )}\n \n \n \n User info
\n \n {'Likelihood of submitting a project: '}\n {USER_STATUS_LABELS[idea.user.challenge_stats.status]}\n \n \n {'Country: '}\n {idea.user.country !== null ? idea.user.country : 'Not available'}\n \n \n * We default to a user's saved address in their profile. It should also be noted that if a user has multiple shipping addresses, we will show the most recently added. Otherwise, we fallback to their ip.\n \n \n \n {text} \n );\n};\n\n/**\n * CONTENT HELPERS\n */\nconst isOpenOrLaunchPending = (hardwareStatus) => (hardwareStatus === OPEN || hardwareStatus === LAUNCH_PENDING);\n\nconst createContentMethods = {\n info: {\n header: ({ hardwareName, hardwareUrl }) => hardwareName\n ? (\n \n {'Win a '}\n \n {hardwareName}\n \n {' to build your contest submission!'}\n \n )\n : (\n Want to become a contender?\n ),\n body: ({ contestType, challengeUrl }) => contestType === 'competition'\n ? (\n \n {\n 'Need hardware to complete your submission? Submit an application to be considered for free hardware. One device maximum per person. Read our '\n }\n \n FAQs\n \n {' for more details.'}\n \n )\n : (\n \n {\n 'Only approved proposals will become official contenders in the challenge. All contenders are guaranteed a base reward for delivering their challenge solution. Contenders are selected on a rolling basis. Read our '\n }\n \n FAQs\n \n {' for more details.'}\n \n ),\n },\n prizesRemaining: {\n // Force free_hardware_quantity to 0 in case of leftover for ended contests\n header: ({ hardwareQuantity, hardwareQuantityRemaining, hardwareStatus }) => hardwareStatus !== WINNERS_ANNOUNCED && hardwareQuantityRemaining > 0\n ? `${hardwareQuantityRemaining.toString()} of ${hardwareQuantity.toString()}`\n : '0',\n body: ({ contestType }) => (\n \n {contestType === 'challenge' ? 'slots' : 'devices'}\n {' '}\n remaining\n \n ),\n },\n timeRemaining: {\n header: ({ contestType, hardwareAsYouGo, hardwareStatus, hardwareTimeRemaining }) => hardwareStatus === LAUNCH_PENDING\n ? (\n 'Applications are not open yet'\n )\n : hardwareStatus === CLOSED\n ? (\n 'Applications are closed'\n )\n : hardwareStatus === WINNERS_ANNOUNCED\n ? (\n contestType === 'challenge'\n ? (\n 'Contenders announced'\n )\n : (\n 'Winners announced'\n )\n )\n : !hardwareAsYouGo && typeof hardwareTimeRemaining === 'string'\n ? (\n \n {hardwareTimeRemaining === '0' ? '0 days' : hardwareTimeRemaining}\n {' '}\n remaining\n \n )\n : (\n 'Applications are open'\n ),\n body: ({\n contestType,\n hardwareAsYouGo,\n hardwareStatus,\n hardwareEndDate,\n hardwareWinnersAnnouncementDate,\n }) => hardwareStatus === CLOSED && hardwareWinnersAnnouncementDate !== null\n ? (\n {`winners announced on ${hardwareWinnersAnnouncementDate}`}\n )\n : hardwareStatus === CLOSED\n && hardwareWinnersAnnouncementDate === null\n ? (\n hardwareEndDate\n ? (\n {`submissions closed on ${hardwareEndDate}`}\n )\n : (\n \n {`${\n contestType === 'challenge' ? 'Slots' : 'Devices'\n } have been awarded on a first-come, first-served basis`}\n \n )\n )\n : (hardwareEndDate && !hardwareAsYouGo)\n ? (\n \n submissions\n {' '}\n {isOpenOrLaunchPending(hardwareStatus) ? 'close' : 'closed'}\n {' '}\n on\n {' '}\n {hardwareEndDate}\n \n )\n : isOpenOrLaunchPending(hardwareStatus)\n ? (\n \n {`${\n contestType === 'challenge' ? 'Slots' : 'Devices'\n } will be awarded on a first-come, first-served basis`}\n \n )\n : (\n \n {`${\n contestType === 'challenge' ? 'Slots' : 'Devices'\n } have been awarded on a first-come, first-served basis`}\n \n ),\n },\n};\n\n/**\n * VIEWS\n */\nconst bodyTextStyles = (section) => section === 'info' ? `${typography.bodyL} ${layout.marginTop10}` : `${typography.bodyM} ${layout.marginTop5}`;\n\nconst renderSection = (section, contentProps) => (\n \n \n {createContentMethods[section].header(contentProps)}\n
\n \n {createContentMethods[section].body(contentProps)}\n
\n \n);\n\nconst IdeasHeader = (props) => {\n // Rename & remap props from challenge + formattedDates simply for readability in createContentMethods\n const contentProps = {\n contestType: props.challenge.contest_type,\n hardwareAsYouGo: props.challenge.free_hardware_as_you_go,\n hardwareName: props.challenge.free_hardware_name,\n hardwareQuantity: props.challenge.free_hardware_quantity,\n hardwareQuantityRemaining: props.challenge.free_hardware_quantity_remaining,\n hardwareStatus: props.challenge.free_hardware_status,\n hardwareUrl: props.challenge.free_hardware_url,\n challengeUrl: props.challenge.url,\n ...props.formattedDates,\n };\n\n return (\n \n \n {renderSection('info', contentProps)}\n \n {renderSection('prizesRemaining', contentProps)}\n {renderSection('timeRemaining', contentProps)}\n \n {!isPendingOrVerified(props.userTier) && (\n \n You still need to get verified to participate.\n {' '}\n \n Learn more.\n \n \n )}\n {renderButton(props)}\n \n {props.challenge.free_hardware_image_url && (\n \n \n \n \n \n );\n }\n}\n\nContestIdeasPage.propTypes = {\n challenge: PropTypes.shape({\n end_date: PropTypes.string.isRequired,\n free_hardware_as_you_go: PropTypes.bool,\n free_hardware_end_date: PropTypes.string,\n free_hardware_image_url: PropTypes.string,\n free_hardware_name: PropTypes.string,\n free_hardware_quantity: PropTypes.number.isRequired,\n free_hardware_quantity_remaining: PropTypes.number.isRequired,\n free_hardware_status: PropTypes.string.isRequired,\n free_hardware_winners_announced_date: PropTypes.string,\n free_hardware_url: PropTypes.string,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n show_submissions_before_judged: PropTypes.bool,\n status: PropTypes.string.isRequired,\n support_email: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n pathHelpers: PropTypes.shape({\n basePath: PropTypes.string.isRequired,\n fullPath: PropTypes.string.isRequired,\n rootPath: PropTypes.string.isRequired,\n }).isRequired,\n userTier: PropTypes.oneOf(MEMBERSHIP_TIERS),\n};\n\nContestIdeasPage.defaultProps = {};\n\nexport default ContestIdeasPage;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ContestIdeaCard from '../../../../client/cards/contest_idea_card';\nimport DummyContestIdeaCard from '../../../../client/cards/contest_idea_card/DummyCard';\nimport DummyList from '../../../../client/wrappers/grid_list/DummyList';\nimport GraphQLChallengeIdeasService from '../../../../services/graphql/challenge_ideas_service';\nimport GraphQLPaginatedList from '../../../../client/wrappers/graph_ql/GraphQLPaginatedList';\nimport GridList from '../../../../client/wrappers/grid_list';\nimport IdeaView from '../../idea/IdeaView';\nimport PushStateDialog from '../../../../client/wrappers/push_state_dialog';\n\nimport { clickEventHasModifierKey } from '../../../../utility/events';\nimport { getInObj } from '../../../../utility/accessors';\n\nimport { OPEN, WINNERS_ANNOUNCED } from '../../constants';\n\nimport layoutStyles from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './submissions.css';\n\nclass IdeasSubmissions extends Component {\n constructor(props) {\n super(props);\n\n this.state = { totalRecords: null };\n\n this.isChallenge = this.props.challenge.contest_type === 'challenge';\n\n this.buildPath = this.buildPath.bind(this);\n this.handleQuery = this.handleQuery.bind(this);\n this.renderIdeaCard = this.renderIdeaCard.bind(this);\n this.renderDialogBody = this.renderDialogBody.bind(this);\n this.renderPlaceholder = this.renderPlaceholder.bind(this);\n this.summonDialog = this.summonDialog.bind(this);\n\n this.graphQLService = new GraphQLChallengeIdeasService({ history: this.props.history });\n }\n\n buildPath(idea) {\n return `/${idea.id}`;\n }\n\n handleQuery(query) {\n const totalRecords = getInObj(['metadata', 'total_records'], query);\n if (totalRecords !== this.state.totalRecords) {\n this.setState({ totalRecords });\n }\n }\n\n renderDialogBody({ entity }) {\n return (\n \n Be the first to submit an application\n \n )}\n \n );\n }\n\n summonDialog(e, idea) {\n if (this._dialog && !clickEventHasModifierKey(e)) {\n e.preventDefault();\n this._dialog._summonDialog(idea);\n }\n }\n\n _getListProps() {\n return {\n ItemComponent: this.renderIdeaCard,\n maxCols: 3,\n itemProps: { onClick: this.summonDialog },\n placeholder: this.renderPlaceholder,\n };\n }\n\n render() {\n const shouldShowIdeas = !this.isChallenge\n || this.props.challenge.free_hardware_status === WINNERS_ANNOUNCED;\n return (\n \n \n {this.isChallenge ? 'Proposals' : 'Submissions'}\n {this.state.totalRecords !== null && ` (${this.state.totalRecords})`}\n
\n {shouldShowIdeas\n ? (\n <>\n (this._dialog = c)}\n BodyComponent={this.renderDialogBody}\n buildPath={this.buildPath}\n history={this.props.history}\n wrapperClassName={styles.dialogWrapper}\n />\n \n )\n : (\n Proposals are hidden until contenders are announced.
\n )}\n \n );\n }\n}\n\nIdeasSubmissions.propTypes = {\n basePath: PropTypes.string.isRequired,\n challenge: PropTypes.shape({\n contest_type: PropTypes.oneOf(['challenge', 'competition']),\n end_date: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n free_hardware_name: PropTypes.string,\n free_hardware_quantity: PropTypes.number.isRequired,\n free_hardware_status: PropTypes.string.isRequired,\n hideDefaultHWQuestions: PropTypes.bool.isRequired,\n show_submissions_before_judged: PropTypes.bool,\n status: PropTypes.string.isRequired,\n support_email: PropTypes.string.isRequired,\n }).isRequired,\n currentHistoryData: PropTypes.object,\n getPaginatorHook: PropTypes.func,\n history: PropTypes.object.isRequired,\n id: PropTypes.string.isRequired,\n};\n\nIdeasSubmissions.defaultProps = {\n currentHistoryData: null,\n getPaginatorHook: null,\n};\n\nexport default IdeasSubmissions;\n","import { DEFAULT_PAGE_DESCRIPTION, DEFAULT_PAGE_TITLE } from '../../constants/pageMetadata';\n\nconst CONFIG = {\n '/ideas': (challenge) => ({\n title: `${challenge.name} ideas`,\n meta_desc: DEFAULT_PAGE_DESCRIPTION,\n pageType: 'challenge_ideas#index',\n entity_id: challenge.id,\n }),\n '/ideas/*': (idea) => ({\n title: DEFAULT_PAGE_TITLE,\n meta_desc: DEFAULT_PAGE_DESCRIPTION,\n pageType: 'challenge_ideas#show',\n entity_id: idea.id,\n }),\n};\n\nconst seoConfig = (path) => CONFIG[path];\n\nexport default seoConfig;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\n// import AnchorButton from '../../client/buttons/anchor';\nimport ActiveContestCard from '../../client/cards/contest_card/ActiveContestCard';\nimport { MEMBERSHIP_TIERS } from './enum';\nimport ContestCard from '../../client/cards/contest_card';\nimport HorizontalScrollBox from '../../client/wrappers/horizontal_scroll_box';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport styles from './contests_page.css';\n\nconst ActiveContestsSection = ({\n challengeContests,\n competitionContests,\n}) => (\n <>\n {competitionContests.length > 0 && (\n \n \n Competitions\n
\n \n May the best build win! Compete against others for hardware, prizes,\n and fame.\n
\n {competitionContests.map((contest) => (\n \n Challenges\n
\n \n Beta\n \n \n \n \n Unique problems looking for innovators to tackle. Limited slots for\n serious contenders. Exclusive awards for selected proposals.\n
\n {/* TODO: build out a page for all challenges.\n \n View All\n */}\n \n \n {challengeContests.map((contest) => (\n \n \n \n \n \n Want to run your own contest?\n
\n Learn more \n \n \n);\n\nContestCTABanner.propTypes = {\n urls: PropTypes.shape({\n darkUrl: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default ContestCTABanner;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport BannerSmallContestCard from '../../client/cards/contest_card/BannerSmallContestCard';\nimport BannerSmallContestCardDummy from '../../client/cards/contest_card/BannerSmallContestCardDummy';\nimport LazyComponent from '../../client/wrappers/lazy_component';\nimport PaginatedList from '../../client/wrappers/paginated_list';\n\nimport grid from '../../styles/global_ui/grid.css';\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport utilStyles from '../../styles/global_ui/util.css';\nimport styles from './contests_page.css';\n\nimport { MEMBERSHIP_TIERS } from './enum.js';\n\nconst LoaderView = () => [...Array(8).keys()].map((i) => (\n \n Past
\n\n \n \n \n \n {contests.map((contest) => (\n \n \n \n \n \n);\n\nPastContestsList.propTypes = {\n contests: PropTypes.arrayOf(PropTypes.shape({\n cover_image: PropTypes.shape({ url: PropTypes.string.isRequired }).isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n required_user_tier: PropTypes.oneOf(MEMBERSHIP_TIERS).isRequired,\n status: PropTypes.string.isRequired,\n sponsors: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n })).isRequired,\n url: PropTypes.string.isRequired,\n })),\n getPaginatedPastContests: PropTypes.func.isRequired,\n isBusy: PropTypes.bool.isRequired,\n metadata: PropTypes.shape({\n current_page: PropTypes.number.isRequired,\n next_page: PropTypes.number,\n per_page: PropTypes.number.isRequired,\n prev_page: PropTypes.number,\n }).isRequired,\n};\n\nexport default PastContestsList;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ContestCard from '../../client/cards/contest_card';\nimport DummyProjectCard from '../../client/cards/project_card/DummyCard';\nimport HorizontalScrollBox from '../../client/wrappers/horizontal_scroll_box';\nimport LazyComponent from '../../client/wrappers/lazy_component';\nimport ProjectCard from '../../client/cards/project_card';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport styles from './contests_page.css';\n\nimport { MEMBERSHIP_TIERS } from './enum.js';\n\n/**\n * Helpers\n */\nconst _getProjectsForContest = (contest, projectMap) => {\n /* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n /* eslint-disable-next-line no-prototype-builtins */\n if (projectMap.hasOwnProperty(contest.id)) return projectMap[contest.id];\n\n return [];\n};\n\n/**\n * Views\n */\nconst ProjectsListView = ({ isBusy, projects }) => {\n if (!isBusy && !projects.length) return null;\n if (isBusy && !projects.length) return (\n \n);\n\n/**\n * Main component\n */\nconst RecentContestsList = ({ contests, getProjectsForRecent, isBusy, projectsForContests }) => (\n \n Recent
\n\n \n \n {contests.map((contest) => (\n \n \n);\n\nRecentContestsList.propTypes = {\n contests: PropTypes.arrayOf(PropTypes.shape({\n cover_image: PropTypes.shape({ url: PropTypes.string.isRequired }).isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n required_user_tier: PropTypes.oneOf(MEMBERSHIP_TIERS).isRequired,\n sponsors: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n })).isRequired,\n status: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n winning_projects_ids: PropTypes.arrayOf(PropTypes.number).isRequired,\n })),\n getProjectsForRecent: PropTypes.func.isRequired,\n isBusy: PropTypes.bool.isRequired,\n projectsForContests: PropTypes.objectOf(\n PropTypes.arrayOf(PropTypes.shape({\n content_type: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n contest_winner: PropTypes.bool,\n cover_image_url: PropTypes.string,\n difficulty: PropTypes.string,\n guest_name: PropTypes.string,\n hid: PropTypes.string,\n id: PropTypes.number,\n name: PropTypes.string,\n one_liner: PropTypes.string,\n stats: PropTypes.shape({\n respects: PropTypes.number,\n views: PropTypes.number,\n }),\n team: PropTypes.shape({\n members: PropTypes.arrayOf(PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n })),\n name: PropTypes.string,\n }),\n url: PropTypes.string,\n })),\n ).isRequired,\n};\n\nexport default RecentContestsList;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { graphQuery } from '../../requests/graphql';\nimport errorHandler from '../../services/error_handler';\n\nimport ActiveContestsSection from './ActiveContestsSection';\nimport ContestCTABanner from './ContestCTABanner';\nimport PastContestsList from './PastContestsList';\nimport RecentContestsList from './RecentContestsList';\n\nimport { isBlank } from '../../utility/types';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\n\nimport { MEMBERSHIP_TIERS } from './enum';\n\nconst DEFAULT_METADATA = {\n current_page: 1,\n next_page: null,\n per_page: 8,\n prev_page: null,\n};\nconst PAST_CONTEST_PAGE_1_OFFSET = 3;\n\nclass ContestsPage extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isBusy: false,\n metadata: DEFAULT_METADATA,\n pastContests: [],\n projectsForRecentContests: {},\n workers: [], // ['past, recent']\n };\n\n this.getPaginatedPastContests = this.getPaginatedPastContests.bind(this);\n this.getProjectsForRecent = this.getProjectsForRecent.bind(this);\n }\n\n /**\n * Methods\n */\n getPaginatedPastContests() {\n this.setState((state) => ({ workers: this._addWorker(state, 'past') }));\n\n return graphQuery({ t: 'get_past_challenges' }, {\n offset: PAST_CONTEST_PAGE_1_OFFSET,\n page: (this.state.metadata.next_page || 1),\n per_page: this.state.metadata.per_page,\n })\n .then(({ past_contests }) => this.setState((state) => ({\n pastContests: state.pastContests.concat(past_contests.records),\n metadata: past_contests.metadata,\n workers: this._removeWorker(state, 'past'),\n })))\n .catch((err) => {\n // Let hang in loader state if the request fails.\n errorHandler('ContestsPage handlePaginatedPastContests', err);\n });\n }\n\n getProjectsForRecent() {\n this.setState((state) => ({ workers: this._addWorker(state, 'recent') }));\n\n return graphQuery({ t: 'get_projects_by_id' }, { ids: this.props.recent.map((c) => c.winning_projects_ids).flat() })\n .then(({ projects }) => this.setState((state) => ({\n projectsForRecentContests: this._createContestToProjectMap(this.props.recent, projects),\n workers: this._removeWorker(state, 'recent'),\n })))\n .catch((err) => {\n // Let hang in loader state if the request fails.\n errorHandler('ContestsPage getProjectsForRecent', err);\n });\n }\n\n /**\n * Helpers\n */\n _addWorker(state, key) {\n if (state.workers.includes(key)) return state;\n\n return state.workers.concat(key);\n }\n\n _removeWorker(state, key) {\n if (!state.workers.includes(key)) return state;\n\n return state.workers.filter((k) => k !== key);\n }\n\n _createContestToProjectMap(contests, projects) {\n if (isBlank(projects)) return {};\n\n return contests.reduce((acc, contest) => {\n acc[contest.id] = projects.filter((project) => contest.winning_projects_ids.includes(project.id));\n\n return acc;\n }, {});\n }\n\n render() {\n return (\n \n \n \n \n Contests\n
\n\n \n\n \n \n);\n\nconst _getHeader = (title, seeAllLink) => (\n \n {title}
\n {seeAllLink}\n \n);\n\nconst LocalVirtualEventsList = ({ events, eventType, getSeeAllLink, isDummyList, title }) => (\n \n \n {isDummyList ? _getDummyHeader() : _getHeader(title, getSeeAllLink(eventType))}\n \n \n {isDummyList ? _getDummyCards() : _getCards(events)}\n \n {!isDummyList && getSeeAllLink(eventType, false)}\n \n);\n\nLocalVirtualEventsList.propTypes = {\n eventType: PropTypes.string,\n events: PropTypes.arrayOf(PropTypes.shape({\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n custom_sponsors: PropTypes.arrayOf(PropTypes.string),\n event_type: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n image: PropTypes.shape({ url: PropTypes.string.isRequired }).isRequired,\n link: PropTypes.string.isRequired,\n platforms: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n url: PropTypes.string,\n })),\n start_date: PropTypes.stringisRequired,\n state: PropTypes.string,\n title: PropTypes.string.isRequired,\n user: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n })),\n getSeeAllLink: PropTypes.func,\n isDummyList: PropTypes.bool,\n title: PropTypes.string,\n};\n\nLocalVirtualEventsList.defaultProps = {\n eventType: null,\n events: null,\n getSeeAllLink: null,\n isDummyList: false,\n title: null,\n};\n\nexport default LocalVirtualEventsList;\n","import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ConfirmEmailMessage from '../../../client/reusable_components/ConfirmEmailMessage';\nimport EventCardHorizontalSmall from '../../../client/cards/event_card/EventCardHorizontalSmall.js';\nimport EventCardSponsoredLarge from '../../../client/cards/event_card/EventCardSponsoredLarge.js';\nimport EventCardSponsoredSmall from '../../../client/cards/event_card/EventCardSponsoredSmall.js';\nimport EventCardText from '../../../client/cards/event_card/EventCardText';\nimport GridList from '../../../client/wrappers/grid_list';\nimport LocalVirtualEventsList from './LocalVirtualEventsList';\n\nimport SeoHandler from '../../../services/seo_handler';\nimport currentUserService from '../../../services/current_user';\nimport errorHandler from '../../../services/error_handler';\nimport getGridClassNames from '../../../client/projects/projects_list/getGridClassNames';\nimport normalizedToQueryString from '../../../services/algolia/converters/normalizedToQueryString';\nimport seoConfig from '../seoConfig';\nimport { fireViewAllSectionClickAnalytics } from '../../../services/keen/mainServiceOperators';\nimport { getFormattedLocation } from '../../../services/country_data';\nimport { getSortEnum, getTimeFilterEnum } from '../../../graphql/events/enums';\nimport { graphQuery } from '../../../requests/graphql';\nimport { isBlank } from '../../../utility/types';\nimport { isSignedInUser } from '../../../utility/user_helpers';\nimport { summonGlobalDialog, summonLoginPanel } from '../../../utility/dispatchers';\n\nimport buttonStyles from '../../../styles/global_ui/buttons.css';\nimport gridStyles from '../../../styles/global_ui/grid.css';\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\nimport styles from './events_home_page.css';\n\nconst UPCOMING_LIST_MAX_COUNT = 9;\n\nconst DEFAULT_UPCOMING_QUERY_ARGS = {\n by_approved: true,\n by_sponsored: false,\n by_time: getTimeFilterEnum('upcoming'),\n sort: getSortEnum('most_recent', 1),\n};\n\nconst LOCAL_AND_VIRTUAL_KEYS = ['local_and_virtual', 'local', 'virtual'];\n\nconst LIST_CONFIG = {\n past: {\n title: 'Past events',\n card: EventCardText,\n },\n upcoming: {\n title: 'All other events',\n card: EventCardHorizontalSmall,\n },\n virtual: { title: 'Virtual events' },\n};\n\nconst seeAllLinkMobileStyles = `${layout.hiddenSmallUp} ${layout.flexJustifyCenter} ${layout.marginTop30}`;\n\nclass EventsHomePage extends Component {\n constructor(props) {\n super(props);\n this.state = {\n currentUser: null,\n initialized: false,\n events: this._initEventsFromProps(props.init_events),\n };\n\n this.getSeeAllLink = this.getSeeAllLink.bind(this);\n this.handleAddEventClick = this.handleAddEventClick.bind(this);\n\n this.seoHandler = new SeoHandler({ config: seoConfig });\n }\n\n /**\n * Lifecycle\n */\n componentDidMount() {\n this._init();\n }\n\n /**\n * Initializers\n */\n _init() {\n return Promise.all([currentUserService.getStoreAsync(), graphQuery({ t: 'events_home_custom' })])\n .then((results) => this._updateEventLists(results))\n .catch((err) => {\n this.setState({ initialized: true });\n errorHandler('EventsHomePage _init', err);\n });\n }\n\n _initEventsFromProps(events) {\n return {\n sponsored: events.home_config.sponsored,\n past: events.past,\n upcoming: events.upcoming,\n };\n }\n\n _updateEventLists([currentUser, { events_local_and_virtual }]) {\n this.setState((prevState) => ({\n currentUser,\n events: { ...prevState.events, ...events_local_and_virtual },\n initialized: true,\n }));\n\n this._updateUpcomingList(events_local_and_virtual);\n }\n\n _updateUpcomingList(localAndVirtualEvents) {\n const { blacklist, uniqueUpcomingEvents } = this._getDataForUpcomingListUpdate(localAndVirtualEvents);\n const additionalEventsCount = UPCOMING_LIST_MAX_COUNT - uniqueUpcomingEvents.length;\n\n if (additionalEventsCount < 1) return;\n\n return graphQuery({ t: 'events' }, { ...DEFAULT_UPCOMING_QUERY_ARGS, id_blacklist: blacklist, limit: additionalEventsCount })\n .then(({ events: moreUpcomingEvents }) => this.setState((prevState) => ({\n events: {\n ...prevState.events,\n upcoming: [...uniqueUpcomingEvents, ...moreUpcomingEvents],\n },\n })))\n .catch((err) => {\n errorHandler('EventsHomePage _updateUpcomingList', err);\n });\n }\n\n /**\n * Methods\n */\n handleAddEventClick(e) {\n if (!isSignedInUser(this.state.currentUser)) {\n e.preventDefault();\n\n return summonLoginPanel({ detail: { state: { currentPanel: 'signup' }, source: 'events_home' } });\n }\n\n if (!this.state.currentUser.isConfirmed) {\n e.preventDefault();\n\n return summonGlobalDialog({ getChildren: () => (\n {this._getListTitle(key)}\n
\n {this.getSeeAllLink(key)}\n \n {\n fireViewAllSectionClickAnalytics({\n delayRedirect: true,\n e,\n item: { type: 'view_all_link' },\n section: { key: 'event', value: key },\n url: href,\n });\n }}\n >\n \n {`See all ${key.split('_').join(' ')} events`}\n
\n \n );\n }\n\n _getSingleEventSponsoredList(event) {\n return (\n \n \n );\n }\n\n _getSponsoredList(events) {\n const gridClassNames = getGridClassNames(false, events.length, 30);\n\n return (\n \n {events.map((event, i) => (\n \n \n \n \n Events
\n \n Add an event\n \n \n\n {firstSponsoredEvent\n && (\n \n \n );\n }\n}\n\nEventsHomePage.propTypes = {\n init_events: PropTypes.shape({\n home_config: PropTypes.shape({ sponsored: PropTypes.array }),\n past: PropTypes.array,\n upcoming: PropTypes.array,\n }).isRequired,\n new_event_path: PropTypes.string.isRequired,\n search_path: PropTypes.string.isRequired,\n};\n\nexport default EventsHomePage;\n","import { DEFAULT_PAGE_DESCRIPTION, DEFAULT_PAGE_TITLE } from '../../constants/pageMetadata';\n\nconst getDefaultValues = (pageType) => ({\n meta_desc: DEFAULT_PAGE_DESCRIPTION,\n pageType,\n title: DEFAULT_PAGE_TITLE,\n});\n\nconst CONFIG = { '/': () => getDefaultValues('events#index') };\n\nexport default (path) => CONFIG[path];\n","import React, { useCallback, useState } from 'react';\n\nimport BannerSmallContestCard from '../../client/cards/contest_card/BannerSmallContestCard.js';\nimport LazyComponent from '../../client/wrappers/lazy_component';\n\nimport errorHandler from '../../services/error_handler';\nimport { graphQuery } from '../../requests/graphql.js';\n\nimport contestStyles from '../contests_page/contests_page.css';\nimport layout from '../../styles/global_ui/layout.css';\nimport gridStyles from '../../styles/global_ui/grid.css';\nimport utilStyles from '../../styles/global_ui/util.css';\n\nconst ContestSection = ({ userTier }) => {\n const [contests, setContests] = useState();\n\n const contestReveal = useCallback(() => {\n // TODO: I want to see the 2 most active contests\n // We don't have a sort for this. We do have counts for impressions, ideas, registrations, and projects. Which shall I use?\n // currently using `ends_last` method for ordering\n graphQuery({ t: 'get_active_challenges' }, { per_page: 2 })\n .then(({ active_contests }) => setContests(active_contests.records))\n .catch((err) => errorHandler('contestReveal', err));\n }, []);\n\n return (\n \n \n {contests?.map((contest) => (\n \n \n ))}\n \n \n );\n};\n\nexport default ContestSection;\n","import React, { useCallback, useState } from 'react';\n\nimport EventCardHorizontalSmall from '../../client/cards/event_card/EventCardHorizontalSmall.js';\nimport GridList from '../../client/wrappers/grid_list';\nimport LazyComponent from '../../client/wrappers/lazy_component';\nimport errorHandler from '../../services/error_handler';\nimport { graphQuery } from '../../requests/graphql.js';\n\nimport gridStyles from '../../styles/global_ui/grid.css';\n\nconst EventSection = () => {\n const [events, setEvents] = useState();\n\n const eventReveal = useCallback(() => {\n // TODO: we don't have a way to determine most active?\n graphQuery({ t: 'events_with_simple_pagination' }, { by_approved: true, per_page: 2, sort: 'START_DESC' })\n .then(({ events }) => setEvents(events))\n .catch((err) => errorHandler('eventReveal', err));\n }, []);\n\n return (\n \n \n );\n};\n\nexport default EventSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ProgressBar from '../../client/reusable_components/ProgressBar';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport styles from './feed.css';\n\nimport { ONBOARDING_STEPS, ONBOARDING_STEPS_ORDER_MAP } from '../user_onboarding_page/constants';\n\nfunction canAccessStep(step, index, lastStepCompleted, onboardingProgress) {\n if (index === 0) return true;\n if (!lastStepCompleted) return false;\n if (onboardingProgress.includes(step)) return true;\n\n return (ONBOARDING_STEPS_ORDER_MAP[lastStepCompleted] + 1) >= ONBOARDING_STEPS_ORDER_MAP[step];\n}\n\nconst FinishOnboarding = ({ onboardingProgress }) => {\n const percent = Math.floor((onboardingProgress.length / ONBOARDING_STEPS.length) * 100);\n const lastStepCompleted = onboardingProgress[onboardingProgress.length - 1];\n\n const steps = ONBOARDING_STEPS.map((step, index) => {\n const previousStep = ONBOARDING_STEPS[index - 1];\n\n const canAccess = canAccessStep(step, index, lastStepCompleted, onboardingProgress);\n const href = `/onboarding/${step}`;\n const isActive = lastStepCompleted === previousStep;\n const isDisabled = !isActive && !canAccess;\n\n return {\n href,\n isComplete: onboardingProgress.includes(step),\n isActive,\n isDisabled,\n isLast: index >= ONBOARDING_STEPS.length - 1,\n name: step,\n };\n });\n\n return (\n \n \n \n {percent < Math.floor((1 / ONBOARDING_STEPS.length) * 100) ? 'Complete your onboarding!' : \"You're almost done onboarding!\"}\n
\n Continue where you left off\n \n \n \n {percent}\n % complete\n
\n \n \n );\n};\n\nFinishOnboarding.propTypes = { onboardingProgress: PropTypes.arrayOf(PropTypes.oneOf(['activities', 'info', 'interests'])).isRequired };\n\nexport default FinishOnboarding;\n","import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from '../../client/buttons/base';\nimport Icon from '../../client/icon';\nimport ProjectsList from '../../client/projects/projects_list';\nimport smoothScroll from '../../client/utils/smoothScroll';\nimport isMobileBrowser from '../../utility/isMobileBrowser';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport utilStyles from '../../styles/global_ui/util.css';\nimport styles from './feed.css';\n\nconst ProjectSection = ({ projects }) => {\n // defaults to showing 4 projects when on mobile, or 8 on desktop\n const isMobile = isMobileBrowser();\n const defaultShowing = isMobile ? 4 : 8;\n const [showAllProjects, setShowAll] = useState(false);\n const projectsList = projects?.slice(0, showAllProjects ? 64 : defaultShowing);\n const projectListRef = useRef(null);\n\n const [scrollLocation, setScrollLocation] = useState();\n\n const buttonRef = useCallback((node) => {\n if (node !== null) {\n setScrollLocation(node.getBoundingClientRect().top);\n }\n }, []);\n\n const handleClick = useCallback(() => {\n setShowAll(!showAllProjects);\n if (showAllProjects) {\n smoothScroll(scrollLocation);\n }\n }, [showAllProjects, scrollLocation]);\n\n useEffect(() => {\n if (showAllProjects) {\n const firstNewItem = projectListRef.current.children[defaultShowing].getElementsByTagName('a')[0];\n // We want the user on on the first newly added item, but we don't necessarily need them focused.\n firstNewItem.focus();\n firstNewItem.blur();\n }\n }, [defaultShowing, showAllProjects]);\n\n return (\n <>\n \n \n {showAllProjects ? 'View less' : 'View more'}\n \n \n \n );\n};\n\nProjectSection.propTypes = { projects: PropTypes.arrayOf(PropTypes.shape({})).isRequired };\n\nexport default ProjectSection;\n","import React, { useCallback, useState, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Close } from '@radix-ui/react-popover';\n\nimport setTooltipAsViewed from '../../requests/tooltips';\nimport errorHandler from '../../services/error_handler';\n\nimport Icon from '../../client/icon';\nimport Popup from '../../client/reusable_components/Popup';\nimport { SURVEY_SLUG } from '../../client/reusable_components/SurveyPopup/enums';\n\nimport animation from '../../styles/global_ui/animation.css';\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport util from '../../styles/global_ui/util.css';\nimport style from './tour.css';\nimport Button from '../../client/buttons/base';\n\n// These ids are stored in 👇🏼\n// app/react/client/reusable_components/NewFeatureTooltip/store.js\nexport const TIPS = [{\n content: 'Here you can find recommendations for projects, videos and more! You can update your interests at any time.',\n id: 12,\n selectorIds: ['#feed-update-preferences'],\n title: 'Welcome to your feed!',\n},\n{\n content: 'Share your projects with the community by uploading a project here.',\n id: 13,\n selectorIds: ['#top-nav-create-project'],\n title: \n Close\n \n {showNext && }\n \n \n \n );\n};\n\nTip.propTypes = {\n content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n currentId: PropTypes.number,\n handleNext: PropTypes.func,\n handleTipClose: PropTypes.func,\n showNext: PropTypes.bool,\n steps: PropTypes.arrayOf(PropTypes.shape({\n content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n id: PropTypes.number,\n selectorIds: PropTypes.arrayOf(PropTypes.string),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n })),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n\nconst Tour = ({ viewedTips: previouslyViewed }) => {\n const startingId = IDS.find((id) => !previouslyViewed.includes(id));\n const [nodeSearchInterval, setNodeSearchInterval] = useState(startingId ? 300 : null);\n const [allRefs, setAllRefs] = useState();\n // the order tips appear in is currently based on the index which we increment by 1 with handleNext.\n const [remainingTips, setRemainingTips] = useState();\n const [viewedTips, setViewedTips] = useState([]);\n const [currentTip, setCurrentTip] = useState();\n const anchor = useRef(null);\n\n const handleTipClose = useCallback(() => {\n setCurrentTip(null); // removes popup without triggering close event\n\n // Set all tips not yet seen as seen when dismissing any tip. We are assuming that if they initially close the tour, they do not want to see any more tips that are a part of this tour.\n const ids = remainingTips.map(({ id }) => id);\n const remainingIds = ids.filter((id) => !viewedTips.includes(id));\n\n setTooltipAsViewed(remainingIds.join(','))\n .catch((err) => {\n errorHandler('setTooltipAsViewed Error: ', err);\n });\n }, [remainingTips, viewedTips]);\n\n const handleNext = useCallback(() => {\n const currentIndex = remainingTips.findIndex(({ id }) => id === currentTip.id);\n const nextTip = remainingTips[currentIndex + 1];\n const nextRef = allRefs[nextTip?.id];\n\n setTooltipAsViewed(currentTip.id)\n .then(() => {\n anchor.current = nextRef;\n setCurrentTip(nextTip);\n setViewedTips([...viewedTips, currentTip.id]);\n })\n .catch((err) => {\n errorHandler('setTooltipAsViewed Error: ', err);\n });\n }, [allRefs, currentTip?.id, remainingTips, viewedTips]);\n\n const handleDismiss = useCallback(() => {\n if (!currentTip) return;\n\n setTooltipAsViewed(currentTip.id)\n .then(() => setCurrentTip(null))\n .catch((err) => {\n errorHandler('setTooltipAsViewed Error: ', err);\n });\n }, [currentTip]);\n\n // Once the dom is ready, look for all nodes that are visible on the screen.\n useEffect(() => {\n // Don't look for nodes until nav bar has loaded.\n if (nodeSearchInterval) {\n return;\n }\n // we only care about tips in our list that they haven't seen yet.\n const tips = TIPS.filter((tip) => !previouslyViewed.includes(tip.id));\n // A node might be hidden on mobile, when that is the case we should skip that node and look for the next.\n // If none are visible, skip that tip.\n const refs = tips.reduce((obj, tip) => {\n const node = getRef(tip.selectorIds);\n if (!node) {\n return obj;\n } else {\n return { ...obj, [tip.id]: node };\n }\n }, {});\n // filter the list again to only include those that are visible.\n const filteredTips = tips.filter(({ id }) => refs[id]);\n const startingTip = filteredTips.find(({ id }) => Object.keys(refs).includes(id.toString()));\n const currentRef = refs[startingTip?.id];\n\n if (!currentRef) {\n setCurrentTip(null);\n return;\n }\n\n anchor.current = currentRef;\n setAllRefs(refs);\n setRemainingTips(filteredTips);\n setCurrentTip(startingTip);\n }, [nodeSearchInterval, previouslyViewed]);\n\n // This effect should only happen on mount. We need to check if portion of the dom where our refs are located has hydrated.\n useEffect(() => {\n if (!nodeSearchInterval) {\n return;\n }\n\n let found = false;\n // Nav bar might not be on the dom yet, poll until we can find it.\n const find = setInterval(() => {\n found = getRef(['#main-links-nav']);\n if (found) {\n setNodeSearchInterval(null);\n return;\n }\n }, nodeSearchInterval);\n\n return () => clearInterval(find);\n }, [nodeSearchInterval]);\n\n if (!currentTip) {\n return null;\n }\n\n return (\n !isOpen && handleDismiss()}\n side=\"bottom\"\n testId={`feed-tour-id-${currentTip.id}`}\n >\n \n \n );\n};\n\nexport default VideoSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ContestSection from './ContestSection.js';\nimport EventSection from './EventSection.js';\nimport FinishOnboarding from './FinishOnboarding.js';\nimport Tour from './Tour.js';\nimport ProjectSection from './ProjectsSection.js';\nimport VideoSection from './VideoSection.js';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport util from '../../styles/global_ui/util.css';\nimport { ONBOARDING_STEPS } from '../user_onboarding_page/constants.js';\n\nconst Section = ({ children, title }) => (\n \n \n {title}\n
\n {children}\n \n);\n\nSection.propTypes = {\n children: PropTypes.node.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nconst FeedPage = ({ projects, onboarding_progress, viewed_tips, userTier }) => {\n const onboardingCompleted\n = onboarding_progress.includes('v1')\n || onboarding_progress.length === ONBOARDING_STEPS.length;\n\n return (\n \n step !== 'v1',\n )}\n />\n )\n : null}\n \n \n My feed\n
\n \n Update your interests\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nconst metadata = PropTypes.shape({\n current_page: PropTypes.number,\n next_page: PropTypes.number,\n per_page: PropTypes.number,\n prev_page: PropTypes.number,\n});\n\nFeedPage.propTypes = {\n projects: PropTypes.shape({\n metadata: metadata,\n records: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n};\n\nexport default FeedPage;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ArticleLayout from './article_layout';\nimport ArticleStickyFooter from './templates/sticky_actions/ArticleStickyFooter';\nimport LatestArticlesBottom from './templates/latest_articles/LatestArticlesBottom';\nimport RelatedArticlesBottom from './templates/related_articles/RelatedArticlesBottom';\n\nimport errorHandler from '../../../services/error_handler';\nimport { graphQuery } from '../../../requests/graphql';\nimport { timeIsFuture } from '../../../utility/time';\n\nimport { PUBLISHED_STATUS } from '../../../graphql/news/enums';\n\nimport layout from '../../../styles/global_ui/layout.css';\n\n// TODO: Either make a unique graphQL query to fetch all the news_article_page_suggested_articles at once to avoid\n// duplicate records between the latestArticles and relatedArticles or wrap the RelatedArticles in a lazy loader\n// to fetch seperately passing in the latestsArticle ids to de-dupe.\nclass NewsArticlePage extends PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n isPreview: this._isPreview(props.article),\n latestArticles: {\n bar: null,\n bottom: null,\n side: null,\n },\n relatedArticles: {\n bottom: null,\n side: null,\n },\n sponsoredArticles: null,\n };\n }\n\n /**\n * Lifecycle\n */\n componentDidMount() {\n if (!this.state.isPreview) this._fetchSuggestedArticles();\n }\n\n /**\n * Helpers\n */\n _fetchSuggestedArticles() {\n return graphQuery({ t: 'news_article_page_suggested_articles' }, { id: this.props.article.id })\n .then(({ article, latest_articles, sponsored_articles }) => {\n this.setState({\n latestArticles: this._splitLatestArticles(latest_articles),\n relatedArticles: this._splitRelatedArticles(article.related_news_articles),\n sponsoredArticles: sponsored_articles,\n });\n })\n .catch((err) => errorHandler('NewsArticlePage _fetchSuggestedArticles:', err));\n }\n\n _isPreview(article) {\n return article.status !== PUBLISHED_STATUS || timeIsFuture(article.published_at);\n }\n\n _splitLatestArticles(records) {\n return {\n bar: records.slice(0, 1),\n bottom: records.slice(4, 8),\n side: records.slice(0, 4),\n };\n }\n\n _splitRelatedArticles(records) {\n return {\n bottom: records.slice(4, 8),\n side: records.slice(0, 4),\n };\n }\n\n render() {\n const { article, social_sharing_links } = this.props;\n const { isPreview, latestArticles, relatedArticles, sponsoredArticles } = this.state;\n\n return (\n \n \n \n \n \n Next article
\n \n {record.title}\n \n \n \n \n );\n};\n\nLatestArticlesBar.propTypes = {\n records: PropTypes.arrayOf(PropTypes.shape({\n title: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })),\n};\n\nLatestArticlesBar.defaultProps = { records: null };\n\nexport default LatestArticlesBar;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ArticlesList from '../../../shared/articles_list';\n\nimport gridStyles from '../../../../../styles/global_ui/grid.css';\nimport layout from '../../../../../styles/global_ui/layout.css';\nimport utilStyles from '../../../../../styles/global_ui/util.css';\nimport typography from '../../../../../styles/global_ui/typography.css';\n\nconst LatestArticlesBottom = ({ records }) => {\n if (records && records.length === 0) return null;\n\n return (\n \n \n Latest articles
\n Read more\n \n\n \n Related articles\n
\n \n \n \n \n \n \n \n \n );\n }\n\n _getNewsPageHeroAdView() {\n return (\n \n All articles\n
\n\n {/* minHeight: 1 to force intersection on MS Edge */}\n \n \n \n);\n\nMoreArticlesSection.propTypes = {\n getArticles: PropTypes.func.isRequired,\n injectableConfig: PropTypes.shape({\n component: PropTypes.func,\n index: PropTypes.number,\n props: PropTypes.shape({\n ad: PropTypes.object,\n initialized: PropTypes.bool,\n }),\n }),\n isBusy: PropTypes.bool,\n pagination: PropTypes.shape({\n current_page: PropTypes.number,\n next_page: PropTypes.number,\n per_page: PropTypes.number,\n prev_page: PropTypes.number,\n }).isRequired,\n records: PropTypes.arrayOf(PropTypes.object),\n};\n\nMoreArticlesSection.defaultProps = {\n injectableConfig: null,\n isBusy: false,\n records: null,\n};\n\nexport default MoreArticlesSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport NewsArticleSponsoredCardLarge from '../../../client/cards/news_article/sponsored_card_large';\n\nimport { isBlank } from '../../../utility/types';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport gridStyles from '../../../styles/global_ui/grid.css';\nimport styles from './news_home_page.css';\n\nconst SponsoredSection = ({ records }) => {\n if (isBlank(records)) return null;\n\n return (\n \n \n \n \n {records.map((record, i) => (\n \n \n sponsored articles\n
\n \n \n \n );\n};\n\nSponsoredSection.propTypes = {\n records: PropTypes.arrayOf(PropTypes.shape({\n image: PropTypes.shape({ url: PropTypes.string.isRequired }),\n sponsor_link: PropTypes.string.isRequired,\n sponsor_name: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n user: PropTypes.shape({\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }),\n url: PropTypes.string.isRequired,\n })),\n};\n\nSponsoredSection.defaultProps = { records: null };\n\nexport default SponsoredSection;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport TabbedHeader from '../../../client/nav_components/tabbed_header';\nimport NewsArticleLightCard from '../../../client/cards/news_article/light_card';\nimport NewsArticleLightDummyCard from '../../../client/cards/news_article/light_card/dummy';\n\nimport styles from './news_home_page.css';\n\nconst ANALYTICS_LOCATION = 'news_page_middle';\nconst NAV_ITEMS = ['Latest', 'Trending'];\n\nclass TrendingSection extends Component {\n constructor(props) {\n super(props);\n\n this.state = { activeTabIndex: 0 };\n\n this.handleNavClick = this.handleNavClick.bind(this);\n }\n\n /**\n * Methods\n */\n handleNavClick(activeTabIndex) {\n if (activeTabIndex === 0) this.props.onLatestClick();\n if (activeTabIndex === 1 && !this.props.trending) this.props.getTrendingRecords();\n this.setState({ activeTabIndex });\n }\n\n /**\n * Views\n */\n _getViewForActiveIndex() {\n return this._getListView(NAV_ITEMS[this.state.activeTabIndex].toLowerCase());\n }\n\n _getListView(type) {\n if (type === 'trending' && !this.props.trending) return this._getLoaderView();\n\n return (\n \n {this.props[type].map((record) => (\n \n \n \n \n \n \n this._getTrendingArticles()}\n latest={this.state.latest}\n onLatestClick={() => this.setState({ timeFromNowSync: this.state.timeFromNowSync + 1 })}\n trending={this.state.trending}\n />\n \n \n \n \n \n this._fetchPaginatedArticlesWithAds()}\n injectableConfig={this._getInjectableConfigForMoreArticlesSection()}\n isBusy={this.state.isBusy}\n pagination={this.state.pagination}\n records={this.state.records}\n />\n \n \n \n );\n }\n\n _getArticlesListView() {\n return (\n \n \n this._fetchMoreRecordsForTopic()}\n isBusy={this.state.isBusy}\n />\n \n \n );\n }\n\n render() {\n return (\n \n \n \n News
\n \n this.handleSearchQueryUpdate({ [TOPIC_QUERY_PARAM]: opt.value, page: null })}\n options={this._getTopicFilterOptions()}\n tabbedViewUnderline={false}\n view=\"tabbed\"\n />\n \n \n \n {this._getMainView()}\n \n );\n }\n}\n\nNewsHomePage.propTypes = {\n ad_urls: PropTypes.shape({\n banner: PropTypes.shape({\n href: PropTypes.string.isRequired,\n mobile_url: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n featured: PropTypes.arrayOf(PropTypes.object).isRequired,\n latest: PropTypes.arrayOf(PropTypes.object).isRequired,\n path_helpers: PropTypes.shape({\n basePath: PropTypes.string.isRequired,\n fullPath: PropTypes.string.isRequired,\n rootPath: PropTypes.string.isRequired,\n }).isRequired,\n sponsored: PropTypes.arrayOf(PropTypes.shape({})),\n topic_articles: PropTypes.objectOf( // The nested key will map to the topic value dynamically\n PropTypes.shape({\n metadata: PropTypes.object,\n records: PropTypes.arrayOf(PropTypes.object),\n }),\n ),\n topic_filters: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n href: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n })).isRequired,\n};\n\nNewsHomePage.defaultProps = { topic_articles: null };\n\nexport default NewsHomePage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport DummyBaseCardVertical from '../../../../client/cards/base_card/vertical/DummyBaseCardVertical';\nimport GridList from '../../../../client/wrappers/grid_list';\nimport NewsArticleCard from '../../../../client/cards/news_article';\nimport PaginatedList from '../../../../client/wrappers/paginated_list';\n\nimport keenService from '../../../../services/keen/main';\nimport { getClickedButtonArgs } from '../../../../services/keen/events/eventTypeTemplates';\n\nconst ArticlesList = ({\n articles,\n className,\n handlePaginatorClick,\n gutterSize,\n horizontal,\n injectableConfig,\n isBusy,\n location,\n maxCols,\n onUserProfile,\n}) => (\n {\n keenService.reportEventWithObj(getClickedButtonArgs({ location }, e));\n handlePaginatorClick(e);\n }}\n paginator={{\n currentPage: articles.metadata.current_page,\n nextPage: articles.metadata.next_page,\n prevPage: articles.metadata.prev_page,\n }}\n type=\"button\"\n >\n \n Explore projects\n
\n \n \n {option.label}
\n \n {hasImageArray\n ? (\n \n {option.imageUrl.map((image) => (\n {option.subText}
\n \n \n \n );\n};\n\nconst Activities = ({\n activities,\n options,\n setSelectedActivities,\n}) => {\n const formattedOpts = options.map((key) => ({\n ...ACTIVITY_LABEL_MAP[key],\n value: key,\n }));\n\n const handleUpdate = ({ value, checked }) => {\n const updatedActivities = checked\n ? [...activities, value]\n : activities.filter((activity) => value !== activity);\n\n setSelectedActivities(updatedActivities);\n\n return graphMutate({ t: 'update_user_activities' }, { [value]: checked })\n .catch((err) => {\n if (err?.status && err.status >= 400) {\n setSelectedActivities(activities);\n summonGlobalMessenger({ msg: 'Oops, something went wrong. Try again later.', type: 'error' });\n }\n\n errorHandler('updateActivities Error: ', err);\n });\n };\n\n useLayoutEffect(() => {\n // scroll to top\n window?.scrollTo({ top: 0 });\n }, []);\n\n return (\n \n \n {formattedOpts.map((option) => (\n \n );\n};\n\nActivities.propTypes = {\n activities: PropTypes.arrayOf(PropTypes.string),\n options: PropTypes.arrayOf(PropTypes.string).isRequired,\n setSelectedActivities: PropTypes.func.isRequired,\n};\n\nActivities.defaultProps = { activities: [] };\n\nexport default Activities;\n","import React, { useLayoutEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport LazyImage from '../../client/reusable_components/LazyImage';\nimport FormCountrySelect from '../../client/form_components/selects/form_country_select';\nimport FormSelect from '../../client/form_components/selects/form_select';\nimport Tooltip from '../../client/reusable_components/Tooltip';\n\nimport { jobOptsFormatter, objectToOptions, skillLevelOptsFormatter } from './helpers';\nimport { InfoPageOptions } from './types';\nimport { graphMutate } from '../../requests/graphql';\nimport errorHandler from '../../services/error_handler';\nimport { getInObj } from '../../utility/accessors';\nimport { isBlank } from '../../utility/types';\n\nimport inputStyles from '../../styles/global_ui/inputs.css';\nimport layout from '../../styles/global_ui/layout.css';\nimport util from '../../styles/global_ui/util.css';\nimport styles from './info.css';\n\nconst INPUT_INFO = {\n country: { label: 'What country do you live in?', tooltip: 'This helps us suggest events in your area. This can be hidden from your profile.' },\n industry: { label: 'What is your industry?', tooltip: 'This helps us suggest news, projects, and other content most relevant to your industry.' },\n job: { label: 'What do you do for work?', tooltip: 'This helps us suggest news, projects, and other content most relevant to your occupation.' },\n skillLevel: { label: 'What is your skill level?', tooltip: 'This helps us suggest projects and parts most useful to you.' },\n};\n\nconst InputLabel = ({ type }) => {\n const { label, tooltip } = INPUT_INFO[type];\n\n return (\n \n {label}\n \n \n \n \n \n \n \n \n {option.name}\n \n \n \n );\n};\n\nInterestsCard.propTypes = {\n handleUpdate: PropTypes.func.isRequired,\n option: PropTypes.shape({\n avatar_url: PropTypes.string,\n checked: PropTypes.bool.isRequired,\n id: PropTypes.number.isRequired,\n image_url: PropTypes.string,\n name: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default InterestsCard;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport InterestsCard from './InterestCard';\nimport GridList from '../../client/wrappers/grid_list';\nimport Tooltip from '../../client/reusable_components/Tooltip';\n\nimport animation from '../../styles/animation.css';\nimport grid from '../../styles/global_ui/grid.css';\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport utilStyles from '../../styles/global_ui/util.css';\nimport styles from './interests.css';\n\nimport { CHANNEL_TYPE_ENUM } from './constants';\n\nconst INTEREST_TYPE_TO_SECTION_INFO = {\n communities: { title: 'Community Hubs', tooltip: 'Community hubs are a place for schools, makerspaces and other organizations to build and organize their community.' },\n platforms: { title: 'Platform Hubs', tooltip: 'Platform hubs are a place for hardware and software platforms to showcase their products and what the community is creating with them.' },\n products: { title: 'Products', tooltip: '' },\n search: { title: 'Search Results', tooltip: null },\n selected: { title: 'Selected', tooltip: null },\n topics: { title: 'Topic Pages', tooltip: 'Topic pages are a place for users to get inspired by projects and have discussions centered around a specific theme or topic. ' },\n};\n\n// Note: Adapted from DummyBaseCardVertical.\nconst DummyCard = () => (\n \n \n \n \n \n);\n\nconst genericTypeFromEnum = (enumType) => CHANNEL_TYPE_ENUM.includes(enumType) ? 'channels' : 'products';\n\nconst InterestSection = ({ createInterest, deleteInterest, interests, isBusy, options, sectionType }) => {\n const { title, tooltip } = INTEREST_TYPE_TO_SECTION_INFO[sectionType];\n\n const optsWithChecked = useMemo(() => (\n options.map((opt) => {\n const checked = interests[genericTypeFromEnum(opt.type)].includes(opt.id);\n return { ...opt, checked };\n })\n ), [options, interests]);\n\n const handleUpdate = ({ value, checked }) => {\n checked\n ? createInterest(value)\n : deleteInterest(value);\n };\n\n return (\n \n \n \n {(optsWithChecked.length === 0 && ['selected', 'search'].includes(sectionType) && !isBusy) ? 'No matches found. Try searching or filtering for something else.' : title }\n
\n \n {tooltip && \n );\n};\n\nInterestSection.propTypes = {\n createInterest: PropTypes.func.isRequired,\n deleteInterest: PropTypes.func.isRequired,\n interests: PropTypes.shape({\n channels: PropTypes.arrayOf(PropTypes.number).isRequired,\n products: PropTypes.arrayOf(PropTypes.number).isRequired,\n }).isRequired,\n isBusy: PropTypes.bool.isRequired,\n options: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string,\n id: PropTypes.number.isRequired,\n image_url: PropTypes.string,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n }).isRequired),\n sectionType: PropTypes.string.isRequired,\n};\n\nexport default InterestSection;\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport InterestSection from './InterestSection';\n\n// Note: Simple wrapper to fetch additional/different options outside of the initial SSR'd options.\nconst InterestSectionAsync = ({ getOptions, ...props }) => {\n const [options, setOptions] = useState([]);\n\n useEffect(() => {\n let ignore = false;\n\n getOptions()\n .then((fetchedOpts) => { if (!ignore) setOptions(fetchedOpts); });\n\n return () => {\n ignore = true;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const propsWithOpts = { ...props, options };\n return (= 3 ? utilStyles.hidden : ''} ${typography.bodyS} ${typography.error} ${styles.selectedCount} ${className}`}>\n Select at least\n {' '}\n {Math.max(3 - count, 0)}\n {' '}\n more\n
\n);\n\nconst Interests = ({\n defaultFilter,\n options,\n setSelectedCommunities,\n setSelectedPlatforms,\n setSelectedProducts,\n setSelectedTopics,\n userId,\n ...props\n}) => {\n const { communities, platforms, products, topics } = props;\n const selectedInterestsCount = [communities, platforms, products, topics].flat().length;\n const [isBusy, setIsBusy] = useState(false);\n\n const [filter, setFilter] = useState(defaultFilter || '');\n const [searchActive, setSearchActive] = useState(false);\n const [searchResults, setSearchResults] = useState([]);\n\n /**\n * Helpers\n */\n const resetSearch = () => {\n if (!searchActive) return;\n\n setSearchActive(false);\n setSearchResults([]);\n };\n\n const handleFilterChange = (opt) => {\n setFilter((opt && opt.value) || '');\n };\n\n /**\n * Requests\n */\n const fetchAllInterests = () => {\n setIsBusy(true);\n\n return graphMutate({ t: 'get_user_channels_and_products' }, { user_id: userId })\n .then(({ records: { channels, products } }) => [...channels, ...products].sort((a, b) => {\n if (a.user_joined_at < b.user_joined_at) return 1;\n if (a.user_joined_at > b.user_joined_at) return -1;\n return 0;\n }))\n .catch((err) => {\n errorHandler('UserOnboardingPage/Interests fetchAllInterests Error: ', err);\n })\n .finally(() => {\n setIsBusy(false);\n });\n };\n\n const handleChannelMemberCreation = (id, type) => {\n if (type === 'Community') setSelectedCommunities([...communities, id]);\n if (type === 'Platform') setSelectedPlatforms([...platforms, id]);\n if (type === 'TopicChannel') setSelectedTopics([...topics, id]);\n\n return graphMutate({ t: 'create_channel_member' }, { id: id })\n .catch((err) => {\n errorHandler('UserOnboardingPage/Interests handleChannelMemberCreation Error: ', err);\n });\n };\n\n const handleChannelMemberDeletion = (id, type) => {\n if (type === 'Community') setSelectedCommunities(communities.filter((val) => val !== id));\n if (type === 'Platform') setSelectedPlatforms(platforms.filter((val) => val !== id));\n if (type === 'TopicChannel') setSelectedTopics(topics.filter((val) => val !== id));\n\n graphMutate({ t: 'delete_channel_member' }, { id: id })\n .catch((err) => {\n errorHandler('UserOnboardingPage/Interests handleChannelMemberDeletion Error: ', err);\n });\n };\n\n const handlePartUserCreation = (id) => {\n setSelectedProducts([...products, id]);\n return graphMutate({ t: 'create_part_user' }, { id: id })\n .catch((err) => {\n setSelectedProducts(products);\n errorHandler('UserOnboardingPage/Interests handlePartUserCreation Error: ', err);\n });\n };\n\n const handlePartUserDeletion = (id) => {\n setSelectedProducts(products.filter((val) => val !== id));\n graphMutate({ t: 'delete_part_user' }, { id: id })\n .catch((err) => {\n setSelectedProducts(products);\n errorHandler('UserOnboardingPage/Interests handlePartUserDeletion Error: ', err);\n });\n };\n\n const handleSearch = (queryStr) => {\n // If user clears search, clear results and return early.\n if (isBlank(queryStr)) {\n resetSearch();\n return;\n }\n\n setSearchActive(true);\n setIsBusy(true);\n windowScrollTo(0, 0);\n\n // v2: Right now, search max is 24 results. We can add pagination/endless scroll if we want.\n const queryObjs = [\n { indexName: 'parts', params: { attributesToRetrieve: ['id', 'image_url', 'model', 'name'], hitsPerPage: '12' }, query: queryStr, sort: 'most_owned' }, // TODO: See if we want sort here? Can test on algolia UI.\n { indexName: 'channels', params: { attributesToRetrieve: ['id', 'avatar_url', 'model', 'name'], hitsPerPage: '12' }, query: queryStr, sort: null },\n ];\n\n return searchMultipleIndexes(queryObjs)\n .then(({ results }) => {\n const [parts, channels] = results;\n const resultsWithProperType = [...channels.hits, ...parts.hits].map((hit) => ({ ...hit, type: hit.model === 'Part' ? 'PART' : hit.model }));\n setSearchResults(resultsWithProperType); // TODO: b/c these are 2 separate indexes, the response is also separated. Can randomize/mix/merge the results on our end if desired.\n setIsBusy(false);\n })\n .catch((err) => {\n setIsBusy(false);\n errorHandler('UserOnboardingPage/Interests', err);\n });\n };\n const debouncedHandleSearch = debounce(handleSearch, 300);\n\n /**\n * Methods\n */\n const handleCreateInterest = ({ id, type }) => {\n PART_TYPE_ENUM.includes(type) ? handlePartUserCreation(id) : handleChannelMemberCreation(id, type);\n };\n\n const handleDeleteInterest = ({ id, type }) => {\n PART_TYPE_ENUM.includes(type) ? handlePartUserDeletion(id) : handleChannelMemberDeletion(id, type);\n };\n\n /**\n * Views\n */\n const getSectionView = () => {\n if (searchActive) {\n if (filter) {\n return (\n [...communities, ...platforms, ...topics, ...products].includes(sr.id)) // Only show searchResults a user has previously selected.\n : searchResults.filter((sr) => SEARCH_TYPE_TO_FILTER_MAP[sr.type] === filter) // Filter search results by type.\n }\n sectionType=\"search\"\n />\n );\n } else {\n return (\n \n \n\n {getSectionView()}\n \n );\n};\n\nInterests.propTypes = {\n communities: PropTypes.arrayOf(PropTypes.number),\n defaultFilter: PropTypes.string,\n options: PropTypes.shape({\n communities: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n platforms: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n products: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n image_url: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n topics: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n }).isRequired,\n platforms: PropTypes.arrayOf(PropTypes.number),\n products: PropTypes.arrayOf(PropTypes.number),\n setSelectedCommunities: PropTypes.func.isRequired,\n setSelectedPlatforms: PropTypes.func.isRequired,\n setSelectedProducts: PropTypes.func.isRequired,\n setSelectedTopics: PropTypes.func.isRequired,\n topics: PropTypes.arrayOf(PropTypes.number),\n userId: PropTypes.number.isRequired,\n};\n\nInterests.defaultProps = {\n communities: [],\n defaultFilter: '',\n platforms: [],\n products: [],\n topics: [],\n};\n\nexport default Interests;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Breadcrumb from '../../client/nav_components/breadcrumb';\nimport Button from '../../client/buttons/base';\nimport ProgressBar from '../../client/reusable_components/ProgressBar';\nimport Step from './Step';\n\nimport { graphMutate } from '../../requests/graphql';\nimport errorHandler from '../../services/error_handler';\nimport { InfoPageOptions } from './types';\nimport { windowLocationRedirect } from '../../services/window';\n\nimport HacksterLogo from '../../client/reusable_components/HacksterLogo';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport typography from '../../styles/global_ui/typography.css';\nimport util from '../../styles/global_ui/util.css';\nimport style from './layout.css';\n\nimport { ONBOARDING_STEPS, ONBOARDING_STEPS_ENUM_MAP, ONBOARDING_STEPS_ORDER_MAP, ONBOARDING_STEPS_VALUE_MAP } from './constants';\n\nconst c = {\n footerContainer: ({ fixedFooter }) => `${fixedFooter ? style.fixed : layout.paddingTop15} ${layout.fullWidth} ${util.bgWhite} ${style.footer}`,\n footer: ({ fixedFooter }) => `${fixedFooter ? layout.wrapper1170 : ''} ${layout.marginAuto} ${layout.fullWidth} ${layout.flexCenterItems} ${layout.flexJustifySpaceBetween}`,\n footerRight: `${layout.flexJustifyEnd} ${layout.gutter15} ${style.footerRight}`,\n finishLater: `${typography.linkPebble} ${typography.bold}`,\n};\n\nfunction getParams(history) {\n if (!history.location?.search) return {};\n\n return Object.fromEntries(new URLSearchParams(history.location.search));\n}\n\nconst OnboardingLayout = ({\n canContinue,\n currentPath,\n history,\n options,\n progress,\n selectedActivities,\n selectedCommunities,\n selectedCountry,\n selectedIndustry,\n selectedJob,\n selectedPlatforms,\n selectedProducts,\n selectedSkillLevel,\n selectedTopics,\n setSelectedActivities,\n setSelectedCommunities,\n setSelectedCountry,\n setSelectedIndustry,\n setSelectedJob,\n setSelectedPlatforms,\n setSelectedProducts,\n setSelectedSkillLevel,\n setSelectedTopics,\n showGreeting,\n userId,\n}) => {\n const hasBackBtn = currentPath !== 'activities';\n const fixedFooter = currentPath === 'interests';\n const nextStepIsDashboard = currentPath === 'info';\n const [onboardingProgress, setOnboardingProgress] = useState(progress);\n\n const steps = ONBOARDING_STEPS.map((step, index) => {\n const lastStepCompleted = onboardingProgress[onboardingProgress.length - 1];\n const canAccess = onboardingProgress.includes(step)\n || ((ONBOARDING_STEPS_ORDER_MAP[lastStepCompleted] + 1) >= ONBOARDING_STEPS_ORDER_MAP[step]);\n const currentIndex = ONBOARDING_STEPS.indexOf(currentPath);\n const isComplete = index < currentIndex;\n const isDisabled = onboardingProgress.length === 0 || !canAccess;\n\n const onClick = (e) => {\n e.preventDefault();\n if (isDisabled) return;\n\n history.push(step);\n };\n\n return {\n isActive: step === currentPath,\n isComplete,\n isDisabled,\n isLast: index >= ONBOARDING_STEPS.length - 1,\n href: `/onboarding/${step}`,\n name: step,\n onClick,\n };\n });\n\n const getDesiredStepRoute = (currentPath, num) => ONBOARDING_STEPS[ONBOARDING_STEPS.indexOf(currentPath) + num];\n\n const updateOnboardingProgress = (step) => (\n graphMutate({ t: 'update_user_onboarding_progress_temp' }, { step })\n .then(({ user: { onboarding_progress_temp } }) => {\n setOnboardingProgress(onboarding_progress_temp.map((step) => ONBOARDING_STEPS_VALUE_MAP[step]));\n })\n .catch((err) => {\n errorHandler('UserOnboardingPage updateOnboardingProgress Error:', err);\n })\n );\n\n const handleContinueClick = async () => {\n if (!canContinue) return;\n\n if (ONBOARDING_STEPS.includes(currentPath) && !onboardingProgress.includes(currentPath)) {\n await updateOnboardingProgress(ONBOARDING_STEPS_ENUM_MAP[currentPath]);\n }\n\n nextStepIsDashboard\n ? windowLocationRedirect('/feed')\n : history.push(getDesiredStepRoute(currentPath, 1));\n };\n\n const { filter: defaultFilter } = getParams(history);\n\n return (\n \n \n \n \n \n );\n};\n\nOnboardingLayout.propTypes = {\n canContinue: PropTypes.bool.isRequired,\n currentPath: PropTypes.string.isRequired,\n history: PropTypes.object.isRequired,\n options: PropTypes.shape({\n activities: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,\n interests: PropTypes.shape({\n communities: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n platforms: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n products: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number.isRequired,\n image_url: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n topics: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n }).isRequired).isRequired,\n }).isRequired,\n info: PropTypes.shape(InfoPageOptions).isRequired,\n }).isRequired,\n progress: PropTypes.arrayOf(PropTypes.string).isRequired,\n selectedActivities: PropTypes.arrayOf(PropTypes.string),\n selectedCommunities: PropTypes.arrayOf(PropTypes.number),\n selectedCountry: PropTypes.string,\n selectedIndustry: PropTypes.string,\n selectedJob: PropTypes.string,\n selectedPlatforms: PropTypes.arrayOf(PropTypes.number),\n selectedProducts: PropTypes.arrayOf(PropTypes.number),\n selectedSkillLevel: PropTypes.string,\n selectedTopics: PropTypes.arrayOf(PropTypes.number),\n setSelectedActivities: PropTypes.func.isRequired,\n setSelectedCommunities: PropTypes.func.isRequired,\n setSelectedCountry: PropTypes.func.isRequired,\n setSelectedIndustry: PropTypes.func.isRequired,\n setSelectedJob: PropTypes.func.isRequired,\n setSelectedPlatforms: PropTypes.func.isRequired,\n setSelectedProducts: PropTypes.func.isRequired,\n setSelectedSkillLevel: PropTypes.func.isRequired,\n setSelectedTopics: PropTypes.func.isRequired,\n showGreeting: PropTypes.bool.isRequired,\n userId: PropTypes.number.isRequired,\n};\n\nOnboardingLayout.defaultProps = {\n selectedActivities: [],\n selectedCommunities: [],\n selectedCountry: null,\n selectedIndustry: null,\n selectedJob: null,\n selectedPlatforms: [],\n selectedProducts: [],\n selectedSkillLevel: null,\n selectedTopics: [],\n};\n\nexport default OnboardingLayout;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Activities from './Activities';\nimport Info from './Info';\nimport Interests from './Interests';\nimport Title, { c as titleClasses } from './Title';\nimport { InfoPageOptions } from './types';\n\nimport layout from '../../styles/global_ui/layout.css';\n\n// TODO: Didn't do at this stage, but prob can restructure props per step to be a bit more organized.\nconst Step = ({\n currentPath,\n defaultFilter,\n options,\n selectedActivities,\n selectedCommunities,\n selectedCountry,\n selectedIndustry,\n selectedJob,\n selectedPlatforms,\n selectedProducts,\n selectedSkillLevel,\n selectedTopics,\n setSelectedActivities,\n setSelectedCommunities,\n setSelectedCountry,\n setSelectedIndustry,\n setSelectedJob,\n setSelectedPlatforms,\n setSelectedProducts,\n setSelectedSkillLevel,\n setSelectedTopics,\n showGreeting,\n userId,\n}) => {\n switch (currentPath) {\n case 'activities':\n return (\n <>\n {showGreeting && (\n \n 👋 Hey there!\n
\n {' '}\n A few questions to get you started.\n
\n )}\n \n {header}
\n {subText}
\n \n);\n\nTitle.propTypes = {\n header: PropTypes.string.isRequired,\n subText: PropTypes.string.isRequired,\n};\n\nexport default Title;\n","export const CHANNEL_TYPE_ENUM = ['Community', 'Platform', 'TopicChannel'];\nexport const PART_TYPE_ENUM = ['HARDWARE', 'PART', 'SOFTWARE', 'TOOL'];\n\nexport const ONBOARDING_STEPS = ['activities', 'interests', 'info']; // Note: Order matters.\n\nexport const ONBOARDING_STEPS_VALUE_MAP = {\n ACTIVITIES: 'activities',\n INFO: 'info',\n INTERESTS: 'interests',\n V1: 'v1',\n};\n\nexport const ONBOARDING_STEPS_ENUM_MAP = {\n activities: 'ACTIVITIES',\n info: 'INFO',\n interests: 'INTERESTS',\n};\n\n// Matches User::ONBOARDING_STEPS\nexport const ONBOARDING_STEPS_ORDER_MAP = {\n v1: 0,\n activities: 1,\n interests: 2,\n info: 3,\n};\n","import { capitalize, unsnakeString } from '../../utility/formatters';\n\nconst capitalizeWordsAndAddCommas = (str) => (\n // TODO: This formatter needs a little work. We'll want to make sure things like (Ai -> AI) are full caps + add commas to lists (i.e. space, planets, and stars v.s. space and planets)\n // Alternative would be to have a giant\n str.split(' ')\n .map((word) => (word === 'and' || word === 'or') ? word : capitalize(word))\n .join(' ')\n);\n\nconst capitalizeWords = (str) => (\n str.split(' ')\n .map((word) => (word === 'and' || word === 'or') ? word : capitalize(word))\n .join(' ')\n);\n\nexport const objectToOptions = (object) => (\n Object.entries(object).map(([value, label]) => ({ label, value }))\n);\n\nexport const jobOptsFormatter = (jobOpts) => (\n jobOpts.map((opt) => (\n {\n label: unsnakeString(opt, capitalizeWords),\n value: opt,\n }),\n )\n);\n\nexport const skillLevelOptsFormatter = (skillLevelOpts) => (\n skillLevelOpts.map((opt) => (\n {\n label: opt === 'hardcore' ? 'Expert' : capitalize(opt),\n value: opt,\n }),\n )\n);\n","import React, { useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport createHistory, { cleanPreAndPostSlashes } from '../../client/reusable_components/Router/history';\nimport { initCurrentPath } from '../../client/reusable_components/Router';\n\nimport { InfoPageOptions } from './types';\nimport { isBlank } from '../../utility/types';\n\nimport OnboardingLayout from './OnboardingLayout';\n\nconst answeredAllInputsForStep = (vals) => {\n const unansweredInputs = vals.filter((el) => isBlank(el));\n\n return (unansweredInputs.length === 0);\n};\n\nconst UserOnboardingPage = ({ currentUser, options, pathHelpers }) => {\n const {\n activities,\n country_iso2,\n channel_ids_by_type,\n id: userId,\n industry,\n is_new_user: isNewUser,\n job,\n onboarding_progress_temp: progress,\n products,\n skill_level,\n } = currentUser;\n\n // Activities state\n const [selectedActivities, setSelectedActivities] = useState(activities);\n\n // Interests state\n const [selectedTopics, setSelectedTopics] = useState(channel_ids_by_type.topic_channels);\n const [selectedCommunities, setSelectedCommunities] = useState(channel_ids_by_type.communities);\n const [selectedPlatforms, setSelectedPlatforms] = useState(channel_ids_by_type.platforms);\n const [selectedProducts, setSelectedProducts] = useState(products);\n\n // Info state\n const [selectedCountry, setSelectedCountry] = useState(country_iso2);\n const [selectedIndustry, setSelectedIndustry] = useState(industry);\n const [selectedJob, setSelectedJob] = useState(job);\n const [selectedSkillLevel, setSelectedSkillLevel] = useState(skill_level);\n\n // General state\n const [currentPath, setCurrentPath] = useState(initCurrentPath(pathHelpers.fullPath, pathHelpers.basePath));\n const [history] = useState(createHistory(pathHelpers.basePath));\n const [isBusy, setIsBusy] = useState(true);\n\n const handleLocationChange = async (pathData) => {\n setIsBusy(true);\n const newPath = cleanPreAndPostSlashes(pathData.pathname);\n setCurrentPath(newPath);\n\n setIsBusy(false);\n };\n\n // Will need custom fn for interests page. Just care if they have 3 across all types.\n // Recompute continue btn if the currentPath changes or any of our currentUser info changes.\n const canContinue = useMemo(() => {\n switch (currentPath) {\n case 'activities':\n return answeredAllInputsForStep([selectedActivities]);\n case 'interests':\n // Interests does not require the completion of all inputs, just 3 selections total.\n return [selectedCommunities, selectedPlatforms, selectedProducts, selectedTopics].flat().length >= 3;\n case 'info':\n return answeredAllInputsForStep([selectedCountry, selectedIndustry, selectedJob, selectedSkillLevel]);\n default:\n return false;\n }\n }, [currentPath, selectedActivities, selectedCommunities, selectedCountry, selectedIndustry, selectedJob, selectedPlatforms, selectedProducts, selectedSkillLevel, selectedTopics]);\n\n // Subscribe & Unsubscribe to location event changes.\n useEffect(() => {\n const historyUnlisten = history.listen(handleLocationChange);\n\n setIsBusy(false);\n\n return () => {\n historyUnlisten();\n };\n\n // Note: Disabled for onMount / no actual deps.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n {this.props.title}
\n \n this._dialog = c}\n pathHelpers={this.props.pathHelpers}\n seoHandler={this.seoHandler}\n />\n \n );\n }\n}\n\nVideosPage.propTypes = {\n category: PropTypes.string,\n filters: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n options: PropTypes.array.isRequired,\n })).isRequired,\n pathHelpers: PropTypes.shape({\n basePath: PropTypes.string.isRequired,\n rootPath: PropTypes.string.isRequired,\n videosPath: PropTypes.string.isRequired,\n }).isRequired,\n seoHelpers: PropTypes.shape({\n configKey: PropTypes.string.isRequired,\n path: PropTypes.string.isRequired,\n reportOnMount: PropTypes.bool.isRequired,\n }).isRequired,\n title: PropTypes.string,\n};\n\nVideosPage.defaultProps = {\n category: null,\n title: 'Explore videos',\n};\n\nexport default VideosPage;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ChannelHome from '../channel_page/home';\nimport currentUserService from '../../services/current_user';\nimport urlService from '../../services/url_service';\nimport errorHandler from '../../services/error_handler';\n\nclass WhitelabelPage extends Component {\n constructor(props) {\n super(props);\n\n this.state = { userPermissions: { canManage: false } };\n\n urlService.setRootPath(props.pathHelpers.rootPath);\n }\n\n componentDidMount() {\n this._fetchUserPermissions();\n }\n\n _fetchUserPermissions() {\n const platformId = this.props.platform.id;\n\n return currentUserService.fetchPermissions([\n {\n can_manage_platform: {\n key: platformId,\n ql: {\n query: { t: 'get_platform_permissions_for_current_user' },\n variables: { platform_id: platformId },\n },\n },\n },\n ])\n .then(({ can_manage_platform = {} }) => {\n this.setState({ userPermissions: { canManage: !!can_manage_platform[platformId] } });\n })\n .catch((err) => errorHandler('WhitelabelPage _fetchUserPermissions', err));\n }\n\n render() {\n return (\n \n {}}\n transition={(e, path) => {}}\n viewAllBuilderArg={() => ({ type: 'whitelabel', props: { platform: this.props.platform, rootPath: this.props.pathHelpers.rootPath } })}\n />\n \n );\n }\n}\n\nWhitelabelPage.propTypes = {\n pathHelpers: PropTypes.shape({ rootPath: PropTypes.string.isRequired }).isRequired,\n platform: PropTypes.shape({ id: PropTypes.number.isRequired }).isRequired,\n};\n\nWhitelabelPage.defaultProps = {};\n\nexport default WhitelabelPage;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport NotificationsList from '../../../client/user/edit/notifications/NotificationsList';\nimport RingSpinner from '../../../client/spinners/ring';\n\nimport { isBlank } from '../../../utility/types';\nimport { NOOP_HREF } from '../../../constants/links';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport styles from './notification_dropdown.css';\n\nconst PLACEHOLDER_COPY = \"Notifications about other members' activity related to you will appear here.\";\nconst SETTINGS_PATH = '/users/notifications/edit';\nconst VIEW_ALL_PATH = '/dashboard/notifications';\n\nconst _getBody = ({ currentUserId, isLoading, markAllRead, markRead, notifications }) => {\n if (isLoading) return {PLACEHOLDER_COPY}
;\n\n return (\n \n \n \n Mark all as read\n \n \n Settings\n \n \n You're almost done!
\n \n Finish setting up your account\n \n \n);\n\nexport default OnboardingNotification;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ButtonDropdown from '../../../client/buttons/button_dropdown';\nimport Dropdown from './Dropdown';\nimport Icon from '../../../client/icon';\nimport OnboardingNotification from './OnboardingNotification';\nimport TooltipTarget from '../../../client/reusable_components/TooltipTarget';\n\nimport currentUserService from '../../../services/current_user';\nimport errorHandler from '../../../services/error_handler';\nimport keenService from '../../../services/keen/main';\nimport notificationsStore from '../../../services/notifications_store';\nimport { graphMutate } from '../../../requests/graphql';\n\nimport buttonStyles from '../../../styles/global_ui/buttons.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport styles from './notification_dropdown.css';\n\nconst blankStore = { metadata: {}, records: {} };\n\n// NOTE: All the async code here should be rewritten. The Promises are poorly handled, even at the NotificationStore level.\nclass NotificationDropdown extends PureComponent {\n constructor(props) {\n super(props);\n\n this.fetchNotifications = this.fetchNotifications.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleToggle = this.handleToggle.bind(this);\n this.resetNewCount = this.resetNewCount.bind(this);\n\n const notifications = notificationsStore.has('notifications')\n ? notificationsStore.get('notifications')\n : blankStore;\n\n this.state = {\n newCount: props.newNotificationsCount,\n notifications,\n showDropdown: false,\n showOnboarding: false,\n };\n\n this.updateSub = notificationsStore.getChannel().subscribe('notifications.markRead.#', this.handleChange);\n }\n\n componentDidMount() {\n currentUserService.getCurrentOnboardingStatus()\n .then((isComplete) => this.setState({ showOnboarding: !isComplete }))\n .catch((err) => errorHandler(err));\n }\n\n componentWillUnmount() {\n this.updateSub.unsubscribe();\n }\n\n // When the Icon is cliked, fetched the first 10 records and reset the Counter.\n fetchNotifications() {\n return notificationsStore.fetchPage(1, 'FOR_UNREAD')\n .then(() => {\n this.setState({ notifications: notificationsStore.get('notifications') });\n\n return this.resetNewCount();\n })\n .catch((err) => errorHandler(err));\n }\n\n handleChange() {\n const notifications = notificationsStore.get('notifications') || blankStore;\n this.setState({ notifications });\n }\n\n resetNewCount() {\n if (this.state.newCount === 0) return Promise.resolve();\n\n const oldCount = this.state.newCount;\n this.setState({ newCount: 0 });\n\n return graphMutate({ t: 'update_notifications_reset' })\n .then((res) => {})\n .catch((err) => {\n this.setState({ newCount: oldCount });\n errorHandler('resetNewCount Error:', err);\n });\n }\n\n handleToggle(showDropdown) {\n if (showDropdown) {\n this.fetchNotifications();\n keenService.recordEvent({ eventName: 'Clicked link' }, { href: '', location: 'topnav', type: 'notifications-icon', value: 'Bell icon' });\n }\n this.setState({ showDropdown });\n }\n\n /**\n * Views\n */\n _getButton() {\n const { newCount, showDropdown, showOnboarding } = this.state;\n const badgeCount = showOnboarding ? (newCount + 1) : newCount;\n\n return (\n \n \n \n );\n }\n\n _getDropdownBody() {\n const { notifications, showOnboarding } = this.state;\n const { currentUserId } = this.props;\n\n return (\n \n {showOnboarding && \n {this.state.showDropdown && this._getDropdownBody()}\n \n );\n }\n}\n\nNotificationDropdown.propTypes = {\n currentUserId: PropTypes.number.isRequired,\n newNotificationsCount: PropTypes.number,\n};\n\nNotificationDropdown.defaultProps = { newNotificationsCount: 0 };\n\nexport default NotificationDropdown;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Dialog from '../../../client/reusable_components/Dialog';\nimport FormSelect from '../../../client/form_components/selects/form_select/index.js';\nimport SuggestTagForm from './suggest_tag_form';\n\nimport { preventSubmit, appendAdditionalInputs, createDiffArray, createValidationErrors } from './utils/helpers';\nimport { fetchSearchResults } from './utils/requests';\nimport { formatOptions, formatSearchInput, initOptions } from './utils/formatting';\n\nimport layout from '../../../styles/global_ui/layout.css';\n\nconst PUBLISHED_STATES = ['approved', 'approved_after_edits', 'approved_after_review', 'machine_approved', 'pending_review'];\n\n// TODO: Move file to client/form_components/rails.\n\nexport default class CategoryTagDropdown extends Component {\n constructor(props) {\n super(props);\n\n const { selected, markedForDeletion } = initOptions(props.tags);\n\n this.state = {\n showDialog: false,\n selectedTags: selected,\n validationError: false,\n };\n\n this.dismissDialog = this.dismissDialog.bind(this);\n this.generateHiddenFields = this.generateHiddenFields.bind(this);\n this.getSearchResults = this.getSearchResults.bind(this);\n this.handleSelection = this.handleSelection.bind(this);\n this.handlePreventSubmit = this.handlePreventSubmit.bind(this);\n this.summonDialog = this.summonDialog.bind(this);\n\n // refs\n this.tagReference = [...selected, ...markedForDeletion];\n }\n\n componentDidMount() {\n if (window && window.addEventListener) {\n window.addEventListener('submit', this.handlePreventSubmit);\n }\n }\n\n componentWillUnmount() {\n if (window && window.removeEventListener) {\n window.removeEventListener(this.handlePreventSubmit);\n }\n }\n\n dismissDialog() {\n this.setState({ showDialog: false });\n }\n\n getSearchResults(input) {\n const searchInput = formatSearchInput(input);\n\n return fetchSearchResults(searchInput)\n .then((data) => {\n const { hits } = data;\n const formattedOptions = formatOptions(hits, true);\n\n return { options: formattedOptions };\n })\n .catch((err) => console.error('Fetch search error: ', err));\n }\n\n generateHiddenFields() {\n const current = this.state.selectedTags.reduce((memo, s) => ({ ...memo, [s.value]: s }), {});\n const previous = this.tagReference.reduce((memo, s) => ({ ...memo, [s.value]: s }), {});\n const updates = createDiffArray(current, previous);\n appendAdditionalInputs(updates);\n }\n\n handlePreventSubmit(event) {\n if (this.state.validationError) {\n preventSubmit(event);\n } else if (document && document.body) {\n this.generateHiddenFields();\n }\n }\n\n handleSelection(selections) {\n const isPublicProject = PUBLISHED_STATES.includes(this.props.project_state);\n this.setState({\n selectedTags: selections,\n validationError: createValidationErrors(selections, isPublicProject),\n });\n }\n\n summonDialog() {\n this.setState({ showDialog: true });\n }\n\n _getErrors() {\n const errors = this.state.validationError ? [...this.props.errors, this.state.validationError] : this.props.errors;\n if (!errors || (errors && errors.length === 0)) return null;\n\n return errors.join(', ');\n }\n\n _getHelperText() {\n return (\n \n \n Select up to five additional\n {' '}\n topic\n {' '}\n or\n {' '}\n technology\n {' '}\n tags to categorize your project.\n {' '}\n \n {this.props.creatable\n ? You have the ability to create new tags. \n : (\n \n Suggest a new tag\n {' '}\n if we don't already have it, or\n {' '}\n \n )}\n Learn more about tags.\n \n );\n }\n\n render() {\n return (\n \n \n \n \n \n\n \n \n \n Suggest a tag
\n \n \n Before suggesting a new tag, please try searching for a close variant. Tags should be about topics or technical features, not products or brands–those are identified automatically. Good tags are also brief and specific enough to differentiate your project from others.
\n \n {'To learn more about our tags, check out our '}\n knowledge base\n .\n
\n \n \n \n Good
\n \n robotics
\n Represents a subject
\n \n \n security
\n Represents a specific field
\n \n \n \n Bad
\n \n arduino
\n Products are already linked to a project using your BOM list
\n \n \n computers
\n Too generic or broad
\n \n \n \n \n \n );\n }\n}\n\nSuggestTagForm.propTypes = {\n dismiss: PropTypes.func,\n project_id: PropTypes.number.isRequired,\n};\n\nSuggestTagForm.defaultProps = { dismiss: () => {} };\n\nexport default SuggestTagForm;\n","function createNewOption(option) {\n const newOption = option.replace(/\\s\\s+/g, ' ').trim();\n\n return { label: newOption, value: newOption, userCreated: true };\n}\n\nfunction formatOptionLabel(option) {\n const count = option.projects_count > 1000\n ? `${(option.projects_count / 1000).toFixed(1)}k`\n : `${option.projects_count}`;\n\n const nameParts = option.name.split(' ');\n\n return `${nameParts.join(' ')} (${count})`;\n}\n\nfunction formatOption(option) {\n return {\n label: option.name,\n optionLabel: formatOptionLabel(option),\n value: option.name,\n id: option.id,\n cue_id: option.tagging_cue_id,\n popularity_count: option.projects_count,\n status: getOptionStatus(option),\n };\n}\n\nfunction getSelectedTags(option) {\n return option.status === 'saved' || option.status === 'pending_creation' ? [option] : [];\n}\n\nfunction getTagsPendingDeletion(option) {\n return option.status === 'pending_deletion' ? [option] : [];\n}\n\nfunction getOptionStatus(option) {\n return option.marked_for_deletion\n ? 'pending_deletion'\n : option.tagging_cue_id\n ? 'saved'\n : 'pending_creation';\n}\n\nexport function filterOptions(menuOptions = [], filter = '', creatable = false) {\n if (!filter.trim().length) return menuOptions;\n\n const formattedFilter = normalizeString(filter);\n const { filtered, exactMatch } = menuOptions.reduce((memo, option) => {\n const formattedLabel = normalizeString(option.label);\n\n return {\n filtered: [...memo.filtered, ...[option]],\n exactMatch: memo.exactMatch ? true : formattedLabel === formattedFilter,\n };\n }, { filtered: [], exactMatch: false });\n\n // if creatable is true, and the filter is not in the selected options\n // add the filter as an option\n return creatable && !exactMatch\n ? [...filtered, createNewOption(filter)]\n : filtered;\n}\n\nexport function formatOptions(options) {\n return options.map((option) => formatOption(option));\n}\n\nexport function initOptions(options, withCount) {\n if (!options) {\n return [];\n }\n\n return options.reduce((memo, option) => {\n const newOption = formatOption(option);\n\n return ({\n ...memo,\n selected: [...memo.selected, ...getSelectedTags(newOption)],\n markedForDeletion: [...memo.markedForDeletion, ...getTagsPendingDeletion(newOption)],\n });\n },\n {\n selected: [],\n markedForDeletion: [],\n });\n}\n\nexport function formatSearchInput(input) {\n return input.replace(/\\s+/g, ' ').trim();\n}\n\nexport function normalizeString(target = '') {\n const string = typeof target === 'string' ? target : target.toString();\n\n return string.replace(/\\W/g, '').toLowerCase().trim();\n}\n","import smoothScroll from '../../../../client/utils/smoothScroll';\n\nfunction checkForDuplicateSelections(selections) {\n if (!selections) {\n return false;\n }\n\n const dups = {};\n let hasDups = false;\n\n for (const selection of selections) {\n if (dups[selection.value]) {\n hasDups = true;\n break;\n } else {\n dups[selection.value] = true;\n }\n }\n\n return hasDups;\n}\n\nfunction generateCreate(tag, rootIndex) {\n const attribute = tag.id ? 'tag_relations_attributes' : 'new_tags_attributes';\n const update = tag.id ? 'tag_id' : 'name';\n const value = tag.id ? tag.id : tag.value;\n\n if (document && document.createElement) {\n const input = document.createElement('input');\n input.setAttribute('name', `project[${attribute}][${rootIndex}][${update}]`);\n input.setAttribute('value', value);\n input.setAttribute('type', 'hidden');\n\n return input;\n }\n}\n\nfunction generateDestroy(tag, rootIndex, i) {\n const attribute = 'tag_relations_attributes';\n const update = i > 0 ? 'id' : '_destroy';\n const value = i > 0 ? tag.cue_id : true;\n\n if (document && document.createElement) {\n const input = document.createElement('input');\n input.setAttribute('name', `project[${attribute}][${rootIndex}][${update}]`);\n input.setAttribute('value', value);\n input.setAttribute('type', 'hidden');\n\n return input;\n }\n}\n\nfunction generateInputField(tag, rootIndex, type) {\n if (document && document.getElementById) {\n const iterations = type === 'create' ? 1 : 2;\n const rootElement = document.createElement('div');\n const updateFunction = type === 'create' ? generateCreate : generateDestroy;\n\n for (let i = 0; i < iterations; i++) {\n rootElement.appendChild(updateFunction(tag, rootIndex, i));\n }\n\n return rootElement;\n }\n}\n\nexport function appendAdditionalInputs(updates) {\n if (document && document.getElementById) {\n if (document.getElementById('additional-input')) {\n return;\n } else {\n const root = document.getElementById('category-tag-select');\n root.appendChild(handleInputFieldGeneration(updates));\n\n return false;\n }\n }\n}\n\nexport function createDiffArray(current, previous, type) {\n const tagNames = Object.keys({ ...previous, ...current });\n\n return tagNames.reduce((memo, tagName) => {\n const composeMemo = (source, action) => [...memo, { ...source[tagName], type: action }];\n\n if (current[tagName] && previous[tagName] && previous[tagName].status === 'saved') {\n // if it is in both places and previous.status is saved - do nothing.\n return memo;\n } else if (current[tagName]) {\n // if it is in current - create\n return composeMemo(current, 'create');\n } else if (!current[tagName] && previous[tagName] && previous[tagName].status !== 'pending_creation') {\n // if it is only in previous and isn't pending creation - delete\n return composeMemo(previous, 'delete');\n } else {\n return memo;\n }\n }, []);\n}\n\n// New FormGroup shouldn't allow duplicates by design, but keeping as a backup.\nexport function createValidationErrors(selections, isPublicProject) {\n if (isPublicProject && selections.length === 0) return 'Your project is public, you need at least one tag!';\n\n return selections && selections.length > 5\n ? 'Remember, five tags at most!'\n : checkForDuplicateSelections(selections)\n ? 'Remember to make sure that each tag is unique!'\n : false;\n}\n\nexport function handleInputFieldGeneration(tagUpdates) {\n if (document && document.createElement) {\n const additionalInput = document.createElement('div');\n additionalInput.setAttribute('id', 'additional-input');\n\n tagUpdates.forEach((tag, i) => {\n tag.type && tag.type === 'create'\n ? additionalInput.appendChild(generateInputField(tag, i, 'create'))\n : additionalInput.appendChild(generateInputField(tag, i, 'destroy'));\n });\n\n return additionalInput;\n }\n}\n\nexport function preventSubmit(event) {\n event.preventDefault();\n\n const selectElement = document.getElementById('category-tag-select');\n const centerPosition = selectElement.offsetTop - ((window.innerHeight / 2) - (selectElement.offsetHeight / 2));\n\n smoothScroll(centerPosition);\n\n return false;\n}\n","import searchIndex from '../../../../services/algolia/searchIndex';\n\nexport function fetchSearchResults(input, callback, componentContext) {\n const q = input.toLowerCase();\n\n return searchIndex({\n index: 'tags',\n query: q,\n });\n}\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport Icon from '../../../client/icon';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\n\nconst ALLOWED_CONTENT_TYPES = ['tutorial', 'showcase', 'wip', 'protip', 'getting_started', 'teardown'];\n\nexport default class ContentTypeSelector extends Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n\n this.state = this.computeState(this.props.initialContentType, this.props.initialHasError);\n }\n\n computeState(contentType, hasError) {\n const isProtip = contentType ? ['protip', 'getting_started', 'teardown'].indexOf(contentType) > -1 : null;\n const isWip = isProtip !== false || contentType === 'select_wip' ? null : contentType === 'wip';\n const isTutorial = isWip !== false || contentType === 'select_tutorial' ? null : contentType === 'tutorial';\n\n return {\n contentType: (ALLOWED_CONTENT_TYPES.indexOf(contentType) > -1 ? contentType : ''),\n hasError: hasError,\n isProtip: isProtip,\n isWip: isWip,\n isTutorial: isTutorial,\n };\n }\n\n handleChange(e) {\n const states = this.computeState(e.target.value, false);\n this.setState(states);\n }\n\n _renderProjectType() {\n const classes = ['form-group'];\n let errorMsg = null;\n if (this.state.hasError && this.state.isProtip === null) {\n classes.push('has-error');\n errorMsg = (is required for publication
);\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {errorMsg}\n \n \n );\n }\n\n _renderProgress() {\n if (this.state.isProtip !== false) {\n return;\n }\n\n const classes = ['form-group'];\n let errorMsg = null;\n if (this.state.hasError && this.state.isWip === null) {\n classes.push('has-error');\n errorMsg = (is required for publication
);\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {errorMsg}\n \n \n );\n }\n\n _renderInstructions() {\n if (this.state.isWip !== false) {\n return;\n }\n\n const classes = ['form-group'];\n let errorMsg = null;\n if (this.state.hasError && this.state.isTutorial === null) {\n classes.push('has-error');\n errorMsg = (is required for publication
);\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {errorMsg}\n \n \n );\n }\n\n render() {\n return (\n \n {this._renderProjectType()}\n {this._renderProgress()}\n {this._renderInstructions()}\n \n \n );\n }\n}\n\nContentTypeSelector.propTypes = {\n initialContentType: PropTypes.string,\n initialHasError: PropTypes.bool.isRequired,\n};\n\nContentTypeSelector.defaultProps = { initialContentType: '' };\n","// This is the order in which indexes will show on the search page.\nexport const indexes = [\n 'projects',\n 'news_articles',\n 'channels',\n 'contests',\n 'events',\n 'users',\n 'parts',\n 'videos',\n];\n\nexport const whitelabelIndexes = [\n 'projects',\n 'parts',\n 'users',\n];\n\nexport const blacklistedWhitelabelIndexesById = { 18265: ['parts'] };\n\nconst _indexToLabel = {\n channels: 'Channels',\n contests: 'Contests',\n events: 'Events',\n news_articles: 'News',\n projects: 'Projects',\n parts: 'Products',\n users: 'People',\n videos: 'Videos',\n};\n\nconst _labelToIndex = indexes.reduce((acc, index) => ({ ...acc, [_indexToLabel[index]]: index }), {});\n\nexport function indexToLabel(index) {\n return _indexToLabel[index];\n}\n\nexport function labelToIndex(index) {\n return _labelToIndex[index];\n}\n\nexport function isBlacklistedWhitelabelIndex(channelId, index) {\n return (\n blacklistedWhitelabelIndexesById[channelId]\n && blacklistedWhitelabelIndexesById[channelId].indexOf(index) >= 0\n );\n}\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Paginator from '../../client/nav_components/paginator';\nimport ResultsList from './results_list';\nimport SearchSettings from './search_settings';\n\nimport algoliaService from '../../services/algolia';\nimport errorHandler from '../../services/error_handler';\nimport { windowScrollTo } from '../../services/window';\nimport { isNumber } from '../../utility/types';\n\nimport seoConfig from './seoConfig';\nimport SeoHandler from '../../services/seo_handler';\n\nimport layout from '../../styles/global_ui/layout.css';\nimport overlayStyles from '../../styles/common-overlay.css';\nimport styles from './search.css';\n\nconst emptyQueryResults = {\n index: '',\n query: '',\n pagination: {},\n params: '',\n records: [],\n settings: {},\n suggestion: null,\n};\n\nclass Search extends Component {\n constructor(props) {\n super(props);\n\n this.handlePagination = this.handlePagination.bind(this);\n this.handleSettingsChange = this.handleSettingsChange.bind(this);\n this.reportPageView = this.reportPageView.bind(this);\n\n this.state = {\n isFetching: true,\n results: emptyQueryResults,\n showSettings: false,\n };\n\n this.seoHandler = new SeoHandler({ config: seoConfig });\n }\n\n componentDidMount() {\n algoliaService.getChannel().subscribe('locationChange', this.reportPageView);\n algoliaService.getChannel().subscribe('results', (results) => this.setState({ results, isFetching: false }));\n algoliaService.getChannel().subscribe('working', (isFetching) => this.setState({ isFetching }));\n }\n\n componentWillUnmount() {\n algoliaService.getChannel().unsubscribe();\n }\n\n /**\n * Methods\n */\n handlePagination(pageNm) {\n this.setState({ isFetching: true });\n windowScrollTo(0, 0);\n\n const pageTo = Math.abs(pageNm - 1);\n\n return algoliaService.searchWithEffects({ q: this.state.results.query, page: pageTo })\n .then(() => this.setState({ isFetching: false }))\n .catch((err) => {\n this.setState({ isFetching: false });\n errorHandler('Search handlePagination', err);\n });\n }\n\n handleSettingsChange(settings) {\n return new Promise((resolve, reject) => {\n this.setState({ isFetching: true, showSettings: false });\n\n algoliaService.searchWithEffects({ q: this.state.results.query, settings: settings })\n .then(() => {\n this.setState({ isFetching: false });\n resolve();\n })\n .catch((err) => {\n this.setState({ isFetching: false });\n reject(err);\n });\n });\n }\n\n reportPageView() {\n this.seoHandler.reportView({ path: '/' });\n }\n\n render() {\n const { isFetching, results } = this.state;\n const { index, pagination, params, query, records, suggestion, settings } = results;\n\n return (\n \n \n \n this.setState({ showSettings: false })}\n handleSearchRequest={this.handleSettingsChange}\n query={query}\n showSettings={this.state.showSettings}\n />\n \n this.setState({ showSettings: true })}\n totalRecords={pagination.totalRecords}\n />\n \n \n {pagination.totalPages !== undefined && pagination.totalPages > 1\n && (\n this.setState({ focused: -1 })}>\n {this.props.options.map((option, i) => (\n this.props.onSelect(option)}\n onMouseOver={(e) => this.setState({ focused: i })}\n >\n {this.props.templateFn && typeof this.props.templateFn === 'function' ? this.props.templateFn(option) : option}\n \n ))}\n
\n );\n }\n}\n\nDropdownList.propTypes = {\n currentQuery: PropTypes.string.isRequired,\n dismiss: PropTypes.func.isRequired,\n onSelect: PropTypes.func.isRequired,\n options: PropTypes.array.isRequired,\n templateFn: PropTypes.func,\n};\n\nDropdownList.defaultProps = { templateFn: null };\n\nexport default DropdownList;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../../client/icon';\nimport DropdownList from './DropdownList';\n\nimport algoliaService from '../../../services/algolia';\nimport { stripExcessWhiteSpace } from '../../../utility/formatters';\nimport errorHandler from '../../../services/error_handler';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport styles from './search_input.css';\n\nconst SEARCH_GLASS_ID = 'nav-search-icon';\n\nclass SimpleSearchInput extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n inputFocused: false,\n suggestions: [],\n value: '',\n };\n\n this.fetchSuggestions = this.fetchSuggestions.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOnChange = this.handleOnChange.bind(this);\n this.handleQuery = this.handleQuery.bind(this);\n this.handleWindowClick = this.handleWindowClick.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.onInputFocus = this.onInputFocus.bind(this);\n\n // Refs.\n this.root;\n this.input;\n }\n\n componentDidMount() {\n if (this.props.fireInitSearch) {\n this.handleQuery();\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('click', this.handleWindowClick);\n }\n\n _clearInput() {\n this.setState({ suggestions: [], value: '' }, () => {\n if (this.input) this.input.focus();\n this.props.search('');\n });\n }\n\n _getValue() {\n return stripExcessWhiteSpace(this.state.value);\n }\n\n fetchSuggestions(query) {\n return algoliaService.getSuggestions(query)\n .then((suggestions) => this.setState({ suggestions }))\n .catch((err) => errorHandler('fetchSuggestions', err));\n }\n\n handleKeyDown(e) {\n if (e.keyCode === 13 /* ENTER */) {\n this._handleReturnKey(e);\n } else if (e.keyCode === 27 /* ESC */ || e.keyCode === 9 /* TAB */) {\n e.preventDefault();\n this.handleInputBlur();\n } else if (this.dropdownlist && ((e.keyCode === 40 /* DOWN */ || e.keyCode === 38) /* UP */)) {\n e.preventDefault();\n this.dropdownlist.handleKeyDown(e);\n }\n }\n\n _handleReturnKey(e) {\n if (this.dropdownlist && this.dropdownlist.isDropdownItemFocused()) {\n this.dropdownlist.handleKeyDown(e);\n } else {\n this.handleQuery();\n }\n }\n\n handleOnChange(e) {\n let value = e.target.value;\n\n if (value.length > 255) {\n value = value.slice(0, 255);\n }\n\n this.setState({\n value,\n suggestions: (value && value.length > 0 && value.split(' ').join('').length > 0) ? this.state.suggestions : [],\n });\n\n this.props.instantSearch ? this.handleQuery(value) : this.fetchSuggestions(value);\n }\n\n handleQuery(query = this.state.value) {\n if (!this.props.instantSearch) {\n this.handleInputBlur();\n }\n\n this.props.search(stripExcessWhiteSpace(query));\n }\n\n handleInputBlur() {\n window.removeEventListener('click', this.handleWindowClick);\n this.setState({ inputFocused: false, suggestions: [] });\n\n if (this.input) {\n this.input.blur();\n }\n }\n\n onInputFocus() {\n window.addEventListener('click', this.handleWindowClick);\n this.setState({ inputFocused: true });\n\n if (this.state.value.length > 0) {\n this.handleOnChange({ target: { value: this.state.value } });\n }\n }\n\n handleWindowClick(e) {\n // The search glass icon will fire focus/blur handlers, we don't want double events which will\n // trigger here and cause toggle loops.\n if (e.target && e.target.id && e.target.id === SEARCH_GLASS_ID) return;\n\n if (this.root && !this.root.contains(e.target)) {\n this.handleInputBlur();\n }\n }\n\n render() {\n return (\n this.root = el}\n className={`${styles.containerSimple} ${this.props.classList.root}`}\n >\n 0 ? styles.listOpen : ''}\n `.trim()}\n >\n this.handleQuery()}>\n this.input = el}\n className={`${styles.input} ${this.props.classList.input}`}\n onChange={this.handleOnChange}\n onFocus={this.onInputFocus}\n onKeyDown={this.handleKeyDown}\n placeholder=\"Search\"\n type=\"text\"\n value={this.state.value}\n />\n\n \n 0 ? '' : styles.hideDismiss}`}\n onClick={() => this._clearInput()}\n >\n ×\n \n \n\n {this.state.suggestions && this.state.suggestions.length > 0\n && (\n this.dropdownlist = el}\n currentQuery={this.state.value}\n dismiss={() => this.setState({ suggestions: [] })}\n onSelect={(option) => this.setState({ value: option.value.query }, () => this.handleQuery(option.value.query, option.value))}\n options={this.state.suggestions}\n templateFn={(option) => ()}\n />\n )}\n \n \n );\n }\n}\n\nSimpleSearchInput.propTypes = {\n classList: PropTypes.shape({\n container: PropTypes.string,\n input: PropTypes.string,\n root: PropTypes.string,\n searchIcon: PropTypes.string,\n }),\n fireInitSearch: PropTypes.bool,\n instantSearch: PropTypes.bool, // Whether we require confirmation before firing a search query.\n search: PropTypes.func.isRequired,\n};\n\nSimpleSearchInput.defaultProps = {\n classList: {\n container: '',\n input: '',\n root: '',\n searchIcon: '',\n },\n fireInitSearch: true,\n instantSearch: true,\n};\n\nexport default SimpleSearchInput;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../../client/icon';\nimport DropdownList from './DropdownList';\nimport SimpleSelect from '../../../client/form_components/simple_select';\n\nimport algoliaService from '../../../services/algolia';\nimport errorHandler from '../../../services/error_handler';\nimport queryStringToNormalized from '../../../services/algolia/converters/queryStringToNormalized';\nimport { filterSearchQuery } from '../../../services/algolia/filterSearchQuery';\nimport { storeSearchQuery } from '../../../services/keen/searchTracker';\nimport { windowInnerWidth, windowLocationRedirect, windowLocationSearch } from '../../../services/window';\nimport clickOutsideListener from '../../../utility/clickOutsideListener';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport styles from './search_input.css';\n\nconst CATEGORY_OPTS = [\n {\n default: true,\n label: 'Projects',\n value: 'projects',\n },\n {\n label: 'News',\n value: 'news_articles',\n },\n {\n label: 'Channels',\n value: 'channels',\n },\n {\n label: 'Contests',\n value: 'contests',\n },\n {\n label: 'Events',\n value: 'events',\n },\n {\n label: 'People',\n value: 'users',\n },\n {\n label: 'Products',\n value: 'parts',\n },\n {\n label: 'Videos',\n value: 'videos',\n },\n];\nconst MOBILE_BREAKPOINT = 768;\nconst REDIRECT_SEARCH_PATH = '/search';\n\n// NOTE: This is the main search input in the navbar. It has special logic when its mounted on the /search endpoint.\nclass SearchInput extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n categories: CATEGORY_OPTS,\n inputFocused: false,\n selectedCategory: 'projects',\n suggestions: [],\n value: '',\n };\n\n this.dismissMobileView = this.dismissMobileView.bind(this);\n this.fetchSuggestions = this.fetchSuggestions.bind(this);\n this.focusFromDispatch = this.focusFromDispatch.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOnChange = this.handleOnChange.bind(this);\n this.handleQuery = this.handleQuery.bind(this);\n this.handleQueryUpdate = this.handleQueryUpdate.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.onInputFocus = this.onInputFocus.bind(this);\n this.onCategorySelect = this.onCategorySelect.bind(this);\n\n this._clickHandler = null;\n\n // Refs.\n this.root;\n this.input;\n }\n\n /**\n * Lifecycle Methods\n */\n componentDidMount() {\n // Set up listeners\n this._clickHandler = clickOutsideListener(this.root, (e) => {\n if (this.state.inputFocused) this.handleInputBlur(e);\n },\n true,\n );\n algoliaService.getChannel().subscribe('queryUpdate', this.handleQueryUpdate);\n window.addEventListener('focus:ReactSearchInput', this.focusFromDispatch);\n\n // Handle route init logic.\n if (this.props.onSearchPath) {\n this._initializeFromSearchParams();\n }\n }\n\n componentWillUnmount() {\n if (this._clickHandler) this._clickHandler.remove();\n window.removeEventListener('focus:ReactSearchInput', this.focusFromDispatch);\n }\n\n /**\n * Initializers\n */\n _initializeFromSearchParams() {\n const queryString = windowLocationSearch.get().substring(1);\n const normalized = queryStringToNormalized(queryString);\n const query = normalized.query;\n\n algoliaService.enableHistoryPushState();\n\n if (query && query.length) {\n algoliaService.createSuggestion(query);\n this.setState({ value: query });\n }\n\n // Honor any search params.\n return algoliaService.initializeWithEffects(normalized, this.props.channelId)\n .then(() => algoliaService.getChannel().publish('working', false))\n .catch((err) => {\n algoliaService.getChannel().publish('working', false);\n errorHandler('Search input _initializeFromSearchParams', err);\n });\n }\n\n /**\n * Methods\n */\n dismissMobileView() {\n this.setState({ inputFocused: false, suggestions: [] }, () => {\n if (this.input) this.input.blur();\n this._setRootShowFlex(false);\n this._setDocumentNoScroll(false);\n });\n }\n\n fetchSuggestions(query) {\n return algoliaService.getSuggestions(query)\n .then((suggestions) => this.setState({ suggestions }))\n .catch((err) => errorHandler('fetchSuggestions', err));\n }\n\n focusFromDispatch() {\n if (this._isInMobileView()) {\n if (this.state.inputFocused) {\n this.dismissMobileView();\n } else {\n // When the input is hidden, we need to show it before we can focus it.\n if (!this.props.onSearchPath) {\n this._setRootShowFlex(true);\n }\n if (this.input) {\n this.input.focus();\n }\n }\n }\n }\n\n handleKeyDown(e) {\n if (e.keyCode === 13 /* ENTER */) {\n this._handleReturnKey(e);\n } else if (e.keyCode === 27 /* ESC */ || e.keyCode === 9 /* TAB */) {\n e.preventDefault();\n this.handleInputBlur();\n } else if (this.dropdownlist && ((e.keyCode === 40 /* DOWN */ || e.keyCode === 38) /* UP */)) {\n e.preventDefault();\n this.dropdownlist.handleKeyDown(e);\n }\n }\n\n _handleReturnKey(e) {\n if (this.dropdownlist && this.dropdownlist.isDropdownItemFocused()) {\n this.dropdownlist.handleKeyDown(e);\n } else {\n this.handleQuery();\n }\n }\n\n handleOnChange(e) {\n let value = e.target.value;\n\n if (value.length > 255) {\n value = value.slice(0, 255);\n }\n\n if (value && value.length > 0 && value.split(' ').join('').length > 0) {\n this.fetchSuggestions(value);\n this.setState({ value }, () => this._handleNoScroll());\n } else {\n this.setState({ value, suggestions: [] }, () => this._handleNoScroll());\n }\n }\n\n handleQuery(query = this.state.value, suggestion = null) {\n this.handleInputBlur();\n\n // Everywhere except /search\n if (this.props.onSearchPath === false) return this._redirectWithQuery(query);\n\n // Logic for /search\n if (this._isInMobileView()) this.dismissMobileView();\n const queryMap = algoliaService.processQueryMap({ query });\n\n if (queryMap.query !== this.state.value) this.setState({ value: queryMap.query });\n\n if (queryMap.query.length > 0) algoliaService.createSuggestion(queryMap.query);\n\n return algoliaService.searchWithEffects(queryMap, suggestion, true)\n .catch((err) => errorHandler('handleQuery', err));\n }\n\n handleQueryUpdate(query = '') {\n if (this.state.value !== query) {\n this.setState({ value: query });\n }\n }\n\n _redirectWithQuery(query) {\n const cleanQuery = filterSearchQuery(query);\n storeSearchQuery(cleanQuery);\n windowLocationRedirect(algoliaService.getRedirectPath(encodeURIComponent(cleanQuery), REDIRECT_SEARCH_PATH, this.state.selectedCategory));\n }\n\n handleInputBlur() {\n this.setState({\n inputFocused: false,\n suggestions: [],\n }, () => {\n if (this.input) this.input.blur();\n });\n }\n\n // TODO: Revisit focus and blur logic\n onInputFocus() {\n this.setState({ inputFocused: true });\n\n if (this._isInMobileView()) {\n this._setRootShowFlex(true);\n this._handleNoScroll();\n }\n\n if (this.state.value.length > 0) {\n this.handleOnChange({ target: { value: this.state.value } });\n }\n }\n\n onCategorySelect(category) {\n this.setState({ selectedCategory: category.value }, () => {\n if (this.input) this.input.focus();\n });\n }\n\n /**\n * Helpers\n */\n _handleNoScroll() {\n if (!this._isInMobileView()) return;\n\n if (!this.props.onSearchPath) {\n this._setDocumentNoScroll(true);\n } else if (this.props.onSearchPath) {\n // On search path enable the suggestions dropdown only if we have an input value.\n if (this.state.value.length > 0) {\n this._setDocumentNoScroll(true);\n } else {\n this._setDocumentNoScroll(false);\n }\n }\n }\n\n _isInMobileView() {\n return windowInnerWidth() < MOBILE_BREAKPOINT;\n }\n\n _setRootShowFlex(doAdd) {\n if (!this.root) return;\n\n if (doAdd && !this.root.classList.contains('show-flex')) {\n this.root.classList.add('show-flex');\n } else if (!doAdd && this.root.classList.contains('show-flex')) {\n this.root.classList.remove('show-flex');\n }\n }\n\n // TODO: move this into a service/utility?\n _setDocumentNoScroll(doAdd) {\n if (!document || !document.body) return;\n\n if (doAdd && !document.body.classList.contains('no-scroll')) {\n document.body.classList.add('no-scroll');\n } else if (!doAdd && document.body.classList.contains('no-scroll')) {\n document.body.classList.remove('no-scroll');\n }\n }\n\n _shouldShowDismissX() {\n if (this.props.onSearchPath) {\n if (\n (this.state.inputFocused && this.state.suggestions.length <= 0 && this.state.value.length <= 0)\n || (this.state.inputFocused === false)\n ) {\n return false;\n } else {\n return true;\n }\n } else {\n return true;\n }\n }\n\n _getContainerStyles() {\n // These styles are in a media query and are for mobile views only.\n if (this.props.onSearchPath) {\n return (this.state.value.length > 0 && this.state.inputFocused) ? `${styles.onSearchPath} ${styles.viewPortHeightMax}` : styles.onSearchPath;\n } else {\n return styles.viewPortHeightMax;\n }\n }\n\n render() {\n return (\n this.root = el}\n className={`${styles.container} ${this._getContainerStyles()}`}\n id=\"react-search\"\n >\n 0 ? styles.listOpen : ''}\n `.trim()}\n >\n this.input = el}\n className={styles.input}\n id=\"searchInput\"\n onChange={this.handleOnChange}\n onFocus={this.onInputFocus}\n onKeyDown={this.handleKeyDown}\n placeholder=\"Search\"\n type=\"text\"\n value={this.state.value}\n />\n\n {!this.props.onSearchPath\n && (\n this.dropdownlist = el}\n currentQuery={this.state.value}\n dismiss={() => this.setState({ suggestions: [] })}\n onSelect={(option) => this.setState({ value: option.value.query }, () => this.handleQuery(option.value.query, option.value))}\n options={this.state.suggestions}\n templateFn={(option) => ()}\n />\n )}\n \n this.dismissMobileView()}\n >\n ×\n \n \n );\n }\n}\n\nSearchInput.propTypes = {\n channelId: PropTypes.number,\n onSearchPath: PropTypes.bool.isRequired,\n};\n\nSearchInput.defaultProps = { channelId: null };\n\nexport default SearchInput;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport GridList from '../../../client/wrappers/grid_list';\nimport ContestCard from '../../../client/cards/contest_card';\n\nimport cardStyles from '../../../client/cards/contest_card/contest_card.css';\nimport gridStyles from '../../../styles/global_ui/grid.css';\nimport layout from '../../../styles/global_ui/layout.css';\n\nconst ContestsList = ({ results }) => (\n \n \n {list.map((result, i) => (\n - \n {Array.isArray(result)\n ? (\n
\n ))}\n
\n );\n};\n\nexport default List;\n\nList.propTypes = {\n algoliaIndex: PropTypes.string.isRequired,\n appliedFilters: PropTypes.object,\n currentQuery: PropTypes.string.isRequired,\n insertIndex: PropTypes.number.isRequired,\n insertItems: PropTypes.array,\n isWhitelabel: PropTypes.bool,\n recommendedIndex: PropTypes.string,\n results: PropTypes.array,\n setIndex: PropTypes.func.isRequired,\n};\n\nList.defaultProps = {\n appliedFilters: {},\n insertItems: [],\n isWhitelabel: false,\n results: [],\n recommendedIndex: '',\n};\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport LinkToTab from './link_to_tab';\n\nimport { indexes, indexToLabel } from '../algoliaIndexes';\n\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../styles/global_ui/util.css';\n\nconst NoResults = ({ algoliaIndex, currentQuery, isWhitelabel, setIndex }) => {\n if (!currentQuery || isWhitelabel) return null;\n\n const recommendedSearchLinks = indexes.filter((index) => index !== algoliaIndex);\n\n return (\n \n Search for
\n \n {recommendedSearchLinks.map((index, i) => (\n - \n {'- '}\n
setIndex(index)}\n >\n {` ${currentQuery} in ${indexToLabel(index)}`}\n \n \n ))}\n
\n \n );\n};\n\nNoResults.propTypes = {\n algoliaIndex: PropTypes.string.isRequired,\n currentQuery: PropTypes.string.isRequired,\n isWhitelabel: PropTypes.bool,\n setIndex: PropTypes.func,\n};\n\nNoResults.defaultProps = {\n isWhitelabel: false,\n setIndex: () => {},\n};\n\nexport default NoResults;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport ChannelCard from '../../../../client/cards/channel_card';\nimport Event from '../../../../client/cards/search/components/Vertical/Event';\nimport LinkToTab from '../link_to_tab';\nimport Thumb from '../../../../client/cards/search/components/Vertical/Thumb';\n\nimport { windowScrollTo } from '../../../../services/window';\nimport { indexToLabel } from '../../algoliaIndexes';\nimport * as contentMap from '../contentTypes';\n\nimport styles from './recommended_results.css';\nimport typography from '../../../../styles/global_ui/typography.css';\n\nconst verticalCardTypes = {\n channels: (props) => (\n \n {`Recommended results for \"${currentQuery}\" in ${indexToLabel(recommendedIndex)}`}\n
\n \n {results.map((result, i) => (\n \n {composeVerticalCard(recommendedIndex, result)}\n \n ))}\n \n {\n setIndex(recommendedIndex);\n windowScrollTo(0, 0);\n }}\n >\n {`Search for \"${currentQuery}\" in ${indexToLabel(recommendedIndex)}`}\n \n \n );\n};\n\nRecommendedResults.propTypes = {\n channelId: PropTypes.number,\n currentQuery: PropTypes.string.isRequired,\n recommendedIndex: PropTypes.string,\n results: PropTypes.array,\n setIndex: PropTypes.func,\n};\n\nRecommendedResults.defaultProps = {\n channelId: null,\n results: [],\n setIndex: () => {},\n};\n\nexport default RecommendedResults;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport Button from '../../../client/buttons/base';\nimport Icon from '../../../client/icon';\n\nimport { formatNumberWithCommas, pluralize, capitalize } from '../../../utility/formatters';\nimport { indexToLabel } from '../algoliaIndexes';\n\nimport styles from './results_list.css';\nimport layout from '../../../styles/global_ui/layout.css';\nimport typography from '../../../styles/global_ui/typography.css';\nimport shouldAllowEmptySearchQuery from '../../../services/algolia/shouldAllowEmptySearchQuery';\nimport joinComponents from '../../../client/utility_components/joinComponents';\n\nconst _getCountText = (count) => count ? formatNumberWithCommas(count) : 'No';\n\nconst _getFilterBreadcrumb = ({ algoliaIndex, appliedFilters }) => {\n switch (algoliaIndex) {\n case 'events':\n return appliedFilters.event_type ? capitalize(appliedFilters.event_type) : '';\n default:\n return '';\n }\n};\n\nconst _getIndexBreadcrumb = (algoliaIndex) => {\n switch (algoliaIndex) {\n case 'events':\n return (\n \n {indexToLabel(algoliaIndex)}\n \n );\n default:\n return indexToLabel(algoliaIndex);\n }\n};\n\nconst _getQueryBreadCrumb = (query) => (\n query ? ({`\"${query}\"`}) : null\n);\n\nconst _getHeaderText = ({ algoliaIndex, appliedFilters, currentQuery, loading, totalRecords }) => {\n if (loading) return `Searching for \"${currentQuery}\" in ${indexToLabel(algoliaIndex)}...`;\n if (!currentQuery && !shouldAllowEmptySearchQuery(algoliaIndex)) return 'Search using the box above!';\n\n const breadCrumbs = [\n _getIndexBreadcrumb(algoliaIndex),\n _getFilterBreadcrumb({ algoliaIndex, appliedFilters }),\n _getQueryBreadCrumb(currentQuery),\n ].filter((b) => b);\n\n return (\n \n {joinComponents(breadCrumbs, ' — ')}\n {` (${_getCountText(totalRecords)} ${pluralize('result', totalRecords)})`}\n \n );\n};\n\nconst ResultsHeader = ({ algoliaIndex, appliedFilters, currentQuery, loading, toggleFilterPanel, totalRecords }) => {\n if (loading && !currentQuery) return null;\n const filterCount = Object.keys(appliedFilters).length;\n\n return (\n \n \n {_getHeaderText({ algoliaIndex, appliedFilters, currentQuery, loading, totalRecords })}\n
\n {!loading\n && (\n \n {filterCount > 0\n && (\n \n {filterCount.toString()}\n {/* toString is for tests */}\n \n )}\n \n );\n};\n\nResultsHeader.propTypes = {\n algoliaIndex: PropTypes.string.isRequired,\n appliedFilters: PropTypes.object,\n currentQuery: PropTypes.string.isRequired,\n loading: PropTypes.bool.isRequired,\n toggleFilterPanel: PropTypes.func.isRequired,\n totalRecords: PropTypes.number,\n};\nResultsHeader.defaultProps = {\n appliedFilters: {},\n totalRecords: 0,\n};\n\nexport default ResultsHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport GridList from '../../../client/wrappers/grid_list';\nimport VideoCard from '../../../client/cards/video_card';\n\nimport gridStyles from '../../../styles/global_ui/grid.css';\nimport layout from '../../../styles/global_ui/layout.css';\n\nconst _handleClick = (e, record) => {\n e.preventDefault();\n window.open(record.url, '_blank');\n};\n\nconst VideosList = ({ results }) => (\n \n ({ ...record, image: { url: record.image_url } }))}\n />\n \n);\n\nVideosList.propTypes = {\n results: PropTypes.arrayOf(PropTypes.shape({\n category: PropTypes.string.isRequired,\n created_at: PropTypes.number.isRequired,\n description: PropTypes.string,\n duration: PropTypes.number,\n id: PropTypes.number.isRequired,\n image_url: PropTypes.string.isRequired,\n impressions_count: PropTypes.number,\n title: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })),\n};\n\nVideosList.defaultProps = { results: [] };\n\nexport default VideosList;\n","import { getInObj } from '../../../../utility/accessors';\n\nexport default function channels({\n avatar_url,\n _highlightResult,\n id,\n name,\n members_count,\n pitch,\n projects_count,\n url,\n}) {\n return {\n body: {\n htmlString: getInObj(['pitch', 'value'], _highlightResult),\n plainText: pitch,\n },\n id: id,\n image: {\n linkTo: url,\n loadBuffer: 100,\n fit: 'fillmax',\n queryParams: { bg: 'fff' },\n url: avatar_url,\n width: 75,\n },\n stats: [\n { metric: members_count, text: 'Member' },\n { metric: projects_count, text: 'Project' },\n ],\n subTitle: [],\n title: {\n text: name,\n linkTo: url,\n },\n };\n}\n","import React from 'react';\n\nimport EventDetails from '../../../../client/cards/search/sub_components/EventInfo/EventDetails';\nimport EventDate from '../../../../client/cards/search/sub_components/EventInfo/EventDate';\n\nimport { buildLocation } from '../../../../services/country_data';\n\nexport default function events({\n city,\n country_iso2,\n event_type,\n link,\n name,\n objectID,\n state,\n start_date,\n title,\n}) {\n return {\n body: { component: \n onChange({ date: val })}\n value={filters.date}\n />\n onChange({ event_type: val })}\n value={filters.event_type}\n />\n onChange({ attendance_type: val })}\n value={filters.attendance_type}\n />\n \n);\n\nEventFilters.propTypes = {\n disabled: PropTypes.bool,\n filters: PropTypes.shape({\n date: PropTypes.string,\n location: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n distance: PropTypes.object,\n }),\n onChange: PropTypes.func,\n};\n\nEventFilters.defaultProps = {\n disabled: false,\n filters: {},\n onChange: () => {},\n};\n\nexport default EventFilters;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\n\nconst FilterLabel = ({ count, className, disabled, label, limit }) => (\n \n {label}\n {limit\n && {count === limit ? 'limit reached' : `(limit ${limit})`}}\n \n);\n\nFilterLabel.propTypes = {\n className: PropTypes.string,\n count: PropTypes.number,\n disabled: PropTypes.bool,\n label: PropTypes.string.isRequired,\n limit: PropTypes.number,\n};\n\nFilterLabel.defaultProps = {\n className: '',\n count: null,\n disabled: false,\n limit: null,\n};\n\nexport default FilterLabel;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Button from '../../../../client/buttons/base';\nimport LocationSelect, { DEFAULT_DISTANCE_OPT } from '../../../../client/form_components/selects/location_select';\nimport RingSpinner from '../../../../client/spinners/ring';\n\nimport errorHandler from '../../../../services/error_handler';\nimport getNearestCity from '../../../../services/mapbox/getNearestCity';\n\nimport inputStyles from '../../../../styles/global_ui/inputs.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\n\nclass LocationFilter extends PureComponent {\n constructor(props) {\n super(props);\n this.state = { isBusy: false };\n\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n if (this.state.isBusy) return;\n\n this.setState({ isBusy: true });\n getNearestCity()\n .then((formattedRecord) => {\n const location = {\n ...formattedRecord,\n distance: this.props.filters.distance || DEFAULT_DISTANCE_OPT.value,\n };\n this.props.onChange({ location });\n this.setState({ isBusy: false });\n })\n .catch((err) => {\n this.setState({ isBusy: false });\n errorHandler(err);\n });\n }\n\n /**\n * helpers\n */\n _getButtonOrSpinner() {\n if (this.state.isBusy) return (\n \n Near me\n \n \n );\n }\n\n render() {\n return (\n \n \n \n {this._getButtonOrSpinner()}\n \n this.props.onChange({ location })}\n value={{ ...this.props.filters.location, ...this.props.filters.distance }}\n />\n \n );\n }\n}\n\nLocationFilter.propTypes = {\n disabled: PropTypes.bool,\n filters: PropTypes.shape({\n date: PropTypes.string,\n location: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n distance: PropTypes.object,\n }),\n label: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nLocationFilter.defaultProps = {\n disabled: false,\n filters: {},\n label: 'Location',\n onChange: () => {},\n};\n\nexport default LocationFilter;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport CheckboxGroup from '../../../../client/form_components/inputs/checkbox_group';\nimport FilterLabel from './FilterLabel';\nimport FormSelect from '../../../../client/form_components/selects/form_select';\n\nimport algoliaService from '../../../../services/algolia';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport utilStyles from '../../../../styles/global_ui/util.css';\n\nconst difficultyOptions = [\n { label: 'Beginner', value: 'beginner' },\n { label: 'Intermediate', value: 'intermediate' },\n { label: 'Advanced', value: 'advanced' },\n { label: 'Super Advanced', value: 'hardcore' },\n];\n\nconst projectTypeOptions = [\n { label: 'Featured', value: 'featured' },\n { label: 'Protip', value: 'protip' },\n { label: 'Showcase', value: 'showcase' },\n { label: 'Tutorial', value: 'tutorial' },\n { label: 'Work in progress', value: 'wip' },\n // {label: 'In my toolbox', value: 'toolbox'},\n // {label: 'Contest submissions', value: 'constest_submissions'},\n { label: 'Contest winners', value: 'constest_winners' },\n];\n\nconst programmingLanguageOptions = [\n { label: 'Arduino', value: 'arduino' },\n { label: 'C/C++', value: 'c_cpp' },\n { label: 'JavaScript', value: 'javascript' },\n { label: 'Python', value: 'python' },\n { label: 'ABAP', value: 'abap' },\n { label: 'ActionScript', value: 'actionscript' },\n { label: 'ADA', value: 'ada' },\n { label: 'Apache Conf', value: 'apache_conf' },\n { label: 'AsciiDoc', value: 'asciidoc' },\n { label: 'Assembly x86', value: 'assembly_x86' },\n { label: 'AutoHotKey', value: 'autohotkey' },\n { label: 'BatchFile', value: 'batchfile' },\n { label: 'C9Search', value: 'c9search' },\n { label: 'Cirru', value: 'cirru' },\n { label: 'Clojure', value: 'clojure' },\n { label: 'Cobol', value: 'cobol' },\n { label: 'CoffeeScript', value: 'coffee' },\n { label: 'ColdFusion', value: 'coldfusion' },\n { label: 'C#', value: 'csharp' },\n { label: 'CSS', value: 'css' },\n { label: 'Curly', value: 'curly' },\n { label: 'D', value: 'd' },\n { label: 'Dart', value: 'dart' },\n { label: 'Diff', value: 'diff' },\n { label: 'Dockerfile', value: 'dockerfile' },\n { label: 'Dot', value: 'dot' },\n { label: 'EJS', value: 'ejs' },\n { label: 'Erlang', value: 'erlang' },\n { label: 'Forth', value: 'forth' },\n { label: 'FreeMarker', value: 'ftl' },\n { label: 'Gherkin', value: 'gherkin' },\n { label: 'Gitignore', value: 'gitignore' },\n { label: 'Glsl', value: 'glsl' },\n { label: 'Go', value: 'golang' },\n { label: 'Groovy', value: 'groovy' },\n { label: 'HAML', value: 'haml' },\n { label: 'Handlebars', value: 'handlebars' },\n { label: 'Haskell', value: 'haskell' },\n { label: 'haXe', value: 'haxe' },\n { label: 'HTML', value: 'html' },\n { label: 'HTML (Ruby)', value: 'html_ruby' },\n { label: 'INI', value: 'ini' },\n { label: 'Jack', value: 'jack' },\n { label: 'Jade', value: 'jade' },\n { label: 'Java', value: 'java' },\n { label: 'JSON', value: 'json' },\n { label: 'JSONiq', value: 'jsoniq' },\n { label: 'JSP', value: 'jsp' },\n { label: 'JSX', value: 'jsx' },\n { label: 'Julia', value: 'julia' },\n { label: 'LaTeX', value: 'latex' },\n { label: 'LESS', value: 'less' },\n { label: 'Liquid', value: 'liquid' },\n { label: 'Lisp', value: 'lisp' },\n { label: 'LiveScript', value: 'livescript' },\n { label: 'LogiQL', value: 'logiql' },\n { label: 'LSL', value: 'lsl' },\n { label: 'Lua', value: 'lua' },\n { label: 'LuaPage', value: 'luapage' },\n { label: 'Lucene', value: 'lucene' },\n { label: 'Makefile', value: 'makefile' },\n { label: 'Markdown', value: 'markdown' },\n { label: 'MATLAB', value: 'matlab' },\n { label: 'mcScript', value: 'mcscript' },\n { label: 'MEL', value: 'mel' },\n { label: 'MicroPython', value: 'micropython' },\n { label: 'MUSHCode', value: 'mushcode' },\n { label: 'MySQL', value: 'mysql' },\n { label: 'Nix', value: 'nix' },\n { label: 'Objective-C', value: 'objectivec' },\n { label: 'OCaml', value: 'ocaml' },\n { label: 'Pascal', value: 'pascal' },\n { label: 'Perl', value: 'perl' },\n { label: 'pgSQL', value: 'pgsql' },\n { label: 'PHP', value: 'php' },\n { label: 'Powershell', value: 'powershell' },\n { label: 'Processing', value: 'processing' },\n { label: 'Prolog', value: 'prolog' },\n { label: 'Properties', value: 'properties' },\n { label: 'Protobuf', value: 'protobuf' },\n { label: 'R', value: 'r' },\n { label: 'RDoc', value: 'rdoc' },\n { label: 'RHTML', value: 'rhtml' },\n { label: 'Ruby', value: 'ruby' },\n { label: 'Rust', value: 'rust' },\n { label: 'SASS', value: 'sass' },\n { label: 'SCAD', value: 'scad' },\n { label: 'Scala', value: 'scala' },\n { label: 'Scheme', value: 'scheme' },\n { label: 'Scratch', value: 'scratch' },\n { label: 'SCSS', value: 'scss' },\n { label: 'SH', value: 'sh' },\n { label: 'SJS', value: 'sjs' },\n { label: 'Smarty', value: 'smarty' },\n { label: 'snippets', value: 'snippets' },\n { label: 'Soy Template', value: 'soy_template' },\n { label: 'Space', value: 'space' },\n { label: 'SQL', value: 'sql' },\n { label: 'Stylus', value: 'stylus' },\n { label: 'SVG', value: 'svg' },\n { label: 'Swift', value: 'swift' },\n { label: 'Tcl', value: 'tcl' },\n { label: 'Tex', value: 'tex' },\n { label: 'Plain text', value: 'text' },\n { label: 'Textile', value: 'textile' },\n { label: 'Toml', value: 'toml' },\n { label: 'Twig', value: 'twig' },\n { label: 'Typescript', value: 'typescript' },\n { label: 'Vala', value: 'vala' },\n { label: 'VB.NET', value: 'vb.net' },\n { label: 'VBScript', value: 'vbscript' },\n { label: 'Velocity', value: 'velocity' },\n { label: 'Verilog', value: 'verilog' },\n { label: 'VHDL', value: 'vhdl' },\n { label: 'XML', value: 'xml' },\n { label: 'XQuery', value: 'xquery' },\n { label: 'YAML', value: 'yaml' },\n];\n\nclass ProjectFilters extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n languageExpanded: false,\n typeExpanded: false,\n };\n\n this.fetchParts = this.fetchParts.bind(this);\n }\n\n fetchParts(query) {\n return new Promise((resolve, reject) => (\n algoliaService.search({ index: 'parts', query, sort: 'name' })\n .then((res) => resolve({ options: res.hits.map((hit) => ({ label: hit.full_name, value: hit.full_name })) }))\n .catch((err) => reject(err))\n ));\n }\n\n _getExpandButton(stateKey) {\n return (\n this.setState({ [stateKey]: !this.state[stateKey] })}\n >\n {this.state[stateKey] ? '- Less' : '+ More'}\n \n );\n }\n\n render() {\n const { disabled, filters, onChange } = this.props;\n const languageOptions = this.state.languageExpanded ? programmingLanguageOptions : programmingLanguageOptions.slice(0, 4);\n const typeOptions = this.state.typeExpanded ? projectTypeOptions : projectTypeOptions.slice(0, 5);\n\n return (\n \n \n );\n }\n}\n\nProjectFilters.propTypes = {\n disabled: PropTypes.bool,\n filters: PropTypes.shape({\n parts: PropTypes.array,\n project_type: PropTypes.array,\n difficulty: PropTypes.array,\n }),\n onChange: PropTypes.func,\n};\n\nProjectFilters.defaultProps = {\n disabled: false,\n filters: {},\n onChange: () => {},\n};\n\nexport default ProjectFilters;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport RadioGroup from '../../../../client/form_components/inputs/radio_group';\nimport FilterLabel from './FilterLabel';\n\nconst IGNORE_VALUE = 'IGNORE_VALUE';\n\nconst valueIn = (val) => val || IGNORE_VALUE;\nconst valueOut = (val) => val === IGNORE_VALUE ? '' : val;\n\nconst getButtons = ({ buttons, ignoreOptionLabel }) => (\n buttons.concat([{ label: ignoreOptionLabel, value: IGNORE_VALUE }])\n);\n\nconst RadioFilter = ({ buttons, disabled, ignoreOptionLabel, label, onChange, value }) => (\n \n onChange({ available_for_hire: isChecked })}\n type=\"checkbox\"\n value=\"available_for_hire\"\n />\n \n);\n\nUserFilters.propTypes = {\n disabled: PropTypes.bool,\n filters: PropTypes.shape({\n location: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n distance: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n available_for_hire: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n }),\n onChange: PropTypes.func,\n};\n\nUserFilters.defaultProps = {\n disabled: false,\n filters: {},\n onChange: () => {},\n};\n\nexport default UserFilters;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport CheckboxGroup from '../../../../client/form_components/inputs/checkbox_group';\nimport FilterLabel from './FilterLabel';\n\nimport { VIDEO_CATEGORIES } from '../../../../graphql/videos/enums';\nconst VIDEO_CATEGORY_OPTIONS = VIDEO_CATEGORIES.map((key) => ({ label: key, value: key }));\n\nimport layout from '../../../../styles/global_ui/layout.css';\n\nconst EventFilters = ({ disabled, filters, onChange }) => (\n \n \n);\n\nEventFilters.propTypes = {\n disabled: PropTypes.bool,\n filters: PropTypes.shape({ category: PropTypes.array }),\n onChange: PropTypes.func,\n};\n\nEventFilters.defaultProps = {\n disabled: false,\n filters: {},\n onChange: () => {},\n};\n\nexport default EventFilters;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport EventFilters from './EventFilters';\nimport ProjectFilters from './ProjectFilters';\nimport UserFilters from './UserFilters';\nimport VideoFilters from './VideoFilters';\n\nconst contentFilters = {\n channels: null,\n events: EventFilters,\n parts: null,\n projects: ProjectFilters,\n users: UserFilters,\n videos: VideoFilters,\n};\n\nconst Filters = ({ disabled, index, onChange, filters }) => {\n const FilterComponent = contentFilters[index];\n if (!FilterComponent) return null;\n\n return (\n \n \n Show results for\n \n \n);\n\nIndexSetting.propTypes = {\n disabled: PropTypes.bool,\n index: PropTypes.string.isRequired,\n mobile: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nIndexSetting.defaultProps = {\n disabled: false,\n mobile: false,\n onChange: () => {},\n};\n\nexport default IndexSetting;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport FilterLabel from './Filters/FilterLabel';\nimport RadioGroup from '../../../client/form_components/inputs/radio_group';\n\nconst sortOptions = {\n channels: [\n { label: 'Relevance', value: 'relevance' },\n { label: 'A-Z', value: 'a_z' },\n { label: 'Last updated', value: 'last_updated' },\n { label: 'Most projects', value: 'most_projects' },\n // {label: 'Most members', value: 'most_members'},\n ],\n contests: null,\n events: [\n { label: 'Relevance', value: 'relevance' },\n { label: 'Earliest first', value: 'earliest_first' },\n { label: 'Latest first', value: 'latest_first' },\n ],\n news_articles: [\n { label: 'Relevance', value: 'relevance' },\n { label: 'Most recent', value: 'most_recent' },\n { label: 'Most respected', value: 'most_respected' },\n ],\n parts: null,\n projects: [\n { label: 'Relevance', value: 'relevance' },\n { label: 'Most recent', value: 'most_recent' },\n // {label: 'Most popular', value: 'most_popular'},\n { label: 'Most respected', value: 'most_respected' },\n { label: 'Trending', value: 'trending' },\n ],\n users: null,\n videos: [\n { label: 'Relevance', value: 'relevance' },\n { label: 'View count', value: 'most_popular' },\n ],\n};\n\nconst Sort = ({ disabled, index, mobile, onChange, sort }) => {\n if (!sortOptions[index]) return null;\n\n return (\n \n this.setIndex(e.target.value, true)} />\n this.setFilters(filters, true)}\n />\n this.setSort(e.target.value, true)} sort={sort} />\n \n\n {/* Mobile */}\n \n \n \n this.setIndex(e.target.value)} />\n this.setSort(e.target.value)} sort={sort} />\n \n \n \n \n \n \n );\n }\n}\n\nSearchSettings.propTypes = {\n channelId: PropTypes.number,\n dismissSettings: PropTypes.func,\n handleSearchRequest: PropTypes.func,\n query: PropTypes.string,\n showSettings: PropTypes.bool,\n};\n\nSearchSettings.defaultProps = {\n channelId: null,\n dismissSettings: () => {},\n handleSearchRequest: () => Promise.resolve(),\n query: '',\n showSettings: false,\n};\n\nexport default SearchSettings;\n","const seoConfig = () => () => ({\n pageType: 'search#index',\n title: 'Hackster.io - The community dedicated to learning hardware.',\n});\n\nexport default seoConfig;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../../../client/icon';\n\nimport algoliaService from '../../../services/algolia';\nimport errorHandler from '../../../services/error_handler';\nimport queryStringToNormalized from '../../../services/algolia/converters/queryStringToNormalized';\nimport urlService from '../../../services/url_service';\nimport { filterSearchQuery } from '../../../services/algolia/filterSearchQuery';\nimport { storeSearchQuery } from '../../../services/keen/searchTracker';\nimport { stripExcessWhiteSpace } from '../../../utility/formatters';\nimport { windowLocationPathname, windowLocationRedirect, windowLocationSearch } from '../../../services/window';\n\nimport styles from './whitelabel_input.css';\n\nconst SEARCH_PATH = '/search';\n\nclass WhitelabelSearchInput extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n inputFocused: false,\n value: '',\n };\n\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleOnChange = this.handleOnChange.bind(this);\n this.handleQuery = this.handleQuery.bind(this);\n this.handleQueryUpdate = this.handleQueryUpdate.bind(this);\n\n // instance variables\n this.onSearchPath;\n\n // Refs.\n this.input;\n }\n\n /**\n * Lifecycle\n */\n componentDidMount() {\n this.onSearchPath = this._isOnSearchPath();\n\n if (this.onSearchPath) {\n this._initializeFromSearchParams();\n } else {\n // This is for slow connections where server rendering will enable the input before the client JS loads.\n if (this.input && this.input.value && this.input.value.length > 0) {\n this.handleOnChange({ target: { value: stripExcessWhiteSpace(this.input.value) } });\n }\n }\n\n algoliaService.getChannel().subscribe('queryUpdate', this.handleQueryUpdate);\n }\n\n /**\n * Initializers\n */\n _initializeFromSearchParams() {\n const queryString = windowLocationSearch.get().substring(1);\n const normalized = queryStringToNormalized(queryString);\n const query = normalized.query;\n\n algoliaService.enableHistoryPushState();\n\n // Note: createSuggestion will fire a request to the projects index to calculate Suggestions.\n if (query && query.length) {\n algoliaService.createSuggestion(query);\n this.setState({ value: query });\n }\n\n // Honor any search params.\n return algoliaService.initializeWithEffects(normalized, this.props.channelId)\n .then(() => algoliaService.getChannel().publish('working', false))\n .catch((err) => {\n algoliaService.getChannel().publish('working', false);\n errorHandler('WhitelabelSearchInput _initializeFromSearchParams', err);\n });\n }\n\n /**\n * Methods\n */\n handleKeyDown(e) {\n if (e.keyCode === 13 /* ENTER */) {\n this.handleQuery();\n }\n }\n\n handleOnChange(e) {\n let value = e.target.value;\n\n if (value.length > 255) {\n value = value.slice(0, 255);\n }\n\n this.setState({ value });\n }\n\n handleQuery(query = this.state.value, suggestion = null) {\n if (this.onSearchPath === false) {\n return this._redirectWithQuery(query);\n }\n\n const queryMap = algoliaService.processQueryMap({ query });\n\n if (queryMap.query.length > 0) {\n algoliaService.createSuggestion(queryMap.query);\n }\n\n if (queryMap.query !== this.state.value) {\n this.setState({ value: queryMap.query });\n }\n\n return algoliaService.searchWithEffects(queryMap, suggestion, true)\n .catch((err) => errorHandler('handleQuery', err));\n }\n\n handleQueryUpdate(query = '') {\n if (this.state.value !== query) {\n this.setState({ value: query });\n }\n }\n\n /**\n * Helpers\n */\n _isOnSearchPath() {\n return windowLocationPathname.get() === urlService.url(SEARCH_PATH);\n }\n\n _redirectWithQuery(query) {\n const cleanQuery = filterSearchQuery(query);\n storeSearchQuery(cleanQuery);\n windowLocationRedirect(algoliaService.getRedirectPath(query, urlService.url(SEARCH_PATH)));\n }\n\n render() {\n return (\n \n \n this.handleQuery()}>\n this.input = el}\n className={styles.input}\n onChange={this.handleOnChange}\n onKeyDown={this.handleKeyDown}\n placeholder={this.props.placeholder}\n type=\"text\"\n value={this.state.value}\n />\n \n \n );\n }\n}\n\nWhitelabelSearchInput.propTypes = {\n channelId: PropTypes.number,\n placeholder: PropTypes.string,\n};\n\nWhitelabelSearchInput.defaultProps = {\n channelId: null,\n placeholder: 'Search',\n};\n\nexport default WhitelabelSearchInput;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ArticlesList from '../../../../scenes/news/shared/articles_list';\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\n\nimport errorHandler from '../../../../services/error_handler';\nimport smoothScroll from '../../../../client/utils/smoothScroll';\n\nimport { PUBLISHED_SORT, PUBLISHED_STATUS } from '../../../../graphql/news/enums';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from '../profile/profile.css';\n\nexport default class Articles extends Component {\n constructor(props) {\n super(props);\n\n this.state = { isBusy: false };\n\n this.fetchMoreRecords = this.fetchMoreRecords.bind(this);\n }\n\n /**\n * Lifecycle\n */\n componentDidMount() {\n smoothScroll(0, 300);\n }\n\n /**\n * Methods\n */\n fetchMoreRecords() {\n this.setState({ isBusy: true });\n\n return this.props.fetchMoreRecords(this.props.store, 'articles', ['articles'], this._getQueryArgs(), true)\n .then(() => this.setState({ isBusy: false }))\n .catch((err) => {\n this.setState({ isBusy: false });\n errorHandler(err);\n });\n }\n\n /**\n * Helpers\n */\n _getQueryArgs() {\n return {\n by_user_id: this.props.profile.id,\n by_sponsored: false,\n by_status_type: PUBLISHED_STATUS,\n sort: PUBLISHED_SORT,\n };\n }\n\n /**\n * Views\n */\n _createList({ articles, fetchMoreRecords, profile, store }) {\n return (\n killPopover(record.id, 'community')}\n onMouseOver={(e) => triggerPopover(\n null,\n 'communities_list',\n ['communities', 'records', ['id', record.id]],\n record.id,\n 'community',\n e.target,\n 'left',\n ['communities', 'records', ['id', record.id], 'brief'],\n { arrowOffset: 0, popoverOffsetVertical: -120, targetOffset: 15 },\n true,\n )}\n title={record.name}\n >\n \n updateResource(\n record.id,\n 'community',\n ['communities', 'records', ['id', record.id]],\n createOrDeleteBool,\n 'community_members',\n )}\n type=\"channel_md\"\n />\n \n \n ))}\n \n \n);\n\nCommunitiesList.propTypes = {\n killPopover: PropTypes.func,\n records: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string,\n brief: PropTypes.string,\n cover_image_url: PropTypes.string,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n stats: PropTypes.shape({\n members: PropTypes.number,\n projects: PropTypes.number,\n }),\n status: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })),\n triggerPopover: PropTypes.func,\n updateResource: PropTypes.func.isRequired,\n};\n\nCommunitiesList.defaultProps = {\n killPopover: () => {},\n triggerPopover: () => {},\n};\n\nexport default CommunitiesList;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\nimport ExpandableCard from '../list/ExpandableCard';\nimport UserRelationButton from '../../relation_button';\nimport urlService from '../../../../services/url_service';\n\nimport { pluralize } from '../../../../utility/formatters';\n\nimport styles from '../list/list.css';\n\nconst FollowerList = ({ currentUser, metadata, noContentPlaceholderType, profile, records, updateResource }) => (\n \n {metadata.total_records > 0\n ? (\n \n {records.map((record, i) => {\n /* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\n /* eslint-disable-next-line no-prototype-builtins */\n const projectCount = record.stats.hasOwnProperty('live_projects') ? record.stats.live_projects : record.stats.projects;\n\n return (\n \n \n {currentUser && currentUser.id !== record.id\n && (\n updateResource(\n record.id,\n 'profileStats',\n ['profileStats', 'following'],\n createOrDeleteBool,\n 'follower_list_follow_button',\n )}\n type=\"followed_user_md\"\n />\n )}\n \n \n );\n })}\n \n )\n : (\n \n \n {currentUser && currentUser.id !== record.id\n && (\n updateResource(\n record.id,\n 'profileStats',\n ['profileStats', 'following'],\n createOrDeleteBool,\n 'following_list_follow_button',\n )}\n type=\"followed_user_md\"\n />\n )}\n \n \n ))}\n \n )\n : (\n blockHoverForResource('tools', shouldBlock)}\n fetchProjects={fetchProjects.bind(this, store)}\n fetchProjectsForResource={fetchProjectsForResource.bind(this, store)}\n inDialog={true}\n killPopover={killPopover}\n profile={{ id: profile.id, name: profile.name }}\n toggleRespect={(id, createOrDeleteBool) => toggleRespect(id, 'allProjects', ['allProjects', id], createOrDeleteBool, 'project_respects')}\n tools={{ records, metadata }}\n triggerPopover={triggerPopover.bind(this, store, 'tools')}\n />\n \n);\n\nToolsList.propTypes = {\n blockHoverForResource: PropTypes.func.isRequired,\n fetchProjects: PropTypes.func.isRequired,\n fetchProjectsForResource: PropTypes.func.isRequired,\n killPopover: PropTypes.func.isRequired,\n metadata: PropTypes.shape({\n currentPage: PropTypes.number,\n per_page: PropTypes.number,\n total_pages: PropTypes.number,\n total_records: PropTypes.number,\n }).isRequired,\n profile: PropTypes.shape({ name: PropTypes.string, id: PropTypes.number }).isRequired,\n records: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n projects: PropTypes.shape({\n records: PropTypes.arrayOf(PropTypes.shape({\n cover_image_url: PropTypes.string,\n hid: PropTypes.string,\n })),\n metadata: PropTypes.object,\n }),\n stats: PropTypes.shape({ projects: PropTypes.number }),\n })).isRequired,\n store: PropTypes.object,\n toggleRespect: PropTypes.func.isRequired,\n triggerPopover: PropTypes.func.isRequired,\n};\n\nToolsList.defaultProps = {};\n\nexport default ToolsList;\n","import { listToMapByProperty } from '../../../utility/converters';\n\nexport function updateAllProjects(store, records) {\n const oldProjects = store.get('allProjects') || {};\n const newProjects = listToMapByProperty(records, 'hid');\n store.set('allProjects', { ...newProjects, ...oldProjects });\n}\n","/* eslint-disable no-prototype-builtins */\n/* TODO: consider using hasOwn instead OR Object.prototype.hasOwnProperty.call */\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport Articles from './articles';\nimport CommunitiesList from './dialogs/CommunitiesList';\nimport CommunityCard from './popovers/CommunityCard';\nimport CurrentUserWrapper from '../../../client/reusable_components/CurrentUserWrapper';\nimport Dialog from '../../../client/reusable_components/Dialog';\nimport FollowersList from './dialogs/FollowersList';\nimport FollowingList from './dialogs/FollowingList';\nimport HorizontalProjectCard from './popovers/HorizontalProjectCard';\nimport InfiniteScroll from './dialogs/InfiniteScroll';\nimport Navbar from './navbar';\nimport Popover from '../../../client/reusable_components/Popover';\nimport Profile from './profile';\nimport Projects from './projects';\nimport Router, { history, initCurrentPath, Route, transition } from '../../../client/reusable_components/Router';\nimport ToolsList from './dialogs/ToolsList';\n\nimport { graphQuery } from '../../../requests/graphql';\n\nimport {\n resolveMoreArticles, resolveMoreCommunities, resolveMoreFollowers, resolveMoreFollowing, resolveMoreParts,\n resolveMorePartProjects, resolveMoreProjects,\n} from './resolvers';\nimport { updateCommunityFollowing, updateProjectRespects, updateUserFollowers, updateUserFollowing } from './updaters';\n\nimport SeoHandler from '../../../services/seo_handler';\nimport errorHandler from '../../../services/error_handler';\nimport seoConfig from './seoConfig';\nimport urlService from '../../../services/url_service';\n\nimport { cancelablePromise } from '../../../utility/promises';\nimport { formatNumberWithCommas } from '../../../utility/formatters';\nimport { listToMapByProperty } from '../../../utility/converters';\nimport { getInObj } from '../../../utility/accessors';\nimport { updateAllProjects } from './helpers';\n\nimport listStyles from './list/list.css';\n\nconst resourceToComponentMap = {\n communities_dialog: CommunitiesList,\n community_popover: CommunityCard,\n followers_dialog: FollowersList,\n following_dialog: FollowingList,\n project_popover: HorizontalProjectCard,\n tools_dialog: ToolsList,\n};\n\nconst resourceToGraphQLQueryMap = {\n articles: (variables) => graphQuery({ t: 'news_articles_simple_pagination' }, variables),\n communities: (variables) => graphQuery({ t: 'get_communities_for_user' }, variables),\n community: (id) => graphQuery({ t: 'get_community_hover_data' }, { id }),\n followers: (variables) => graphQuery({ t: 'get_users_following_user' }, variables),\n following: (variables) => graphQuery({ t: 'get_users_followed_by_user' }, variables),\n project: (hid) => graphQuery({ t: 'get_project_by_hid' }, { hid }),\n projects: (variables) => graphQuery({ t: 'projects_with_simple_pagination' }, variables),\n projects_by_hid: (variables) => graphQuery({ t: 'get_projects_by_hid' }, variables),\n tool_projects: (variables) => graphQuery({ t: 'get_part_projects_for_user' }, variables),\n tools: (variables) => graphQuery({ t: 'get_parts_for_user' }, variables),\n};\n\nconst emptyAlert = {\n component: null,\n props: null,\n show: false,\n};\n\nconst emptyDialog = {\n component: null,\n props: null,\n resource: null,\n show: false,\n};\n\nconst emptyPopover = {\n component: null,\n id: null,\n position: 'top',\n props: null,\n target: null,\n};\n\nfunction getRoutes(isWhiteLabel, newsRole) {\n const routes = [\n { href: '/', name: 'Profile' },\n { href: '/projects', name: 'Projects' },\n ];\n\n return !isWhiteLabel && newsRole ? routes.concat({ href: '/articles', name: 'Articles' }) : routes;\n}\n\nclass UserProfile extends Component {\n constructor(props) {\n super(props);\n\n this.blockHoverEvent = this.blockHoverEvent.bind(this);\n this.fetchMoreRecords = this.fetchMoreRecords.bind(this);\n this.fetchProjects = this.fetchProjects.bind(this);\n this.fetchUser = this.fetchUser.bind(this);\n this.handleAlert = this.handleAlert.bind(this);\n this.handleDialog = this.handleDialog.bind(this);\n this.handleLocationChange = this.handleLocationChange.bind(this);\n this.handlePopoverEnter = this.handlePopoverEnter.bind(this);\n this.handlePopoverLeave = this.handlePopoverLeave.bind(this);\n this.handleResourceUpdate = this.handleResourceUpdate.bind(this);\n\n this.state = {\n alert: emptyAlert,\n basePath: props.pathHelpers.basePath,\n currentUser: null,\n dialog: emptyDialog,\n initPath: initCurrentPath(props.pathHelpers.fullPath, props.pathHelpers.basePath),\n popover: emptyPopover,\n };\n\n this.isFetchingKeys = [];\n this.popoverHovered = false;\n this.blockHoverForResource = null;\n this.activePromise;\n\n this.seoHandler = new SeoHandler({ config: seoConfig });\n urlService.setRootPath(props.pathHelpers.rootPath);\n\n // Refs\n this.router;\n }\n\n componentDidMount() {\n this.seoHandler.reportView({ path: this.state.initPath, data: this.props.initProps.profile });\n }\n\n _compoundKey(id, resource) {\n return `${resource}_${id}`;\n }\n\n _filterKeys(key) {\n this.isFetchingKeys = this.isFetchingKeys.filter((k) => k !== key);\n }\n\n _pushToKeys(key) {\n this.isFetchingKeys.push(key);\n }\n\n blockHoverEvent(resource, shouldBlock) {\n this.blockHoverForResource = shouldBlock ? resource : null;\n }\n\n fetchMoreRecords(store, resource, path, queryParams = {}, returnPromise = false) {\n if (!store.hasIn(path)) {\n return Promise.reject(new Error(`fetchMoreRecords. Store does not have, ${resource} (resource)!`));\n }\n\n const { current_page, per_page } = store.getIn(path).metadata;\n\n return resourceToGraphQLQueryMap[resource]({ ...queryParams, per_page, page: current_page + 1 })\n .then((res) => {\n switch (resource) {\n case 'articles':\n return resolveMoreArticles.call(this, res, store, path, returnPromise);\n\n case 'communities':\n return resolveMoreCommunities.call(this, res, store, path, returnPromise);\n\n case 'followers':\n return resolveMoreFollowers.call(this, res, store, path);\n\n case 'following':\n return resolveMoreFollowing.call(this, res, store, path);\n\n case 'projects':\n return resolveMoreProjects.call(this, res, store, path, returnPromise);\n\n case 'tool_projects':\n return resolveMorePartProjects.call(this, res, store, path, returnPromise);\n\n case 'tools':\n return resolveMoreParts.call(this, res, store, path, returnPromise);\n\n default:\n return;\n }\n })\n .catch((err) => returnPromise ? Promise.reject(err) : errorHandler(`fetchMoreRecords: ${err}`));\n }\n\n fetchProjects(store, hids) {\n return graphQuery({ t: 'get_projects_by_hid' }, { hids })\n .then((res) => {\n updateAllProjects(store, res.projects.records);\n this.forceUpdate();\n })\n .catch((err) => errorHandler(`fetchProjects Error: ${err}`));\n }\n\n fetchUser(id, path, store) {\n return graphQuery({ t: 'get_user' }, { id })\n .then((res) => {\n const oldRecords = store.getIn(path);\n const updatedRecords = [res.user, ...oldRecords];\n\n store.setIn(path, updatedRecords);\n })\n .catch((err) => errorHandler('fetchUser Error: ', err));\n }\n\n handleAlert(component, props) {\n this.setState({ alert: { component, props, show: true } });\n }\n\n handleDialog(store, resource) {\n if (!resourceToComponentMap[`${resource}_dialog`]) {\n return errorHandler(new Error(`${resource} is unknown for dialog type!`));\n }\n\n this.setState({\n dialog: {\n component: resourceToComponentMap[`${resource}_dialog`],\n props: this._dialogProps(store, resource),\n resource: resource,\n show: true,\n title: this._dialogTitleForResource(store, resource),\n },\n popover: emptyPopover,\n });\n }\n\n _dialogProps(store, resource) {\n const customProps = resource === 'tools'\n ? {\n blockHoverForResource: this.blockHoverEvent,\n fetchProjects: this.fetchProjects,\n fetchProjectsForResource: this.fetchMoreRecords,\n killPopover: this.handlePopoverLeave,\n profile: this.props.initProps.profile,\n store: store,\n toggleRespect: this.handleResourceUpdate,\n triggerPopover: this.handlePopoverEnter,\n }\n : {};\n\n return { ...customProps, ...store.get(resource) };\n }\n\n _dialogTitleForResource(store, resource) {\n const { communities, profile, tools } = this.props.initProps;\n const { name } = profile;\n const profileStats = store.get('profileStats');\n\n return {\n communities: `${name}'s Channels (${formatNumberWithCommas(communities.metadata.total_records)})`,\n followers: `${name}'s Followers (${formatNumberWithCommas(profileStats.followers)})`,\n following: `${name} Follows (${formatNumberWithCommas(profileStats.following)})`,\n tools: `${name}'s Products (${formatNumberWithCommas(tools.metadata.total_records)})`,\n }[resource];\n }\n\n handlePopoverEnter(storeOrNull, container, path, id, resource, target, position, optionalPropCheck = [], popoverAdjustments = {}, inDialog = false) {\n if (this.blockHoverForResource === container) return;\n\n const store = storeOrNull ? storeOrNull : this.router.getStore();\n const compoundKey = this._compoundKey(id, resource);\n const hasInCheck = optionalPropCheck.length ? optionalPropCheck : path;\n\n if (!store.hasIn(hasInCheck) && !this.isFetchingKeys.includes(compoundKey)) {\n return this._delayAndFetchRecord({ compoundKey, store, path, id, resource, target, position, popoverAdjustments, inDialog });\n } else if (store.hasIn(hasInCheck) && !this.isFetchingKeys.includes(compoundKey)) {\n return this._delayAndRenderKnownRecord({ compoundKey, store, path, id, resource, target, position, popoverAdjustments, inDialog });\n }\n }\n\n _delayAndFetchRecord({ compoundKey, store, path, id, resource, target, position, popoverAdjustments, inDialog }) {\n this.activePromise = cancelablePromise(this._delayedEvent(compoundKey));\n\n return this.activePromise\n .promise\n .then((res) => {\n this.activePromise = undefined;\n if (res.proceed && !res.hasOwnProperty('promiseCanceled')) {\n return this._fetchNewResourceForPopOver({ compoundKey, store, path, id, resource, target, position, popoverAdjustments, inDialog });\n } else {\n return Promise.resolve();\n }\n })\n .catch((err) => {\n this.activePromise = undefined;\n errorHandler('_delayAndFetchRecord Error', err);\n\n return Promise.reject(err);\n });\n }\n\n _delayAndRenderKnownRecord({ compoundKey, store, path, id, resource, target, position, popoverAdjustments, inDialog }) {\n this.activePromise = cancelablePromise(this._delayedEvent(compoundKey));\n\n return this.activePromise\n .promise\n .then((res) => {\n this.activePromise = undefined;\n this._filterKeys(compoundKey);\n\n if (res.proceed && !res.hasOwnProperty('promiseCanceled')) {\n this._setPopover({\n adjustments: popoverAdjustments,\n component: resourceToComponentMap[`${resource}_popover`],\n id: compoundKey,\n position: position,\n props: store.getIn(path),\n target: target,\n });\n }\n\n return Promise.resolve();\n })\n .catch((err) => {\n this.activePromise = undefined;\n errorHandler('_delayAndRenderKnownRecord Error', err);\n\n return Promise.reject(err);\n });\n }\n\n _delayedEvent(compoundKey, time = 500) {\n this._pushToKeys(compoundKey);\n\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (this.isFetchingKeys.includes(compoundKey)) {\n return resolve({ proceed: true });\n } else {\n return resolve({ proceed: false });\n }\n }, time);\n });\n }\n\n _fetchNewResourceForPopOver({ compoundKey, store, path, id, resource, target, position, popoverAdjustments, inDialog }) {\n if (!resourceToGraphQLQueryMap[resource]) {\n return Promise.reject(new Error(`${resource} (resource) is unknown!`));\n }\n\n return resourceToGraphQLQueryMap[resource](id)\n .then((res) => {\n const resourceKey = Object.keys(res)[0];\n const record = resourceKey === 'record' ? res['record'] : res[resourceKey]['record'];\n store.setIn(path, record);\n\n // We want to prevent multiple state updates from subsequent hover events when we only care about the last thing hovered.\n if (this.isFetchingKeys[this.isFetchingKeys.length - 1] === compoundKey && inDialog === this.state.dialog.show) {\n this._setPopover({\n adjustments: popoverAdjustments,\n component: resourceToComponentMap[`${resource}_popover`],\n id: compoundKey,\n position: position,\n props: store.getIn(path),\n target: target,\n });\n }\n // Clean up previously hovered keys.\n this._filterKeys(compoundKey);\n\n return Promise.resolve();\n })\n .catch((err) => {\n this._filterKeys(compoundKey);\n errorHandler('_fetchNewResourceForPopOver Error:', err);\n\n return Promise.reject(err);\n });\n }\n\n _setPopover(popover) {\n if (this.state.popover.id === null || this.state.popover.id !== popover.id) {\n this.setState({ popover });\n }\n }\n\n handleLocationChange(location, action) {\n this.seoHandler.reportView({ path: location.pathname, data: this.props.initProps.profile });\n }\n\n handlePopoverLeave(id, resource, waitTime = 20) {\n const compoundKey = this._compoundKey(id, resource);\n this._filterKeys(compoundKey);\n\n return new Promise((resolve, reject) => {\n if (this.state.popover.id && this.state.popover.id === compoundKey) {\n setTimeout(() => {\n // NOTE: We need to repeat the above conditional since during the timelapse there may have been another hovered\n // element that we don't want to unset.\n if (!this.popoverHovered && this.state.popover.id && this.state.popover.id === compoundKey) {\n this.setState({ popover: { ...emptyPopover, position: this.state.popover.position } });\n }\n\n return resolve();\n }, waitTime);\n } else {\n return resolve();\n }\n });\n }\n\n handleResourceUpdate(id, resource, path, action, updater) {\n if (!this.router || !updater) return;\n const store = this.router.getStore();\n\n switch (updater) {\n case 'community_members':\n return updateCommunityFollowing.call(this, id, resource, path, action, store);\n\n case 'follower_list_follow_button':\n case 'following_list_follow_button':\n return this.state.currentUser && this.state.currentUser.isProfileOwner ? updateUserFollowing.call(this, id, path, action, store) : true;\n\n case 'project_respects':\n return updateProjectRespects.call(this, id, resource, path, action, store);\n\n case 'user_card_follow_button':\n return updateUserFollowers.call(this, path, action, store);\n\n default:\n return;\n }\n }\n\n _getPopoverView() {\n return React.createElement(this.state.popover.component, {\n key: this._getPopoverViewKey(this.state.popover.props),\n updateResource: this.handleResourceUpdate,\n ...this.state.popover.props,\n });\n }\n\n _getPopoverViewKey(project) {\n return (getInObj(['stats', 'respects'], project) || project.id || project.hid);\n }\n\n render() {\n const { articles, communities, profile, projects, tools } = this.props.initProps;\n const isProfileOwner = this.state.currentUser && this.state.currentUser.isProfileOwner ? true : false;\n\n return (\n this.setState({ currentUser: { ...currentUser, isProfileOwner: currentUser.id === profile.id } })}\n >\n this.router = el}\n basePath={this.state.basePath}\n initPath={this.state.initPath}\n initializeStoreFn={(ctx) => {\n ctx.store.setAll({\n articles,\n allProjects: listToMapByProperty(projects.records, 'hid'),\n communities,\n followers: { metadata: { current_page: 0, per_page: 10, total_records: profile.stats.followers }, records: [] },\n following: { metadata: { current_page: 0, per_page: 10, total_records: profile.stats.following }, records: [] },\n profileStats: { ...profile.stats },\n projects,\n tools,\n });\n }}\n onUpdate={this.handleLocationChange}\n >\n transition(history, path)}\n updateResource={this.handleResourceUpdate}\n />\n {\n if (this.activePromise) this.activePromise.cancel();\n this.setState({ dialog: emptyDialog, popover: emptyPopover });\n }}\n fullScreen={true}\n nestedDialogLevel={1}\n open={this.state.dialog.show}\n title={{this.state.dialog.title}
}\n >\n {this.state.dialog.component\n && (\n {\n if (this.state.dialog && this.state.dialog.resource) {\n return this.fetchMoreRecords(\n this.router.getStore(),\n this.state.dialog.resource,\n [this.state.dialog.resource],\n { user_id: profile.id },\n true,\n );\n } else {\n return Promise.resolve({});\n }\n }}\n metadata={this.state.dialog.props.metadata}\n recordsCount={this.state.dialog.props.records.length}\n >\n {React.createElement(this.state.dialog.component, {\n currentUser: this.state.currentUser,\n killPopover: this.handlePopoverLeave,\n profile: { name: profile.name },\n triggerPopover: this.handlePopoverEnter,\n updateResource: this.handleResourceUpdate,\n ...this.state.dialog.props,\n })}\n \n )}\n \n this.popoverHovered = true}\n onMouseLeave={() => {\n this.popoverHovered = false;\n this.setState({ popover: { ...emptyPopover, position: this.state.popover.position } });\n }}\n position={this.state.popover.position}\n target={this.state.popover.target}\n >\n {this.state.popover.component && this._getPopoverView()}\n \n this.setState({ alert: emptyAlert })}\n open={this.state.alert.show}\n >\n {this.state.alert.show && React.createElement(this.state.alert.component, this.state.alert.props)}\n \n \n );\n }\n}\n\nUserProfile.propTypes = {\n initProps: PropTypes.shape({\n articles: PropTypes.shape({\n metadata: PropTypes.shape({\n current_page: PropTypes.number,\n next_page: PropTypes.number,\n per_page: PropTypes.number,\n prev_page: PropTypes.number,\n }),\n records: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n image: PropTypes.shape({\n id: PropTypes.number,\n url: PropTypes.string,\n }),\n published_at: PropTypes.string,\n title: PropTypes.string,\n url: PropTypes.string,\n user: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n })),\n }).isRequired,\n communities: PropTypes.shape({\n metadata: PropTypes.shape({\n currentPage: PropTypes.number,\n per_page: PropTypes.number,\n total_pages: PropTypes.number,\n total_records: PropTypes.number,\n }),\n records: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string,\n id: PropTypes.number,\n name: PropTypes.string,\n status: PropTypes.string,\n url: PropTypes.string,\n })),\n }).isRequired,\n profile: PropTypes.shape({\n available_for_hire: PropTypes.bool,\n avatar_url: PropTypes.string,\n bio: PropTypes.string,\n challenge_prizes: PropTypes.arrayOf(PropTypes.shape({\n category: PropTypes.shape({ id: PropTypes.number }),\n challenge: PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n icon_urls: PropTypes.shape({\n x1: PropTypes.string,\n x2: PropTypes.string,\n }),\n id: PropTypes.number,\n position_name: PropTypes.string,\n })),\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n email: PropTypes.string,\n hourly_rate: PropTypes.number,\n id: PropTypes.number,\n interest: PropTypes.array,\n name: PropTypes.string,\n news_role: PropTypes.oneOf(['admin', 'author', 'editor']),\n skills: PropTypes.array,\n state: PropTypes.string,\n stats: PropTypes.shape({\n followers: PropTypes.number,\n following: PropTypes.number,\n projects: PropTypes.number,\n reputation: PropTypes.number,\n }),\n user_name: PropTypes.string,\n website: PropTypes.string,\n }).isRequired,\n projects: PropTypes.shape({\n metadata: PropTypes.shape({\n current_page: PropTypes.number,\n next_page: PropTypes.number,\n per_page: PropTypes.number,\n prev_page: PropTypes.number,\n }),\n records: PropTypes.arrayOf(PropTypes.shape({\n content_type: PropTypes.string,\n cover_image_url: PropTypes.string,\n difficulty: PropTypes.string,\n guest_name: PropTypes.string,\n hid: PropTypes.string,\n id: PropTypes.number,\n name: PropTypes.string,\n one_liner: PropTypes.string,\n position: PropTypes.number,\n published_state: PropTypes.string,\n stats: PropTypes.shape({\n respects: PropTypes.number,\n views: PropTypes.number,\n }),\n team: PropTypes.shape({\n members: PropTypes.array,\n name: PropTypes.string,\n user_name: PropTypes.string,\n }),\n url: PropTypes.string,\n })),\n }).isRequired,\n tools: PropTypes.shape({\n metadata: PropTypes.shape({\n currentPage: PropTypes.number,\n per_page: PropTypes.number,\n total_pages: PropTypes.number,\n total_records: PropTypes.number,\n }),\n records: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n projects: PropTypes.shape({\n records: PropTypes.arrayOf(PropTypes.shape({\n cover_image_url: PropTypes.string,\n hid: PropTypes.string,\n })),\n metadata: PropTypes.object,\n }),\n stats: PropTypes.shape({ projects: PropTypes.number }),\n })),\n }).isRequired,\n }).isRequired,\n isWhiteLabel: PropTypes.bool.isRequired,\n pathHelpers: PropTypes.shape({\n basePath: PropTypes.string.isRequired,\n fullPath: PropTypes.string.isRequired,\n rootPath: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default UserProfile;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport LazyImage from '../../../../client/reusable_components/LazyImage';\nimport SoftArrow from '../../../../client/reusable_components/icons/SoftArrow';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport slideDown from '../../../../styles/transitions/slide_down.css';\nimport styles from './list.css';\n\nclass ExpandableCard extends Component {\n constructor(props) {\n super(props);\n this.toggleExpanded = this.toggleExpanded.bind(this);\n this.state = { expanded: false };\n }\n\n componentDidUpdate(prevProps) {\n if (this.state.expanded && this.props.expandedCard !== prevProps.uuid) {\n this.setState({ expanded: false });\n }\n }\n\n toggleExpanded() {\n this.props.expanding(this.props.uuid, !this.state.expanded);\n this.setState({ expanded: !this.state.expanded });\n }\n\n render() {\n const { classList, dropdown, icon, info, isExpandable, isNestedInDialog, link, onMouseLeave, onMouseOver, subtitle, title } = this.props;\n\n return (\n \n \n \n {icon && icon.length > 0\n && (\n \n \n {title}\n \n {subtitle && subtitle.length > 0 && {subtitle}}\n {info && info.length > 0 && {info}}\n \n \n\n \n {this.props.children}\n {isExpandable\n && (\n \n \n {dropdown}\n \n \n );\n }\n}\n\nExpandableCard.propTypes = {\n classList: PropTypes.shape({ icon: PropTypes.string }),\n dropdown: PropTypes.element,\n expandedCard: PropTypes.string,\n expanding: PropTypes.func,\n icon: PropTypes.string,\n info: PropTypes.string,\n isExpandable: PropTypes.bool,\n isNestedInDialog: PropTypes.bool,\n link: PropTypes.string,\n onMouseLeave: PropTypes.func,\n onMouseOver: PropTypes.func,\n subtitle: PropTypes.string,\n title: PropTypes.string.isRequired,\n uuid: PropTypes.string,\n};\n\nExpandableCard.defaultProps = {\n classList: { icon: '' },\n dropdown: null,\n expandedCard: null,\n expanding: () => {},\n icon: '',\n info: '',\n isExpandable: false,\n isNestedInDialog: false,\n link: 'javascript:void(0);',\n onMouseLeave: () => {},\n onMouseOver: () => {},\n subtitle: '',\n uuid: null,\n};\n\nexport default ExpandableCard;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport ConfirmEmailMessage from '../../../../client/reusable_components/ConfirmEmailMessage';\n\nimport { summonLoginPanel } from '../../../../utility/dispatchers';\nimport currentUserService from '../../../../services/current_user';\nimport urlService from '../../../../services/url_service';\n\nfunction handleClick(e, fetchedCurrentUser, href, summonDialog) {\n if (!fetchedCurrentUser) return;\n\n if (!currentUserService.has('id')) {\n e.preventDefault();\n summonLoginPanel({\n detail: {\n redirect_to: href,\n simplified: true,\n },\n });\n } else if (currentUserService.get('isConfirmed') === false) {\n e.preventDefault();\n summonDialog(ConfirmEmailMessage, { actionText: 'send a message to another user' });\n }\n}\n\nconst ContactLink = ({ className, label, fetchedCurrentUser, summonDialog, userId }) => {\n const href = urlService.url(`/messages/new?recipient_id=${userId}`);\n\n return (\n handleClick(e, fetchedCurrentUser, href, summonDialog)}\n >\n {label}\n \n );\n};\n\nContactLink.propTypes = {\n className: PropTypes.string,\n fetchedCurrentUser: PropTypes.bool.isRequired,\n label: PropTypes.string,\n summonDialog: PropTypes.func.isRequired,\n userId: PropTypes.number.isRequired,\n};\n\nContactLink.defaultProps = {\n className: '',\n label: 'Contact',\n};\n\nexport default ContactLink;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Badge from '../../../../client/reusable_components/Badge';\nimport ContactLink from './ContactLink';\nimport UserRelationButton from '../../relation_button';\n\nimport { appendProtocol, stripTrailingSlash, stripProtocol } from '../../../../utility/links';\nimport { formatNumberWithCommas, pluralize } from '../../../../utility/formatters';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport styles from './user_card.css';\n\nconst _getButtons = ({ fetchedCurrentUser, isProfileOwner, openAlert, profile, rootPath, updateResource }) => {\n if (!fetchedCurrentUser) return null;\n if (isProfileOwner) return _getOwnerButtons({ rootPath });\n\n return _getPublicButtons({ fetchedCurrentUser, openAlert, profile, updateResource });\n};\n\nconst _getOwnerButtons = ({ rootPath }) => (\n \n View dashboard\n Edit profile\n \n);\n\nconst _getPublicButtons = ({ fetchedCurrentUser, openAlert, profile, updateResource }) => (\n \n {\n updateResource(\n null,\n 'profileStats',\n ['profileStats', 'followers'],\n createOrDeleteBool,\n 'user_card_follow_button',\n );\n }}\n type=\"followed_user_md\"\n />\n \n);\n\nconst UserCard = ({\n currentUser,\n isProfileOwner,\n fetchedCurrentUser,\n openAlert,\n openDialog,\n profile,\n profileStats,\n rootPath,\n transition,\n updateResource,\n}) => (\n \n 
\n \n \n {profile.name}\n
\n \n transition('/projects')}\n >\n {`${formatNumberWithCommas(profileStats.live_projects)} ${pluralize(\n 'Project',\n profileStats.live_projects,\n )}`}\n \n openDialog('followers')}\n >\n {`${formatNumberWithCommas(profileStats.followers)} ${pluralize(\n 'Follower',\n profileStats.followers,\n )}`}\n \n openDialog('following')}\n >\n {`${formatNumberWithCommas(profileStats.following)} Following`}\n \n \n {profileStats.live_projects >= 1 && profile.website && (\n \n {stripProtocol(stripTrailingSlash(profile.website))}\n \n )}\n \n {_getButtons({\n fetchedCurrentUser,\n isProfileOwner,\n openAlert,\n profile,\n rootPath,\n updateResource,\n })}\n \n \n \n);\n\nUserCard.propTypes = {\n currentUser: PropTypes.object.isRequired,\n fetchedCurrentUser: PropTypes.bool.isRequired,\n isProfileOwner: PropTypes.bool.isRequired,\n openAlert: PropTypes.func.isRequired,\n openDialog: PropTypes.func.isRequired,\n profile: PropTypes.shape({\n available_for_hire: PropTypes.bool,\n avatar_url: PropTypes.string,\n bio: PropTypes.string,\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n email: PropTypes.string,\n hourly_rate: PropTypes.number,\n id: PropTypes.number,\n interest: PropTypes.array,\n name: PropTypes.string,\n skills: PropTypes.array,\n state: PropTypes.string,\n stats: PropTypes.shape({\n followers: PropTypes.number,\n following: PropTypes.number,\n live_projects: PropTypes.number,\n reputation: PropTypes.number,\n }),\n user_name: PropTypes.string,\n website: PropTypes.string,\n }).isRequired,\n profileStats: PropTypes.shape({ // Used for updating counters.\n followers: PropTypes.number,\n following: PropTypes.number,\n live_projects: PropTypes.number,\n reputation: PropTypes.number,\n }),\n rootPath: PropTypes.string.isRequired,\n transition: PropTypes.func.isRequired,\n updateResource: PropTypes.func.isRequired,\n};\n\nexport default UserCard;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { isCurrentPath, history, Link } from '../../../../client/reusable_components/Router';\nimport UserCard from './UserCard';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport navBarStyles from '../../../../styles/navbar.css';\nimport styles from './navbar.css';\n\nconst NavBar = ({ basePath, currentUser, initPath, isProfileOwner, fetchedCurrentUser, openAlert, openDialog, profile, rootPath, routes, store, transition, updateResource }) => (\n \n \n \n {routes.map((route, i) => (\n \n transition(route.href, store)}\n redirect={route.redirect}\n >\n {route.dropdown\n && (\n \n {route.dropdown.map((subroute, ii) => (\n transition(subroute.href, store)}\n redirect={subroute.redirect}\n />\n ))}\n \n )}\n \n \n ))}\n
\n \n \n \n);\n\nNavBar.propTypes = {\n basePath: PropTypes.string.isRequired,\n currentUser: PropTypes.object.isRequired,\n fetchedCurrentUser: PropTypes.bool.isRequired,\n initPath: PropTypes.string.isRequired,\n isProfileOwner: PropTypes.bool.isRequired,\n openAlert: PropTypes.func.isRequired,\n openDialog: PropTypes.func.isRequired,\n profile: PropTypes.object.isRequired,\n rootPath: PropTypes.string.isRequired,\n routes: PropTypes.array.isRequired,\n store: PropTypes.object.isRequired,\n transition: PropTypes.func.isRequired,\n updateResource: PropTypes.func.isRequired,\n};\n\nexport default NavBar;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport ProjectCard from '../../../../../client/cards/project_card/HorizontalProjectCard';\n\nconst HorizontalProjectCard = (props) => {\n const project = {\n content_type: props.content_type,\n cover_image_url: props.cover_image_url,\n difficulty: props.difficulty,\n guest_name: props.guest_name,\n hid: props.hid,\n id: props.id,\n name: props.name,\n one_liner: props.one_liner,\n position: props.position,\n published_state: props.published_state,\n stats: props.stats,\n team: props.team,\n url: props.url,\n };\n\n return (\n props.updateResource(hid, 'project', ['projects', 'records', ['hid', hid]], createOrDeleteBool, 'project_respects')}\n />\n );\n};\n\nHorizontalProjectCard.propTypes = {\n content_type: PropTypes.string,\n cover_image_url: PropTypes.string,\n difficulty: PropTypes.string,\n guest_name: PropTypes.string,\n hid: PropTypes.string,\n name: PropTypes.string,\n one_liner: PropTypes.string,\n position: PropTypes.number,\n published_state: PropTypes.string,\n stats: PropTypes.shape({\n respects: PropTypes.number,\n views: PropTypes.number,\n }),\n team: PropTypes.shape({\n members: PropTypes.array,\n name: PropTypes.string,\n user_name: PropTypes.string,\n }),\n updateResource: PropTypes.func.isRequired,\n url: PropTypes.string,\n};\n\nHorizontalProjectCard.defaultProps = {};\n\nexport default HorizontalProjectCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\nimport GridList from '../../../../client/wrappers/grid_list';\nimport NewsArticleCard from '../../../../client/cards/news_article';\n\nimport { transition } from '../../../../client/reusable_components/Router';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './profile.css';\n\nconst Articles = ({ articles, history, isProfileOwner, profile }) => (\n \n \n Articles\n \n\n {articles.records.length > 0\n ? (\n transition(history, '/articles')}\n >\n View all\n \n )}\n \n);\n\nArticles.propTypes = {\n articles: PropTypes.shape({\n metadata: PropTypes.shape({\n current_page: PropTypes.number,\n next_page: PropTypes.number,\n per_page: PropTypes.number,\n prev_page: PropTypes.number,\n }),\n records: PropTypes.array,\n }).isRequired,\n history: PropTypes.object.isRequired,\n isProfileOwner: PropTypes.bool,\n profile: PropTypes.shape({ name: PropTypes.string }),\n};\n\nArticles.defaultProps = {\n isProfileOwner: false,\n profile: { name: '' },\n};\n\nexport default Articles;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport GridList from './../../../../client/wrappers/grid_list';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './profile.css';\n\nconst positionNameStyles = `${typography.h5} ${layout.marginTop15} ${layout.fullWidth}`;\nconst contestNameStyles = `${typography.bodyM} ${typography.bold} ${layout.marginTop5} ${layout.fullWidth}`;\n\nclass Awards extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n awardsList: props.awards.slice(0, 4),\n showAll: false,\n };\n\n this.toggleShowAll = this.toggleShowAll.bind(this);\n }\n\n toggleShowAll() {\n return this.state.showAll\n ? this.setState({ awardsList: this.props.awards.slice(0, 4), showAll: false })\n : this.setState({ awardsList: this.props.awards, showAll: true });\n }\n\n _getViewButton() {\n const buttonLabel = this.state.showAll ? 'View less' : 'View all';\n\n return (\n \n {buttonLabel}\n \n );\n }\n\n _getAward({ award }) {\n const { category, challenge, icon_urls, position_name } = award;\n const href = challenge.url + `#category-${category.id}`;\n\n return (\n \n \n 
\n \n {position_name}
\n {challenge.name}
\n \n );\n }\n\n _getAwards(awards) {\n return (\n \n \n );\n }\n\n render() {\n return (\n \n \n Awards\n {this.props.awards.length}\n \n {this._getAwards(this.state.awardsList)}\n {this.props.awards.length > 4 && this._getViewButton()}\n \n );\n }\n}\n\nAwards.propTypes = {\n awards: PropTypes.arrayOf(PropTypes.shape({\n category: PropTypes.shape({ id: PropTypes.number }),\n challenge: PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n icon_urls: PropTypes.shape({\n x1: PropTypes.string,\n x2: PropTypes.string,\n }),\n id: PropTypes.number,\n position_name: PropTypes.string,\n })).isRequired,\n};\n\nexport default Awards;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\nimport ExpandableCard from '../list/ExpandableCard';\n\nimport { formatNumberWithCommas } from '../../../../utility/formatters';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport listStyles from '../list/list.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './profile.css';\n\nclass Communities extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n const { records, metadata } = this.props.communities;\n\n return (\n \n \n Channels\n {`${formatNumberWithCommas(metadata.total_records)}`}\n {metadata.total_records > 0 && (\n + Add channels\n )}\n \n {metadata.total_records === 0\n ? (\n this.props.killPopover(community.id, 'community')}\n onMouseOver={(e) => this.props.triggerPopover(\n ['communities', 'records', ['id', community.id]],\n community.id,\n 'community',\n e.target,\n 'left',\n ['communities', 'records', ['id', community.id], 'brief'],\n { arrowOffset: 0, popoverOffsetVertical: -120, targetOffset: 15 },\n )}\n title={community.name}\n />\n ))}\n \n )}\n {metadata.total_records > 5\n && (\n this.props.openDialog('communities')}\n >\n View all\n \n )}\n \n );\n }\n}\n\nCommunities.propTypes = {\n communities: PropTypes.shape({\n metadata: PropTypes.shape({\n currentPage: PropTypes.number,\n per_page: PropTypes.number,\n total_pages: PropTypes.number,\n total_records: PropTypes.number,\n }),\n records: PropTypes.arrayOf(PropTypes.shape({\n avatar_url: PropTypes.string, // .isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n })),\n }).isRequired,\n isProfileOwner: PropTypes.bool,\n killPopover: PropTypes.func.isRequired,\n openDialog: PropTypes.func.isRequired,\n profile: PropTypes.shape({ name: PropTypes.string.isRequired }).isRequired,\n triggerPopover: PropTypes.func.isRequired,\n};\n\nCommunities.defaultProps = {};\n\nexport default Communities;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport ProjectsList from '../../../../client/projects/projects_list';\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\n\nimport { transition } from '../../../../client/reusable_components/Router';\n\nimport buttonStyles from '../../../../styles/global_ui/buttons.css';\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './profile.css';\n\nconst Projects = ({ currentUser, isProfileOwner, history, profile, projects, toggleRespect }) => (\n \n \n Projects\n \n\n {projects.records.length > 0\n ? (\n transition(history, '/projects')}\n >\n View all\n \n )}\n \n);\n\nProjects.propTypes = {\n currentUser: PropTypes.object,\n history: PropTypes.object.isRequired,\n isProfileOwner: PropTypes.bool,\n profile: PropTypes.shape({ name: PropTypes.string }),\n projects: PropTypes.shape({}).isRequired,\n toggleRespect: PropTypes.func,\n};\n\nProjects.defaultProps = {\n currentUser: {},\n isProfileOwner: false,\n profile: { name: '' },\n toggleRespect: () => Promise.resolve(),\n};\n\nexport default Projects;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\n\nimport { buildLocation } from '../../../../services/country_data';\nimport { capitalize } from '../../../../utility/formatters';\nimport { isPendingOrVerified } from '../../../../utility/user_helpers';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport typography from '../../../../styles/global_ui/typography.css';\nimport styles from './profile.css';\n\nconst UserInfo = ({ isProfileOwner, profile }) => {\n const shouldShow = {\n bio: profile.bio && profile.bio.length > 0,\n joined: profile.created_month_year !== null,\n location: profile.country_iso2 && profile.country_iso2.length > 0,\n skills: profile.skills && profile.skills.length > 0,\n };\n\n if ((!shouldShow['bio'] && !shouldShow['skills'] && !shouldShow['location'] & !shouldShow['joined']) && !isProfileOwner) return null;\n\n const sectionContent = {\n bio: (bio) => (\n {bio}
\n ),\n joined: (created_month_year) => (\n {created_month_year}
\n ),\n skills: (skills) => (\n \n {skills.map((skill, i, list) => (\n \n {skill}\n {i === list.length - 1 ? '' : ', '}\n \n ))}\n
\n ),\n location: (city, state, country_iso2) => (\n {buildLocation(city, state, country_iso2)}
\n ),\n };\n\n const sections = {\n bio: (placeholder) => {\n const content = placeholder || sectionContent['bio'](profile.bio);\n\n return getSection('bio-info', 'Bio', styles.panelPositionLarge, content);\n },\n joined: (placeholder) => {\n const content = placeholder || sectionContent['joined'](profile.created_month_year);\n\n return getSection('joined-info', 'Joined', styles.panelPositionSmall, content);\n },\n skills: (placeholder) => {\n const content = placeholder || sectionContent['skills'](profile.skills);\n\n return getSection('skills-info', 'Skills', styles.panelPositionLarge, content);\n },\n location: (placeholder) => {\n const content = placeholder || sectionContent['location'](profile.city, profile.state, profile.country_iso2);\n\n return getSection('location-info', 'Location', styles.panelPositionSmall, content);\n },\n };\n\n function composePanelA() {\n return isProfileOwner\n ? [\n (shouldShow['bio'] ? sections['bio']() : getPlaceholder('bio')),\n (shouldShow['joined'] ? sections['joined']() : null),\n ]\n : [\n (shouldShow['bio'] && sections['bio']()) || (shouldShow['skills'] && sections['skills']()),\n (shouldShow['joined'] && sections['joined']()) || (shouldShow['location'] && sections['location']()),\n ];\n }\n\n function composePanelB() {\n return isProfileOwner\n ? [\n shouldShow['skills'] ? sections['skills']() : getPlaceholder('skills'),\n shouldShow['location'] ? sections['location']() : getPlaceholder('location'),\n ]\n : [\n (shouldShow['skills'] && shouldShow['bio'] ? sections['skills']() : null),\n (shouldShow['location'] && shouldShow['joined'] ? sections['location']() : null),\n ];\n }\n\n function getAbsentFields() {\n return [shouldShow['bio'], shouldShow['skills'], shouldShow['location']].filter((section) => !section).length;\n }\n\n function getPlaceholder(section) {\n return sections[section](\n {capitalize(profile.tier)}\n {' '}\n {!isPendingOrVerified(profile.tier) && (\n \n Get verified now!\n \n )}\n
\n \n \n )}\n \n );\n};\n\nUserInfo.propTypes = {\n isProfileOwner: PropTypes.bool,\n profile: PropTypes.shape({\n avatar: PropTypes.shape({\n file: PropTypes.shape({ url: PropTypes.string }),\n id: PropTypes.number,\n }),\n bio: PropTypes.string,\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n created_month_year: PropTypes.string,\n email: PropTypes.string,\n hourly_rate: PropTypes.number,\n id: PropTypes.number,\n interest: PropTypes.array,\n name: PropTypes.string,\n skills: PropTypes.array,\n state: PropTypes.string,\n stats: PropTypes.shape({\n followers: PropTypes.number,\n following: PropTypes.number,\n projects: PropTypes.number,\n reputation: PropTypes.number,\n }),\n user_name: PropTypes.string,\n website: PropTypes.string,\n }).isRequired,\n};\n\nUserInfo.defaultProps = {};\n\nexport default UserInfo;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport Awards from './Awards';\nimport Articles from './Articles';\nimport Communities from './Communities';\nimport Projects from './Projects';\nimport Tools from './tools';\nimport UserInfo from './UserInfo';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from './profile.css';\n\nconst Profile = ({\n blockHoverForResource,\n fetchProjects,\n fetchProjectsForResource,\n history,\n isProfileOwner,\n isWhiteLabel,\n killPopover,\n openDialog,\n profile,\n store,\n toggleRespect,\n triggerPopover,\n}) => (\n \n \n \n toggleRespect(hid, 'project', ['projects', 'records', ['hid', hid]], createOrDeleteBool, 'project_respects')}\n />\n {(!isWhiteLabel && profile.news_role)\n && (\n blockHoverForResource('tools', shouldBlock)}\n fetchProjects={fetchProjects.bind(this, store)}\n fetchProjectsForResource={fetchProjectsForResource.bind(this, store)}\n isProfileOwner={isProfileOwner}\n killPopover={killPopover}\n openDialog={openDialog.bind(this, store)}\n profile={{ id: profile.id, name: profile.name }}\n toggleRespect={(hid, createOrDeleteBool) => toggleRespect(hid, 'project', ['projects', 'records', ['hid', hid]], createOrDeleteBool, 'project_respects')}\n tools={store.get('tools')}\n triggerPopover={triggerPopover.bind(this, store, 'tools')}\n />\n {!isWhiteLabel\n && (\n \n \n \n \n);\n\nProfile.propTypes = {\n blockHoverForResource: PropTypes.func.isRequired,\n fetchProjects: PropTypes.func.isRequired,\n fetchProjectsForResource: PropTypes.func.isRequired,\n history: PropTypes.object.isRequired,\n isProfileOwner: PropTypes.bool.isRequired,\n isWhiteLabel: PropTypes.bool.isRequired,\n killPopover: PropTypes.func.isRequired,\n openDialog: PropTypes.func.isRequired,\n path: PropTypes.string.isRequired,\n profile: PropTypes.shape({\n available_for_hire: PropTypes.bool,\n avatar_url: PropTypes.string,\n bio: PropTypes.string,\n challenge_prizes: PropTypes.arrayOf(PropTypes.shape({\n category: PropTypes.shape({ id: PropTypes.number }),\n challenge: PropTypes.shape({\n name: PropTypes.string,\n url: PropTypes.string,\n }),\n icon_urls: PropTypes.shape({\n x1: PropTypes.string,\n x2: PropTypes.string,\n }),\n id: PropTypes.number,\n position_name: PropTypes.string,\n })),\n city: PropTypes.string,\n country_iso2: PropTypes.string,\n email: PropTypes.string,\n hourly_rate: PropTypes.number,\n id: PropTypes.number,\n interest: PropTypes.array,\n name: PropTypes.string,\n news_role: PropTypes.oneOf(['admin', 'author', 'editor']),\n skills: PropTypes.array,\n state: PropTypes.string,\n stats: PropTypes.shape({\n followers: PropTypes.number,\n following: PropTypes.number,\n projects: PropTypes.number,\n reputation: PropTypes.number,\n }),\n user_name: PropTypes.string,\n website: PropTypes.string,\n }).isRequired,\n setMessage: PropTypes.func.isRequired,\n store: PropTypes.object.isRequired,\n toggleRespect: PropTypes.func.isRequired,\n triggerPopover: PropTypes.func.isRequired,\n};\n\nexport default Profile;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport DummyCard from '../../../../../client/cards/project_card/DummyCard';\nimport ProjectCard from '../../../../../client/cards/project_card';\nimport styles from './tools.css';\n\nimport fadeIn from '../../../../../styles/transitions/fade_in_out.css';\n\nconst CardFade = ({ config, imageProps, maxWidth, project, toggleRespect }) => (\n \n \n {project === null\n ? \n \n);\n\nCardFade.propTypes = {\n config: PropTypes.shape({ controlledRespects: PropTypes.bool }), // Do we want a parent component to control the respect counter.\n imageProps: PropTypes.object,\n maxWidth: PropTypes.number,\n project: PropTypes.object,\n toggleRespect: PropTypes.func,\n};\n\nCardFade.defaultProps = {\n config: { controlledRespects: false },\n imageProps: {},\n maxWidth: 240,\n project: null,\n toggleRespect: () => {},\n};\n\nexport default CardFade;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport ContentPlaceholder from '../../../../../client/reusable_components/ContentPlaceholder';\nimport ExpandableCard from '../../list/ExpandableCard';\nimport LazyImage from '../../../../../client/reusable_components/LazyImage';\nimport HorizontalScroll from '../../../../../client/wrappers/horizontal_scroll';\nimport CardFade from './CardFade';\n\nimport { formatNumberWithCommas, pluralize } from '../../../../../utility/formatters';\n\nimport buttonStyles from '../../../../../styles/global_ui/buttons.css';\nimport layout from '../../../../../styles/global_ui/layout.css';\nimport typography from '../../../../../styles/global_ui/typography.css';\nimport profileStyles from '../profile.css';\nimport listStyles from '../../list/list.css';\nimport styles from './tools.css';\n\nfunction _projectByIdOrNull(projectId, allProjects) {\n return (projectId && allProjects[projectId.toString()]) || null;\n}\n\nclass Tools extends Component {\n constructor(props) {\n super(props);\n this.fetchProjects = this.fetchProjects.bind(this);\n this.handleExpandingCard = this.handleExpandingCard.bind(this);\n this.state = { expandedCard: null };\n }\n\n fetchProjects(toolId) {\n return this.props.fetchProjectsForResource(\n 'tool_projects',\n ['tools', 'records', ['id', toolId], 'projects'],\n { author_id: this.props.profile.id, part_id: toolId },\n false,\n );\n }\n\n handleExpandingCard(tool, expandedCard, isExpanding) {\n this.props.blockHoverForResource(isExpanding);\n\n if (isExpanding) {\n const hids = tool.projects.records.reduce((acc, record) => !this.props.allProjects[record.hid] ? acc.concat(record.hid) : acc, []);\n\n this.setState({ expandedCard });\n if (hids.length) this.props.fetchProjects(hids);\n }\n }\n\n render() {\n const metadata = this.props.tools.metadata;\n const records = this.props.inDialog ? this.props.tools.records : this.props.tools.records.slice(0, 5);\n\n return (\n \n {!this.props.inDialog\n && (\n \n Products\n {`${formatNumberWithCommas(metadata.total_records)}`}\n {metadata.total_records > 0 && (\n + Add products\n )}\n \n )}\n {metadata.total_records === 0\n ? (\n this.fetchProjects(tool.id)}\n recordsCount={tool.projects.records.length}\n totalRecordsCount={tool.projects.metadata.total_records}\n >\n {tool.projects.records.map((project) => (\n this.props.killPopover(project.hid, 'project', 50)}\n onMouseOver={(e) => this.props.triggerPopover(['allProjects', project.hid], project.hid, 'project', e.target, 'bottom', [], { targetOffset: 15 }, this.props.inDialog)}\n ratio=\"4:3\"\n src={project.cover_image_url}\n width={48}\n />\n ))}\n \n )}\n \n ))}\n \n )}\n {!this.props.inDialog && metadata.total_records > 5\n && (\n this.props.openDialog('tools')}\n >\n View all\n \n )}\n \n );\n }\n}\n\nTools.propTypes = {\n allProjects: PropTypes.object.isRequired,\n blockHoverForResource: PropTypes.func.isRequired,\n fetchProjects: PropTypes.func.isRequired,\n fetchProjectsForResource: PropTypes.func.isRequired,\n inDialog: PropTypes.bool,\n isProfileOwner: PropTypes.bool,\n killPopover: PropTypes.func.isRequired,\n openDialog: PropTypes.func,\n profile: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n }).isRequired,\n toggleRespect: PropTypes.func.isRequired,\n tools: PropTypes.shape({\n metadata: PropTypes.shape({\n currentPage: PropTypes.number,\n per_page: PropTypes.number,\n total_pages: PropTypes.number,\n total_records: PropTypes.number,\n }),\n records: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n projects: PropTypes.shape({\n records: PropTypes.arrayOf(PropTypes.shape({\n cover_image_url: PropTypes.string,\n hid: PropTypes.string,\n })),\n metadata: PropTypes.object,\n }),\n stats: PropTypes.shape({ projects: PropTypes.number }),\n })),\n }).isRequired,\n triggerPopover: PropTypes.func.isRequired,\n};\n\nTools.defaultProps = {\n inDialog: false,\n isProfileOwner: false,\n openDialog: () => {},\n};\n\nexport default Tools;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nimport ContentPlaceholder from '../../../../client/reusable_components/ContentPlaceholder';\nimport PaginatedList from '../../../../client/wrappers/paginated_list';\nimport ProjectsList from '../../../../client/projects/projects_list';\n\nimport errorHandler from '../../../../services/error_handler';\nimport smoothScroll from '../../../../client/utils/smoothScroll';\n\nimport layout from '../../../../styles/global_ui/layout.css';\nimport styles from '../profile/profile.css';\n\nclass Projects extends Component {\n constructor(props) {\n super(props);\n\n this.state = { isBusy: false };\n\n this.fetchMoreRecords = this.fetchMoreRecords.bind(this);\n }\n\n componentDidMount() {\n smoothScroll(0, 300);\n }\n\n /**\n * Helpers\n */\n _getQueryArgs() {\n return {\n author_id: this.props.profile.id,\n guest_post: false,\n publication_state: 'PUBLIC',\n sort: 'AUTHOR',\n };\n }\n\n /**\n * Methods\n */\n fetchMoreRecords() {\n this.setState({ isBusy: true });\n this.props.fetchMoreRecords(this.props.store, 'projects', ['projects'], this._getQueryArgs(), true)\n .then(() => this.setState({ isBusy: false }))\n .catch((err) => {\n this.setState({ isBusy: false });\n errorHandler(err);\n });\n }\n\n /**\n * Views\n */\n _createList({ currentUser, profile, projectsQuery, records, toggleRespect }) {\n return (\n \n toggleRespect(hid, 'project', ['projects', 'records', ['hid', hid]], createOrDeleteBool, 'project_respects')}\n />\n \n );\n }\n\n _createPlaceholder({ isProfileOwner, name }) {\n return (\n