DEV Community: Pamela Torres-Rocca

#Increasing the Loading Speed of a CLI Web Scraper to Improve the User Experience...

Pamela Torres-Rocca — Thu, 21 Oct 2021 19:27:35 +0000

Slow application load times can cause frustration on behalf of the user. This can lead to users abandoning the use of the application.

In the terminal, you can use the Linux time command to retrieve the time it takes to run a command. The command I used was time ./bin/Urgentcare. This command starts the application and loads a menu for the user.

real    0m12.122s
user    0m4.472s
sys 0m2.130s

The real time listed is the total start to end time of the call. The above time is the time for the scraper application to load the initial menu after the command "time ./bin/Urgentcare". The menu is displayed to the user after the application is started. This requires that the website is scraped and office objects are created with the data.

According to google think, the user bounce rate greatly increases once the load time goes from 1 to 3 seconds. The initial 12 second load time for the menu far exceeds that expectation. This could be due to the website itself taking a long time to load and/or the code is taking a long time to run.

To help resolve this issue you can provide feedback to the user to let them know that the application is successfully running that the data they are looking for is loading. I added a simple method in the CLI component called loading_message that prints a message to the screen that the data is loading. This way the user knows that the application is working and that their input was valid.

Welcome to the Urgent Care CLI




Retrieving data....
Loading......

In order to reduce how long it took the main menu to load, I changed one of the iterators from .each_with_index to .each. The office_url method that used it did not really require the addition of an index as a different method call was already adding it. This helped to reduce the load time.

However, the biggest factor in increasing the speed of the application was refactoring the code so that I was not waiting for a call to each individual office page to retrieve the current appointment times before loading the initial user menu. Instead, I now only call the office page for the appointment time upon user request from the initial menu. This produced a new time of

real    0m4.145s
user    0m1.451s
sys 0m0.861s

to run the time ./bin/Urgentcare command. This is now one third the time it took to load the menu prior to the refactor.

#Writing Tests for a Ruby Application

Pamela Torres-Rocca — Tue, 28 Sep 2021 19:31:02 +0000

Recently, I went back to the first CLI application that I had written in order to test the behavior of the application. I had recently created a new version of this application to support html changes to the website that it scrapes. The changes to the site were preventing the application from scraping the desired appointment time and location from the site. After the update to the application, I wanted to make sure that the behavior was still what I needed it to do.
To test behavior I used a gem called rspec that tests code in Ruby. The version is 3.10.0 and I used the documentation at https://relishapp.com/rspec/rspec-mocks/v/3-10/docs/basics as well as Stack Overflow for some examples of mocks and stubs. To get a good overview of testing using rspec I completed sections of the LinkedIn elearning course Ruby: Testing with RSpec to learn basic syntax.

I wrote a separate test file for each class of the component. Since I wanted to test the behavior of individual methods within the class, I needed to isolate each method and which was challenging as each method typically called an additional method within itself. In order to prevent the program from continuing to run while testing an individual method, I used test doubles which are objects that stand in for other objects. Each class was dependent on other classes, so I needed to write doubles for the other dependent classes in each test file to ensure that I was only testing the behavior of the current class.

Test Doubles for Classes


RSpec.describe Urgentcare::CLI do 

    let!(:cliInstance) {Urgentcare::CLI.new}
    let!(:office) {Urgentcare::Office}

The specific kinds of test doubles that I used were mocks which replicate the method that it is standing in for. You need to explicitly spell out the behavior that you need the mock to have. I also used stubs which gave an object behavior. For example I created an Office double and gave it data to return when this instance is called.

Office Class Double with Test Data

let!(:office) {Urgentcare::Office}

    before(:each) do
      @index = 0
      @new_array = []                
      @offices = @new_array << office.new("Worcester Greenwood St", "https://www.carewellurgentcare.com/urgent-care-appointment-form-worcester-greenwood/", "2:00 PM Friday, September 17 (EDT)  ", "(617) 804-6293 ")
    end

This Office double was used to test the output displayed to the user in the following spec:

