Refayat Haque refayathaque

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">

## lambda-python-venv-deployments
In the past, our team has been plagued with python dependency issues when updating our Lambda deployment packages. With the
help of senior developers we were able to update the python modules by 'building from source'. Essentially, our senior
developers would spin up an Amazon Linux machines and build out the python package there by running `pip install` for all
our modules. What resulted from these processess were certain `.so` files which we then had to include in our Lambda
deployment packages before we zipped them up and uploaded them to the Lambda Management Console. However, now, with the help
of virtual environments we may be able to introduce updated versions of existing python modules in our Lambda functions
without the need for these esoteric `.so` files. Here is what we advice you run on your terminal:

# Installing the python virtual environment
pip install virtualenv

## Input.js
import React, { Fragment } from 'react'
import useFetchPosts from '../Hooks/useFetchPosts';
import useFetchComments from '../Hooks/useFetchComments';

export default () => {
  const [ setUserIdPosts ] = useFetchPosts();
  const [ setPostIdComments ] = useFetchComments();

  const setUserIdInCustomHooks = (id) => {
    setUserIdPosts(id)

## useFetchPosts.js
import { useState, useEffect, useContext } from 'react'
import { PostsContext } from './PostsContext'

export default () => {
  const [ userId, setUserId ] = useState(null)
  const [ state, dispatch ] = useContext(PostsContext);

  useEffect(() => {
    let didCancel = false
    // boolean to let data fetching logic know about the state (mounted/unmounted) of component, if component unmounted then boolean will be true which will prevent setting thee component state after data fetching asynchronously resolved eventually

## PostsContext.js
import React, { useReducer, createContext } from "react";

export const PostsContext = createContext([ {}, () => {} ]);

const reducer = (state, action) => {
  console.log(PostsContext)
  switch (action.type) {
    case 'FETCH_INIT':
      return { ...state, isLoading: true, isError: false, request: action.payload };
        // destructuring statement keeps state object immutable, state is never directly mutated to maintain best practice

## Posts.js
import React, { Fragment, useContext } from 'react'
import { PostsContext } from '../Hooks/PostsContext'

export default ({ listType='bodies', header='' }) => {
  const [ state ] = useContext(PostsContext);

  const renderFetchedData = () => {
    if (state.isLoading) {
      return <div>Loading...</div>
    } else {

## App.js
import React, { Fragment } from 'react';
import '../styles.css';
import Input from './Input';
import Posts from './Posts';
import Comments from './Comments';
import UserId from './UserId';
import { PostsContextProvider } from '../Hooks/PostsContext';
import { CommentsContextProvider } from '../Hooks/CommentsContext';

export default () => {

## s3.tf
resource "aws_s3_bucket" "website_static_files" {
  bucket = var.BUCKET_NAME
  acl    = "private"
  policy = data.aws_iam_policy_document.bucket_website_hosting.json
  website {
    index_document = "index.html"
  }
  force_destroy = true
}

## acm.tf
resource "aws_acm_certificate" "certificate" {
  domain_name       = var.DOMAIN_NAME
  validation_method = "DNS"
  lifecycle {
    create_before_destroy = true
  }
}

resource "aws_acm_certificate_validation" "certificate" {
  certificate_arn         = aws_acm_certificate.certificate.arn

## cloudfront.tf
resource "aws_cloudfront_origin_access_identity" "origin_access_identity" {}

resource "aws_cloudfront_distribution" "distribution" {
  origin {
    domain_name = aws_s3_bucket.website_static_files.bucket_regional_domain_name
    origin_id   = "bucket-${aws_s3_bucket.website_static_files.bucket}"
    s3_origin_config {
      origin_access_identity = aws_cloudfront_origin_access_identity.origin_access_identity.cloudfront_access_identity_path
    }
  }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	In the past, our team has been plagued with python dependency issues when updating our Lambda deployment packages. With the
	help of senior developers we were able to update the python modules by 'building from source'. Essentially, our senior
	developers would spin up an Amazon Linux machines and build out the python package there by running `pip install` for all
	our modules. What resulted from these processess were certain `.so` files which we then had to include in our Lambda
	deployment packages before we zipped them up and uploaded them to the Lambda Management Console. However, now, with the help
	of virtual environments we may be able to introduce updated versions of existing python modules in our Lambda functions
	without the need for these esoteric `.so` files. Here is what we advice you run on your terminal:

	# Installing the python virtual environment
	pip install virtualenv
	import React, { Fragment } from 'react'
	import useFetchPosts from '../Hooks/useFetchPosts';
	import useFetchComments from '../Hooks/useFetchComments';

	export default () => {
	const [ setUserIdPosts ] = useFetchPosts();
	const [ setPostIdComments ] = useFetchComments();

	const setUserIdInCustomHooks = (id) => {
	setUserIdPosts(id)
	import { useState, useEffect, useContext } from 'react'
	import { PostsContext } from './PostsContext'

	export default () => {
	const [ userId, setUserId ] = useState(null)
	const [ state, dispatch ] = useContext(PostsContext);

	useEffect(() => {
	let didCancel = false
	// boolean to let data fetching logic know about the state (mounted/unmounted) of component, if component unmounted then boolean will be true which will prevent setting thee component state after data fetching asynchronously resolved eventually
	import React, { useReducer, createContext } from "react";

	export const PostsContext = createContext([ {}, () => {} ]);

	const reducer = (state, action) => {
	console.log(PostsContext)
	switch (action.type) {
	case 'FETCH_INIT':
	return { ...state, isLoading: true, isError: false, request: action.payload };
	// destructuring statement keeps state object immutable, state is never directly mutated to maintain best practice
	import React, { Fragment, useContext } from 'react'
	import { PostsContext } from '../Hooks/PostsContext'

	export default ({ listType='bodies', header='' }) => {
	const [ state ] = useContext(PostsContext);

	const renderFetchedData = () => {
	if (state.isLoading) {
	return <div>Loading...</div>
	} else {
	import React, { Fragment } from 'react';
	import '../styles.css';
	import Input from './Input';
	import Posts from './Posts';
	import Comments from './Comments';
	import UserId from './UserId';
	import { PostsContextProvider } from '../Hooks/PostsContext';
	import { CommentsContextProvider } from '../Hooks/CommentsContext';

	export default () => {
	resource "aws_s3_bucket" "website_static_files" {
	bucket = var.BUCKET_NAME
	acl = "private"
	policy = data.aws_iam_policy_document.bucket_website_hosting.json
	website {
	index_document = "index.html"
	}
	force_destroy = true
	}
	resource "aws_acm_certificate" "certificate" {
	domain_name = var.DOMAIN_NAME
	validation_method = "DNS"
	lifecycle {
	create_before_destroy = true
	}
	}

	resource "aws_acm_certificate_validation" "certificate" {
	certificate_arn = aws_acm_certificate.certificate.arn
	resource "aws_cloudfront_origin_access_identity" "origin_access_identity" {}

	resource "aws_cloudfront_distribution" "distribution" {
	origin {
	domain_name = aws_s3_bucket.website_static_files.bucket_regional_domain_name
	origin_id = "bucket-${aws_s3_bucket.website_static_files.bucket}"
	s3_origin_config {
	origin_access_identity = aws_cloudfront_origin_access_identity.origin_access_identity.cloudfront_access_identity_path
	}
	}