Nick ilagnev

I use ReactRouter v4 with HashRouter to build spa which embeded to the existing page, so i lay on hash routring to switch my views. I don't use global state management like Redux or flux. I suppose to use react as a slim front end. All i need is to send request to the backend everytime when some action occured, and then show appropriate component with data. And offcourse i tried to use RR

history.push(path, state)

and got this error 'Warning: You cannot PUSH the same path using hash history'.

Then i was seeking around the internet for solution and found this comment, @matthewrobb suggested to use BrowserRouter with hash sign at the end and push store. This solution is working, but it adds leading slash at the location like this 'site.com/subpage#/intro-view'.

Luckily i found better solution for my case 😊

Test Task for Intern / Junior Front-End Developer Position @ Youscan

Основная задача тестового не узнать как сильно вы знаете React, а посмотреть насколько хорошо вы сможете разобраться с новыми технологиями в относительно короткий срок. В идеале, на него нужно потратить не более 3 дней. А так - делайте сколько делается, пока мы не закроем вакансию ;)

Описание

Нужно написать одностраничное приложения для просмотра фильмов с помощью The Movie Database API.

При открытии приложения, должен отображаться список популярных фильмов с пагинацией или динамической подгрузкой (на выбор). Также на странице должно быть поле для поиска. Когда ты вводишь туда какой-то текст, должны отобразиться фильмы которые ему соответствуют. Для каждого фильма в списке должен отображаться список жанров (названий жанров, не айдишек), к которым он принадлежит.

	{
	// http://www.sublimetext.com/docs/3/color_schemes.html
	"variables": {
	// "green": "#FF0000",
	"rainbow1": "#FF80AA",
	"rainbow2": "#AAFFAA",
	"rainbow3": "#FFAAFF",
	"rainbow4": "#AAFFFF",
	"rainbow5": "#AAAAFF",
	"rainbow6": "#FFAAAA",

	let connected = false
	const connect = () => new Promise((resolve, reject) => {
	if (connected) {
	reject('already connected')
	}

	console.log('connecting')
	connected = true
	resolve()
	})

	const createUser = ({
	userName = 'Anonymous',
	avatar = 'anon.png'
	} = {}) => ({
	userName,
	avatar
	})

	// {userName: 'echo', avatar: 'anon.png'}
	createUser({ userName: 'echo' })

	/* HOC fundamentally is just a function that accepts a Component and returns a Component:
	(component) => {return componentOnSteroids; } or just component => componentOnSteroids;
	Let's assume we want to wrap our components in another component that is used for debugging purposes,
	it just wraps them in a DIV with "debug class on it".
	Below ComponentToDebug is a React component.
	*/

	//HOC using Class
	//it's a function that accepts ComponentToDebug and implicitly returns a Class
	let DebugComponent = ComponentToDebug => class extends Component {

	{
	"name": "webpack-demo",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack",
	"build": "cross-env NODE_ENV=production webpack -p"
	},
	"author": "",

	$ diskutil list
	$ diskutik umount /dev/disk#s#
	$ sudo dd if=image.iso of=/dev/disk#s# bs=1m