it "displays office details when valid office selected" do
      allow(cliInstance).to receive(:list).and_return("List")
      cliInstance.instance_variable_set(:@index, 0)
      expect { cliInstance.office_details }.to output(a_string_starting_with(" \n---\nOffice Name: Worcester Greenwood St\nOffice Number: (617) 804-6293 \nOffice URL: https://www.carewellurgentcare.com/urgent-care-appointment-form-worcester-greenwood/\nOffice Next Available Appointment: 2:00 PM Friday, September 17 (EDT)")).to_stdout
    end

Strategic use of object doubles in testing isolates the specific class and method behavior that you want to test. In the example of the scraper it also allows for testing without requiring the use of the internet.

#State Management in a React Application using Redux for Beginners

Pamela Torres-Rocca — Wed, 04 Aug 2021 19:52:39 +0000

State vs props in react can be a difficult concept for beginners to wrap their heads around. State is private in the component while props can be viewed by the user and not changed. Frameworks such as React and state management tools such as Redux keep an updated copy of the state in one location. State management becomes a more complex issue the larger the application becomes due to increased dependency between the components.

Redux can be used with multiple frameworks and I used it in my project with React. In my application the "state" told the application who the user was, a history of charges and/or payments made to their account, as well as which departments were associated with the payments and charges. A global management tool reduces the amount of prop passing that you need to do between components. Data will flow down from this updated store to any components that need it. Because all of the components that I built with the exception of my forms were dependent on each other for data, I used a state management tool.

class AccountContainer extends Component {
    componentDidMount() {
        this.props.getAllAccounts();
    }

    //can call lifecycle hooks
    //render stated component
    //return react element from render function

    render() {
        console.log(this.props.accounts);

        return (
            <div>
                <Switch>
                    <Route exact path="/accounts/new" component={AccountNew} />
                    <Route
                        exact
                        path="/accounts/:id"
                        render={(props) => {
                            console.log(this.props.accounts);
                            console.log(this.props.account);
                            return (
                                <Account
                                    {...props}
                                    account={this.props.account}
                                />
                            );
                        }}
                    />
                    <Route
                        exact
                        path="/accounts"
                        render={(props) => {
                            return (
                                <Accounts
                                    {...props}
                                    accounts={this.props.accounts}
                                />
                            );
                        }}
                    />
                </Switch>
            </div>
        );
    }
}
//selects part of data from the store that the component needs. receives entire store, returns object
//is this needed if not displaying list of accounts?
const mapStateToProps = (state) => {
    //subscribe to redux updates
    //this is the state from redux
    return {
        account: state.loginFormReducer, //accounts located inside the state
        accounts: state.accounts,
    };
};
//dispatch happens automatically with connect
export default connect(mapStateToProps, { getAllAccounts })(AccountContainer);

I used local state for my forms because I only needed to display what the user was entering into the form back to the user on the page. This state data was then passed to an action, followed by a reducer which then updates the global state.

class AccountNew extends React.Component {
  state = { name: "", balance: "" };

