jaunesarmiento

'use strict'

import React, { Component } from 'react'
import {
  Text,
  View
} from 'react-native'

// Styles are separated from the component
// since components tend to have crazy number of lines

jaunesarmiento

'use strict'

import React, { Component } from 'react'
import {
  TouchableOpacity,
  View,
} from 'react-native'

class ColorButton extends Component {
  

jaunesarmiento

    ACTION = build
    AD_HOC_CODE_SIGNING_ALLOWED = NO
    ALTERNATE_GROUP = staff
    ALTERNATE_MODE = u+w,go-w,a+rX
    ALTERNATE_OWNER = grantdavis
    ALWAYS_SEARCH_USER_PATHS = NO
    ALWAYS_USE_SEPARATE_HEADERMAPS = YES
    APPLE_INTERNAL_DEVELOPER_DIR = /AppleInternal/Developer
    APPLE_INTERNAL_DIR = /AppleInternal
    APPLE_INTERNAL_DOCUMENTATION_DIR = /AppleInternal/Documentation

jaunesarmiento

 // note that currentFirstResponder is obtained by this:
 // 
 // static var currentFirstResponder: UIResponder?
 // func findFirstResponder(sender: Any) {
 //   currentFirstResponder = self
 // }
 //
 // class func currentFirstResponder() -> UIResponder? {
 //   currentFirstResponder = nil
 //   UIApplication.shared.sendAction(#selector(findFirstResponder), to: nil, from: nil, for: nil)

jaunesarmiento

// ... import statements here

function App() {
  
  // Placeholder function for handling changes to our chat bar
  const handleChange = () => {};
  
  // Placeholder function for handling the form submission
  const handleSubmit = () => {};
  

jaunesarmiento

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

#root {
  display: flex;

jaunesarmiento

import React, { useEffect, useState } from 'react';
import API, { graphqlOperation } from '@aws-amplify/api';
import { listMessages } from './graphql/queries';

// ... rest of the code here

jaunesarmiento

const [messages, setMessages] = useState([]);

useEffect(() => {
  API
    .graphql(graphqlOperation(listMessages))
    .then((response) => {
      const items = response.data?.listMessages?.items;
      
      if (items) {
        setMessages(items);

jaunesarmiento

{messages.map((message) => (
  <div
    key={message.id}
    className={message.author === 'Dave' ? 'message me' : 'message'}>{message.body}</div>
))}

jaunesarmiento

.message {
  align-self: flex-start;
  ...
}
.message.me {
  align-self: flex-end;
  ...
}