annacoding2020

Functions:
    websocket:
    handler: src/websocket.handler
    events:
      - websocket:
          # Handles new connection requests
          route: $connect

      - websocket:
          # Handles all unrouted messages

annacoding2020

provider:
  name: aws
  runtime: nodejs12.x
  environment:
    API_GATEWAY_ENDPOINT:
      Fn::Join:
        - ''
        - - Ref: WebsocketsApi
          - .execute-api.
          - Ref: AWS::Region

annacoding2020

const AWS = require('aws-sdk')

const apig = new AWS.ApiGatewayManagementApi({
  endpoint: process.env.API_GATEWAY_ENDPOINT
})

const dynamodb = new AWS.DynamoDB.DocumentClient()

const Your_Table_NAME = process.env.CONNECTIONS_TABLE

annacoding2020

resources:
  Resources:
    # Your Table Name
    connectionsTable:
      Type: AWS::DynamoDB::Table
      DeletionPolicy: Retain
      Properties:
        TableName: ${self:custom.YourTableName}
        AttributeDefinitions:
          - AttributeName: connectionId

annacoding2020

custom:
  websocketArn:
    Fn::Join:
      - ':'
      - - arn:aws:dynamodb
        - Ref: AWS::Region
        - Ref: AWS::AccountId
        - table/${self:custom.YourTableName}

resources:

annacoding2020

const AWS = require('aws-sdk')

const apig = new AWS.ApiGatewayManagementApi({
  endpoint: process.env.APIG_ENDPOINT
})

const dynamodb = new AWS.DynamoDB.DocumentClient()

const YourTable = process.env.CONNECTIONS_TABLE

annacoding2020

const itemsToShow = 4;
const containerWidth = document.getElementById("#container").offsetWidth;
const itemWidth = containerWidth / 4;
<Carousel>
<item1 style="width=itemWidth" />
<item2 style="width=itemWidth" />
<item3 style="width=itemWidth" />
</Carousel>

annacoding2020

import React, { Component } from "react";
class Carousel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // if domLoaded is true if means we are not longer at the server-side.
      domLoaded: false,
      // itemWidth will be the average width of our Carousel items
      // Its default to 0 as we don't have access to it at the beginning
      itemWidth: 0,

annacoding2020

   render() {
    // children will be all of our Carousel items.
    const { children } = this.props;
    return (
      <div>
        <ul>
          {React.Children.toArray(children).map((child, index) => (
            <li
              key={index}
            >

annacoding2020

 let userAgent;
  let deviceType;
  if (req) {
    userAgent = req.headers["user-agent"];
  } else {
    userAgent = navigator.userAgent;
  }
  const md = new MobileDetect(userAgent);
  if (md.tablet()) {
   deviceType = "tablet";