  onChange = (event) => {
    this.setState({
      //do not directly set state, can accept a function to display most up to date value
      [event.target.name]: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.newAccount(this.state);
    this.setState({
      name: "",
      balance: "",
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Account Name: </label>
          <input
            type="text"
            placeholder="Name"
            value={this.state.name}
            name="name"
            onChange={this.onChange}
          />
          <br />
          <label>Account Balance: </label>
          <input
            type="text"
            placeholder="Balance"
            value={this.state.balance}
            name="balance"
            onChange={this.onChange}
          />
          <br />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

Aside from these examples of global and local state, I persisted some data in localStorage which is an object that stores a string with no expiration time. This data stated that the user was logged in and was used by logic throughout different components to display different messages to the user based on login status.

In App Component - Creating a const with the value from localStorage

import React from "react";
import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import { connect } from "react-redux";
import AccountContainer from "./containers/AccountContainer";
import NavBar from "./components/NavBar.js";
import DepartmentsContainer from "./containers/DepartmentsContainer";
import PaymentsContainer from "./containers/PaymentsContainer";
import Login from "./components/registrations/Login";
import Signup from "./components/registrations/Signup";
import "./App.scss";

function App(props) {
  const currentAccount = localStorage.getItem("loggedIn");
  return (

Storing LoggedIn value in Account Action when User logs in:

export const getAccount = (data, history) => {
  //a thunk
  return (dispatch) => {
    console.log(data.relationships.account.data.id);
    return fetch(
      `http://localhost:3001/api/v1/accounts/${data.relationships.account.data.id}`,
      {
        method: "GET",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(),
      }
    )
      .then((res) => res.json())
      .then((account) => {
        if (account.error) {
          console.log(account);
          alert("error");
        } else {
          console.log(account.data.id);
          localStorage.setItem("loggedIn", true); //can only set string, JSON.stringify to convert
          dispatch(setCurrentAccount(account.data));
          history.push(`/accounts/${account.data.id}`);
        }
      })
      .catch(console.log);
  };
};

# Making Your Website More Accessible. What does it mean?

Pamela Torres-Rocca — Wed, 14 Jul 2021 20:23:36 +0000

There are modifications that you can make to your website that makes it easier for users with a handicap to access. This is called accessibility. Some of these modifications include using appropriate HTML elements such as Title and Header. These changes often align with better Search Engine Optimization results which enables your page to be found in searches and helps to drive more traffic to the page.
You can test how accessible your website is in order to make the changes that will have the greatest impact on accessibility. One way to do this is using the WebDeveloper extension tool for Chrome, can be downloaded at https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US. Another way to do this specifically for visually impaired users is try out your application using a screen reader. Screen readers read the web content to the user. On a Mac computer this is done using VoiceOver https://support.apple.com/guide/voiceover/browse-webpages-vo27974/10/mac/11.0. On a Windows computer this is done using Narrator https://www.pcmag.com/how-to/how-to-use-windows-10s-narrator-to-read-your-screen-aloud.
Accessibility is particularly important for applications in the healthcare space as everyone needs to access healthcare services. Such an essential service must allow users to locate healthcare services in order to receive the care that they need. One application that I wrote allowed patients to ask a question regarding their healthcare and receive a specialty specific response. I made a few changes to the landing page to make it easier for a screen reader to read the content. The following is what the landing page initially looked like:

Welcome Page Prior to Accessibility Changes:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
      body {
      background-image: url('<%= asset_path 'camilo-jimenez-vGu08RYjO-s-unsplash.jpg' %>');
      background-size: cover;
      }
      .center {
        justify-content: center;
      }
      .navbar-custom {
        background-color: #D8DEEE;
      }
      .sign-in {
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
        background-color: #D8DEEE;
      }
      .card-signin .card-title {
        margin-bottom: 2rem;
        font-weight: 300;
        font-size: 1.5rem;
      }
      .card-signin .card-body {
        padding: 2rem;
      }

</style>
</head>
<body>
  <div class="text-center center font-weight-bold">
  <nav class="navbar navbar-custom sticky-top center"><h1>Welcome to Ask Your Health Question</h1>
  </div>
<% if flash[:notice] %>
<div class="notice"><h2><%= flash[:notice] %></h2></div>
  <% end %>
 </div>
</nav>
</div>

<div class="container-fluid mx-auto text-nowrap text-dark" style="width: 500px;">
  <table class="table table-striped">
    <thead>
      <tr>

<%= form_for(:session, url: "sessions/create", html: { autocomplete: "new-password" })   do |f| %>
<br>
<div class="col sign-in card-title card-body">
<h3>Sign in if you are a Member</h3>
<div class="field"><%= label :name, "Enter your email"%><br><br>
  <%= f.text_field :email, :class => "span5"  %>
</div><br>

<div class="field"><%= label :password, "Enter your password" %><br><br>
  <%= f.password_field :password, :class => "span5"  %>
</div><br><br>

<div class="actions">
  <%= f.submit "Sign In"  %>
</div>
<% end %><br><br>

<h3>Create a New Account</h3>

<%= link_to('Login with Facebook!', '/auth/facebook') %><br><br>
<%= link_to('Create a New Account as a Patient', 'users/new_patient') %><br><br>
<%= link_to('Create a New Account as a Physician', 'users/new_physician') %><br><br>

  </table>
</div>
</div>
</body>
</html>

With a quick change to include a descriptive title element without an additional header .

Welcome Page After Accessibility Changes

<!DOCTYPE html>
<html lang="en">
<head>
<style>
      body {                     
      background-image: url('<%= asset_path 'camilo-jimenez-vGu08RYjO-s-unsplash.jpg' %>');
      background-size: cover;
      }
      .center {
        justify-content: center;
      }
      .navbar-custom {
        background-color: #D8DEEE;
      }
      .sign-in {
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
        background-color: #D8DEEE;
      }
      .card-signin .card-title {
        margin-bottom: 2rem;
        font-weight: 300;
        font-size: 1.5rem;
      }
      .card-signin .card-body {
        padding: 2rem;
      }

</style>
</head>
<body>
  <div class="text-center center font-weight-bold">
    <nav class="navbar navbar-custom sticky-top center"></nav>
    <title>Company Name: Welcome to Ask Your Health Question <%= content_for(:title) %></title> <%#changed to a title tag%>
  </div>
<% if flash[:notice] %>
<div class="notice"><h2><%= flash[:notice] %></h2></div>
  <% end %>
 </div>
</div>

<div class="container-fluid mx-auto text-nowrap text-dark" style="width: 500px;">
  <table class="table table-striped">
    <thead>
      <tr>

<%= form_for(:session, url: "sessions/create", html: { autocomplete: "new-password" })   do |f| %>
<div class="col sign-in card-title card-body">
<h3>Sign in if you are a Member</h3>
<br>
<div class="field"><%= label :name, "Enter your email"%><br><br>
  <%= f.text_field :email, :class => "span5"  %>
</div>

<div class="field"><%= label :password, "Enter your password" %><br><br>
  <%= f.password_field :password, :class => "span5"  %>
</div><br><br>

<div class="actions">
  <%= f.submit "Sign In"  %>
</div>
<% end %><br><br>

<h3>Create a New Account</h3>

<%= link_to('Login with Facebook!', '/auth/facebook') %><br><br>
<%= link_to('Create a New Account as a Patient', 'users/new_patient') %><br><br>
<%= link_to('Create a New Account as a Physician', 'users/new_physician') %><br><br>

  </table>
</div>
</div>
</body>
</html>

# Controlled Components in React Payment Application

Pamela Torres-Rocca — Fri, 02 Jul 2021 14:27:08 +0000

In my final react project which adds charges and processes payments, I had several forms that the user could interact with in order to login, logout, and submit a payment in the application.
The default HTML form behavior is to browse to a new page once the form is submitted. Unless a controlled form is used in react, the data is handled by the DOM and not the virtual DOM. However, in the controlled components that I wrote to handle login, logout, and payment submission behavior, the data added by the user is used in a callback function. The user will input the information and the component will update the state through the javascript functions that handle form change and submission. Each state attribute is also accepted by the component as a prop. When the user types their input, the component state changes and the user is able to see their changes displayed as props in the react component. Currently the only validations occur when the form is submitted on the backend. However, validations could be added in this component to give the user feedback prior to form submission.
The name and password attributes in the state are used to conditionally render different parts of components and display any associated data such as payments and charges.

const Login = ({ login, name, password, setCurrentAccount, history }) => {
  const [form, setForm] = useState({
    //array destructuring
    account: {
      name: "",
      password: "",
    },
  });

  const handleLoginFormChange = (event, target) => {
    setForm({
      ...form,
      [target]: event.target.value,
    });
  };

  const handleLoginFormSubmit = (event) => {
    //does this need to be bound?
    event.preventDefault(); //state contains most up to date form data. prevent page refresh
    login(form, history);
  };

The Javascript function that takes in the form data then calls the login action and updates the state.
We have an initial state of form and we can update it with the setForm function. This is defined in the useState hook.

# Hoisting and Scope for Beginners

Pamela Torres-Rocca — Thu, 17 Jun 2021 18:18:00 +0000

There are two concepts that are important to be familiar with when first learning to code in Javascript. Misinterpreting them can cause you some frustration when searching for errors in your code.

Scope are the variables and functions available for use within the current execution context. The execution context is the environment in which the code is being run. In Javascript the scope could be the global scope, the function scope, or the block scope. Variables declared in the global scope are accessible anywhere throughout the code. Within an execution context, when a variable is referenced, that context can look further up the scope chain to find the declaration of the variable. So a function within a function can search both the outer function and the global scope. Keep this in mind when trying to access values stored in variables. A reference error may indicate that the variable was declared and assigned, just not accessible within your current scope.

        //Global variable accessed from within a function

        let userId = function retrieveuserId(){

              return $('h2#userid').data('user-id')

            }  

 function listenForClick() {

         console.log('setting up click handler');

    $("button#messages-data").on('click', event => {

        console.log('button clicked');

          event.preventDefault()  


        var url = `${userId()}/messages.json`

        fetch(url,   {

            })

            .then(res => res.json()) 

            .then(allMessages => {

                $('.square').html('')

                console.log(allMessages)



                allMessages.forEach(message => {

                    let newMessage = new Message(message)

                    let messageHtml = newMessage.postHTML()

                    $('.square').append(messageHtml)

                })

            })

            .catch(error => console.error('Error:', error));



    })

}

Hoisting is when a variable or function declaration is available at the top of it's scope even though the declaration is below the call to the function or variable. When a function is invoked prior to its assignment, the function is still executed due to hoisting. Function declarations are hoisted before variables are. Using var to declare a variable after the variable is invoked, will return "undefined". Using let and const and then referencing them before they have been declared will return a reference error instead of undefined.

     //returns the desired text 'Patient Message' due to hoisting 

       messageRetriever();

               function messsageRetriever() {
                      return ’Patient Message’;
                  }

The addition of let and const in ES6 can cause some confusion around the concepts of scope and hoisting. Prior to ES6, most variables were declared with var. With var you can declare a variable twice in the code without receiving an error message. Const and let will not allow you to declare a variable (give it a name) a second time. Const also cannot be reassigned (set to a value). When a variable is declared without a keyword (such as var, let or const), it is automatically considered a global variable and is accessible within the global scope no matter where it was declared in the code. When var is declared in a block, it can still be accessed outside of that block scope. Const and let are block scoped and when declared in a block, will not allow the values to be accessed outside of the block and will return an error.

# Javascript Project

Pamela Torres-Rocca — Thu, 17 Jun 2021 18:11:23 +0000

For my Rails project, I created an application that would allow users who registered as patients to ask medical questions to physicians. Users who register as physicians can answer these questions.

For my Javascript Project, I used this language to add the ability for my patient users to see an index of all of the questions that they have asked as well as a show page which displays all of the details of that question as well as all of the responses that this question has received. This allows the user to quickly find information that is relevant to them and quickly flip back and forth between questions as they do not have to leave their own personal user show page.

The user can also ask a new question in order to receive help from the online physicians. To do this, they are directed to a new question form which when submitted displays all of the information submitted as a new question. This confirms to the user that their question was submitted and lets them review all of the information that they physician will see again without leaving the page. These features enhance the user experience by displaying results more quickly and reducing the number of clicks that the user has to perform.

# Single Table Inheritance vs. Polymorphic Association

Pamela Torres-Rocca — Thu, 17 Jun 2021 18:07:40 +0000

For my Ruby on Rails project, I needed to choose a setup so that two different users could access the application. I chose a single table inheritance because my two users shared most of the same data. The table would also be small and not accessed by other tables. Searching becomes more time consuming when the table is large and has many nil values.

One user acts as a patient and is able to send messages to physician users. Their profile is simple and consists of a name, email address and password. The other user is a physician and has the same data as a patient as well as an NPI number that is unique to each physician as well as their specialty.

The application allows patients to submit medical questions for physicians to answer. The single table inheritance design setup allows for all users to inherit from the user class reducing and streamlining the code.

# Sinatra Project - Electronic Medical Record

Pamela Torres-Rocca — Thu, 17 Jun 2021 18:05:44 +0000

For my Sinatra project, I developed an application that would function as an electronic medical record. Medical records provide clear, easy access to patient data. This allows clinicians to have up to date access in order to make clinical decisions.

This application allows patients to log in to view their medical history and active medical problems that their physician is working on. Physicians are able to add patients, and edit their medical history and problems.

Validating the data entered into the database and ensuring that only physicians have editing access were big challenges for this project.

  validates :username, :presence => true, :uniqueness => true
  validates :npi, :presence => true, :uniqueness => true, length: { minimum: 10 }
  validates :password, :presence => true, length: { minimum: 5 }

The above code was entered into the physician model. This way every new physician entry must have a unique username, password, and an NPI number. The NPI number is a unique number that physicians are assigned for their work.

I included a helper method that will tell whether a user is currently logged in:

helpers do
        def logged_in?
            session[:id] != nil
        end
end

This method checks whether it a user is logged in for pages only to be viewed by users. Pages to allow editing and creating patients are only accessible due to code that checks is the current session id is equal to the physician id. This protects the integrity of the data and improves the user experience by only showing the user links and fields that are relevant to them.

#Refactoring Command-Line Interface Project

Pamela Torres-Rocca — Thu, 17 Jun 2021 17:18:08 +0000

Recently I needed to refactor an application that I had written for the first project in my coding bootcamp. This was a scraper that collected data from an urgent care website to give the user the first available appointment time at their desired location.
The CLI no longer scraped the appropriate data due to some changes to the site. To correct this, many of the changes only required modifications to the data returned to get it to display properly. The office phone number was displaying information in addition to the phone number that was not relevant. This just required adding on the gsub method to remove the data that I did not want to display.

office.phone_number = office_details.css('a[href]').text.gsub("Get DirectionsBook Urgent Care AppointmentBook COVID-19 TestBook Telemed Appointment", " ")

What made scraping easier on the new site was that the urgent care center information was now displayed in one column instead of two. I no longer needed to create two arrays and zip them together which had been very time consuming.
The site is designed to list the current available appointment times on the same page that lists each individual urgent care center. The site currently lists the next available time as "Invalid client specified". Previously I had been scraping the information off a second url which now did not work. Now the desired information was actually contained on each sites individual page in a dropdown menu contained in a iframe.
To get this information I wrote code to scrape the url for each individual urgent care centers site off the main page and stored it in a variable called url. I then passed this variable into a new method called get_waittime. The scraper then does to this new url and uses the waitir gem to wait until the element that identifies the iframe is loaded on the site.

def get_waittime(url) 
    @@new_browser = @@browser
    @@town_page = @@new_browser.goto(url)
    js_doc = @@new_browser.div(id: 'left-area').iframe.wait_until(&:present?)
    @wait_time = js_doc.button(data_id: "timeSelector").text.gsub("\n", " ")
    Urgentcare::Office.all[0].next_available = @wait_time
  end

The next available wait time is then stored in a variable which can be added to the office object and displayed to the user.

#Creating an Application to Give Current Urgent Care Wait Times

Pamela Torres-Rocca — Thu, 10 Jun 2021 19:18:38 +0000

My first project in Ruby is a CLI application that scrapes the website of a company that provides urgent care. Urgent care is provided to patients that typically cannot wait until the next business day but are not experiencing an illness or injury that is life-threatening. Many urgent care centers are located throughout Massachusetts to treat patients and prevent long wait times in the Emergency Department. My application lists the next available appointment time at urgent care centers in Massachusetts based on location. This provides a quick and easy way to find care.

The biggest challenge when coding this project was to find the best way to organize the Scraper class. This class scrapes the website for the desired data and stores it in a separate Office class. All of the relevant data that I wanted was located under the node of ('.et_pb_column_1_4'). However, the relevant data for each office was located in two different ('.et_pb_column_1_4'). This required separating each ('.et_pb_column_1_4') into two separate arrays and then zipping them together in order to form one office_details array where each element contains the relevant data for each office.

  def get_clinics;
         url_array = [];
         digits_array = [];
         get_page.css('.et_pb_column_1_4').each_with_index do |location, index|
 if index.odd?
    url_array.push(location)
 else
    digits_array.push(location)
 end;
                         url_array;
                        digits_array;
         end
digits_array[0..16].zip(url_array[0..16]).each_with_index do |office_details, index|
        end
 end

After getting past this barrier, scraping from each element of the office_details array was simpler. The next challenge was discovering that the Next Available Appointment Time data that I wanted on the second page was contained within an iframe. This required scraping the link for the individual office page, then the iframe link, and then the appointment time data.

doc_d = Nokogiri::HTML(open("https://www.carewellurgentcare.com#{office.url}"));
doc_i = doc_d.css('.locat').attr('src').text;
doc_n = Nokogiri::HTML(open(doc_i.to_s));
    office.next_available = doc_n.css('.panel-heading').text.strip.gsub("\r\n", ' ').split(',')[0];

While challenging, these obstacles taught me the importance of proper planning in order to return exactly the data that you are looking for.

# Final Portfolio Project

Pamela Torres-Rocca — Tue, 18 May 2021 17:28:41 +0000

For my final project I am creating an application that functions as an electronic medical record. For this project, I thought it was important to have two different users so that the application can be experienced as either a patient or as an administrator. Patients are able to log in and see their account balance. From there they can make a payment towards their balance. As an administrator, you can add a charge to an account. I used the enum attribute in Ruby on Rails to store the value of either a patient or admin in the database.

class Account < ApplicationRecord
    enum status: [:patient, :admin] #keep track of user role 
    has_secure_password #already validates presence 
    validates :name, uniqueness: true
    has_many :departments
    has_many :payments 
    accepts_nested_attributes_for :departments, :payments 
    after_initialize :set_defaults

    def set_defaults
        self.balance ||= 0   #if nil, set default 
    end

 #after_initialize do #default value is patient 
   #if self.new_record?
    # self.status ||= :patient 
  # end
 #end

end

Each account can have many payments and many departments associated with it. The departments each carry a charge that totals to the account balance. The payments store the payment information submitted by a patient and update the account balance through a method written on the account model.
When the patient logs in they can see their account balance and any department charges associated with the account. They can then choose to submit a payment by credit card through the payment form. Submitting a payment through the payment form dispatches an action to add a payment as well as get the current account so that the account data refreshes on the user page. Redux manages the store and displays the new account balance without refreshing the page.

                    Add Payment Action

>  export const newPayment = (paymentData, history) => {
>  
>   return (dispatch) => {
>     const url = `http://localhost:3001/api/v1/accounts/${paymentData.account_id}/payments/new`;
>     
>     return fetch(url, {
>       method: "POST",
>       credentials: "same-origin",
>       headers: {
>         "Content-Type": "application/json",
>       },
>       body: JSON.stringify(paymentData),
>     })
>     
>       .then((res) => res.json())
>       .then((payment) => {
>         console.log(payment);
>         if (payment.error) {
>           alert("error");
>         } 
>         else 
>         {
>           dispatch(addPayment(payment.data));
>           console.log(payment.data);
>           //call additional action to update account
>           dispatch(getAccount(payment.data, history));
>           //history.push(`/accounts/${paymentData.account_id}`);
>         }
>       })
>       .catch(console.log);
>   };
> }; 

Account Component Displaying User Data 

> import { connect } from "react-redux";
> import React from "react";
> import Accounts from "./Accounts.js";
> import { withRouter } from "react-router-dom";
> import { Button } from "react-bootstrap";
> import { getDepartments } from ".././actions/currentDepartments.js";
> 
> 
> 
> const Account = (props) => {
> 
>     const handleClick = (e) => {
>         e.persist();
>         e.preventDefault();
>         props.getDepartments(props.account.account.id, props.history);
>     };
> 
>     return (
>         <div className="container">
>             <div className="row align-items-center">
>                 <div className="col">
>                     <h2>
>                         {" "}
>                         {/* can assign a key by converting to an integer? item index? */}
>                         <label> Account Name </label>
>                         {props.account
>                             ? ` - ` + props.account.account.attributes.name
>                             : null}
>                         <br></br>
>                         <label> Account Balance </label>
>                         {props.account.account.attributes.balance != null
>                             ? `  $` + props.account.account.attributes.balance
>                             : null}
>                     </h2>
>                     {props.account.account.attributes.status === "patient" ? (
>                         <Button onClick={handleClick}>View Charges</Button>
>                     ) : null}
>                     {localStorage.getItem("status") === "admin" ? (
>                         <Accounts {...props} accounts={props.accounts} />
>                     ) : null}
>                 </div>
>             </div>
>         </div>
>     );
> };
> export default withRouter(connect(null, { getDepartments })(Account));
>

On the backend several methods on the payment model update the user's account balance and the balance of the department. This new data is then displayed on the patient account front end as soon as the url changes to the user's account.