ryan2clw’s gists

ryan2clw / BingoBoard.tsx

Last active August 24, 2019 22:34

The card of a bingo game

	import React from 'react';
	import { Flex } from 'rebass';
	import styled from 'styled-components';
	import Square from './Square';
	import { ICard, IRow } from '../store/cards';

	// Create a Title component that'll render an <h1> tag with some styles
	const BingoHeader = styled.div`
	width: 132%;
	margin-left: -15%;

ryan2clw / Square.tsx

Last active August 24, 2019 22:32

Square for bingo game

	import React from 'react';
	import styled from 'styled-components';
	import { Flex } from 'rebass';

	const FlexHeight = styled(Flex)`
	height: ${(props) => props.height};
	min-width: 0;
	height: 42px;
	margin: 1px !important;
	padding: 4px;

ryan2clw / bingoService.tsx

Last active August 24, 2019 00:10

Call the bingo backend with AJAX request

	import { handleResponse } from '../store/events';

	export const getCards = async () => {
	const requestOptions = {
	method: 'GET'
	};
	const uri = "http://localhost:8000/cards";
	return fetch(uri, requestOptions)
	.then(handleResponse)
	.then(cards => cards);

ryan2clw / actionTypes.tsx

Last active August 23, 2019 23:56

Events for bingo game aka actionTypes

ryan2clw / BingoPage(Part3).tsx

Last active August 24, 2019 22:26

Main page for python bingo

	import * as React from 'react'
	import styled from 'styled-components';
	import { connect } from 'react-redux';
	import { Flex } from 'rebass';
	import { Container, Row, Spinner } from 'reactstrap';
	import { IApplication, IConnectedReduxProps } from '../store/configureStore';
	import BingoBoard from './BingoBoard';
	import { requestNumbers } from '../store/cards';
	import './styles/App.css';
	import './styles/bootstrap.css';

ryan2clw / index.html

Created August 17, 2019 13:32

The entry point of the python bingo app

	<head>
	<!-- keep the old stuff -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<head>
	<!-- keep the old stuff -->
	<footer class="text-center pt-3">
	<p class="d-flex flex-row justify-content-center">
	<a href="https://medium.com/@ryan.dines" target="_top">Brought to you with
	<span class="fa fa-heart crimson"></span>
	by Ryan Dines

ryan2clw / messages.tsx

Last active August 23, 2019 18:15

Action types for python bingo

	import { action as act } from 'typesafe-actions'
	import actionTypes from './actionTypes';
	import { Reducer } from 'redux'

	/* Message Actions */

	export const success = (message: string) => act(actionTypes.ALERT_SUCCESS, message);
	export const danger = (message: string) => act(actionTypes.ALERT_DANGER, message)
	export const clear = () => act(actionTypes.ALERT_CLEAR);

ryan2clw / configureStore.tsx

Last active August 23, 2019 18:02

Python Bingo sample code

	import { createStore, compose, applyMiddleware, combineReducers, Dispatch, Action, AnyAction } from 'redux'
	import { createLogger } from 'redux-logger';
	import thunk from "redux-thunk";
	import { messageReducer, IMessageState } from './messages';

	export interface IConnectedReduxProps<A extends Action = AnyAction> {
	dispatch: Dispatch<A>
	}

	export interface IApplicationState {

ryan2clw / views.py

Created August 17, 2019 12:56

Endpoints for creating and requesting cards

	""" These are endpoints that get or create cards and rows """
	from rest_framework import generics
	from play.models import Card
	from play.serializers import CardSerializer

	class CardList(generics.ListCreateAPIView):
	""" Get or create cards """
	queryset = Card.objects.all()
	serializer_class = CardSerializer

ryan2clw / serializers.py

Last active August 25, 2019 01:14

Serialize card and row data

	"""
	Form the JSON that we need
	"""
	from random import sample
	from rest_framework import serializers
	from play.models import Row, Card

	def card_data(card):
	""" populates card with 5 rows of random data """
	b_column = sample(range(1, 16), k=5)

Ryan Dines ryan2clw