Thursday, December 30, 2021

CSV Helper

 

CsvHelper:

A .NET library for reading and writing CSV files. Extremely fast, flexible, and easy to use.


Github:
https://joshclose.github.io/CsvHelper/


Reading a csv file :

public class Foo { [Name("id")] public int Id { get; set; } [Name("name")] public string Name { get; set; } }

using (var reader = new StreamReader(@"c:\projects\data.csv")) using (var csv = new CsvReader(reader, config)) { var records = csv.GetRecords<Foo>(); }

Writing to CSV:

using (var writer = new StreamWriter("c:\projects\data.csv")
using (var csv = new CsvWriter(writer, CultureInfo.InvariantCulture)) { csv.WriteRecords(records); }


Utility method for refactoring code for getting all the records from CSV:

private IEnumerable<T> ReadStream<T, TMap>(string csvPath) where TMap: ClassMap { IEnumerable<T> records; using (var reader = new StreamReader(this.awsS3Service.GetS3BucketFile(csvPath))) { using (var csv = new CsvReader(reader, CultureInfo.InvariantCulture)) { csv.Configuration.Delimiter = "|"; csv.Configuration.RegisterClassMap<TMap>(); records = csv.GetRecords<T>().ToList(); } } return records; }


Call above method using :
this.ReadStream<BrandFile, BrandFileCSVMap>(s3FilePath)

public class BrandFile { public int BrandId { get; set; } public string BrandName { get; set; } public string BrandWebsite { get; set; } public string BrandLogoURL { get; set; } }

public sealed class BrandFileCSVMap: ClassMap<BrandFile> { public BrandFileCSVMap() { AutoMap(CultureInfo.InvariantCulture); } }


Posted by at No comments:

Saturday, November 13, 2021

Fundamentals of React

Why React: It is a JS library by Facebook to create web user interfaces. 

Features of React:
1. Virtual DOM : best for performance. 
2. Reactive Updates
3. Writing HTML in JS code rather than code templating (code placeholders and if -switches)

Building blocks of React:

1. Components - Functional components and Class components
2. Props and States
3. JSX
4. React Hooks
5. Redux (Flux)

Playgrounds:
https://jscomplete.com/playground



JSX: Javascript XML



equivalent to :

React.createElement(
Sum, {a:3, b:4}, null
)

React Data flow:

Ways to create React components:

1. createClass
2. ES classes
3. Functions
4. Arrow functions


We have used create-react-app introduced by Facebook which takes away 70% of boilerplate setup. 
This is a wrapper so you don’t need to worry about environment setups, Webpack configurations, bundle properties, dev server and so much more. 
All of this headache is handled by Facebook so all your worry is around building application.
create-react-app provides us complete environment setup with React but these days an application need more than just React. Applications are growing fast and stuff like state management goes out of hand quickly.
Create a component :
1. Using the createClass factory
var Todolist = React.createClass({

    render: function() {
        return (
        <div></div>
        );
    }
})



2. Extending React.Component

import React from 'react';

export default class Todolist extends React.Component
{
    render() {
        return (
            <div>
            <h1 className="header">React Component</h1>
            </div>
        )
    }
}

There are two ways to pass data to a render() method using the React API
1. Props
2. State

Lets create a TODO List component :

import React from 'react';
import TodoItem from './TodoItem';

export default class Todolist extends React.Component
{
    render() {

        let todoItemsData = [
            {
                id: 1,
                title: 'Learn Javascript',
                desc: 'Lorem ipsum description 1',
                priority:'high',
                date: 'Jun 1, 2012'
            },
            {
                id: 2,
                title: 'Learn React',
                desc: 'Lorem ipsum description 2',
                priority:'medium',
                date: 'Jul 1, 2015'
            },
            {
                id: 3,
                title: 'Build a React App',
                desc: 'Lorem ipsum description 3',
                priority:'low',
                date: 'Jun 1, 2011'
            }
        ];

        return (
<div class="container page-todo bootstrap snippets bootdeys">
<div class="col-sm-7 tasks">
    <div class="task-list">
        <h1>TODO List</h1>

        {todoItemsData.map(item => (
                <TodoItem key={item.id}  data={item} />
            ))}
 
        <div class="clearfix"></div>        
    </div>      
</div>
</div>
        )
    }
}

import React from 'react';

export default class Todolist extends React.Component
{
    constructor(props)
    {
        super(props);
        console.log(props.data);
       
    }

    render() {
        let priorityClasses = ['priority task', this.props.data.priority].join(' ');

        return (
            <div class={priorityClasses}>
                  <div class="checkbox">
                    <input type="checkbox" />
                 </div>
            <div class="desc">
                <div class="title">{this.props.data.title}</div>
                <div>{this.props.data.desc}</div>
            </div>
            <div class="time">
                <div class="date">{this.props.data.date}</div>
            </div>
        </div>
        )
    }
}


Now use this component :
import logo from './logo.svg';
import './App.css';
import Todolist from './Todolist';


function App() {
  return (
    <div className="App">
<Todolist />
    </div>
  );
}

export default App;


CSS used in App.css

body{
  margin-top:10px;
  background:#eee;
  }
 
  .page-todo .tasks {
      background: #fff;
      padding: 0;
      border-right: 1px solid #d1d4d7;
      margin: -30px 15px -30px -15px
  }
 
  .page-todo .task-list {
      padding: 30px 15px;
      height: 100%
  }
 
  .page-todo .graph {
      height: 100%
  }
 
  .page-todo .priority.high {
      background: #fffdfd;
      margin-bottom: 1px
  }
 
  .page-todo .priority.high span {
      background: #f86c6b;
      padding: 2px 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px
  }
 
  .page-todo .priority.medium {
      background: #fff0ab;
      margin-bottom: 1px
  }
 
  .page-todo .priority.medium span {
      background: #f8cb00;
      padding: 2px 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px
  }
 
  .page-todo .priority.low {
      background: #cfedda;
      margin-bottom: 1px
  }
 
  .page-todo .priority.low span {
      background: #4dbd74;
      padding: 2px 10px;
      color: #fff;
      display: inline-block;
      font-size: 12px
  }
 
  .page-todo .task {
      border-bottom: 1px solid #e4e5e6;
      margin-bottom: 1px;
      position: relative
  }
 
  .page-todo .task .desc {
      display: inline-block;
      width: 75%;
      padding: 10px 10px;
      font-size: 12px
  }
 
  .page-todo .task .desc .title {
      font-size: 18px;
      margin-bottom: 5px
  }
 
  .page-todo .task .time {
      display: inline-block;
      width: 15%;
      padding: 10px 10px 10px 0;
      font-size: 12px;
      text-align: right;
      position: absolute;
      top: 0;
      right: 0
  }
 
  .page-todo .task .time .date {
      font-size: 18px;
      margin-bottom: 5px
  }
 
  .page-todo .task.last {
      border-bottom: 1px solid transparent
  }
 
  .page-todo .task.high {
      border-left: 2px solid #f86c6b
  }
 
  .page-todo .task.medium {
      border-left: 2px solid #f8cb00
  }
 
  .page-todo .task.low {
      border-left: 2px solid #4dbd74
  }
 
  .page-todo .timeline {
      width: auto;
      height: 100%;
      margin: 20px auto;
      position: relative
  }
 
  .page-todo .timeline:before {
      position: absolute;
      content: '';
      height: 100%;
      width: 4px;
      background: #d1d4d7;
      left: 50%;
      margin-left: -2px
  }
 
  .page-todo .timeslot {
      display: inline-block;
      position: relative;
      width: 100%;
      margin: 5px 0
  }
 
  .page-todo .timeslot .task {
      position: relative;
      width: 44%;
      display: block;
      border: none;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box
  }
 
  .page-todo .timeslot .task span {
      border: 2px solid #63c2de;
      background: #e1f3f9;
      padding: 5px;
      display: block;
      font-size: 11px
  }
 
  .page-todo .timeslot .task span span.details {
      font-size: 16px;
      margin-bottom: 10px
  }
 
  .page-todo .timeslot .task span span.remaining {
      font-size: 14px
  }
 
  .page-todo .timeslot .task span span {
      border: 0;
      background: 0 0;
      padding: 0
  }
 
  .page-todo .timeslot .task .arrow {
      position: absolute;
      top: 6px;
      right: 0;
      height: 20px;
      width: 20px;
      border-left: 12px solid #63c2de;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      margin-right: -18px
  }
 
  .page-todo .timeslot .task .arrow:after {
      position: absolute;
      content: '';
      top: -12px;
      right: 3px;
      height: 20px;
      width: 20px;
      border-left: 12px solid #e1f3f9;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent
  }
 
  .page-todo .timeslot .icon {
      position: absolute;
      border: 2px solid #d1d4d7;
      background: #2a2c36;
      -webkit-border-radius: 50em;
      -moz-border-radius: 50em;
      border-radius: 50em;
      height: 30px;
      width: 30px;
      top: 0;
      left: 50%;
      margin-left: -17px;
      color: #fff;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      text-shadow: none;
      z-index: 2;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box
  }
 
  .page-todo .timeslot .time {
      background: #d1d4d7;
      position: absolute;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      top: 1px;
      left: 50%;
      padding: 5px 10px 5px 40px;
      z-index: 1;
      margin-top: 1px
  }
 
  .page-todo .timeslot.alt .task {
      margin-left: 56%;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box
  }
 
  .page-todo .timeslot.alt .task .arrow {
      position: absolute;
      top: 6px;
      left: 0;
      height: 20px;
      width: 20px;
      border-left: none;
      border-right: 12px solid #63c2de;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      margin-left: -18px
  }
 
  .page-todo .timeslot.alt .task .arrow:after {
      top: -12px;
      left: 3px;
      height: 20px;
      width: 20px;
      border-left: none;
      border-right: 12px solid #e1f3f9;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent
  }
 
  .page-todo .timeslot.alt .time {
      top: 1px;
      left: auto;
      right: 50%;
      padding: 5px 40px 5px 10px
  }
 
  @media only screen and (min-width:992px) and (max-width:1199px) {
      .page-todo task .desc {
          display: inline-block;
          width: 70%;
          padding: 10px 10px;
          font-size: 12px
      }
      .page-todo task .desc .title {
          font-size: 16px;
          margin-bottom: 5px
      }
      .page-todo task .time {
          display: inline-block;
          float: right;
          width: 20%;
          padding: 10px 10px;
          font-size: 12px;
          text-align: right
      }
      .page-todo task .time .date {
          font-size: 16px;
          margin-bottom: 5px
      }
  }
 
  @media only screen and (min-width:768px) and (max-width:991px) {
      .page-todo .task {
          margin-bottom: 1px
      }
      .page-todo .task .desc {
          display: inline-block;
          width: 65%;
          padding: 10px 10px;
          font-size: 10px;
          margin-right: -20px
      }
      .page-todo .task .desc .title {
          font-size: 14px;
          margin-bottom: 5px
      }
      .page-todo .task .time {
          display: inline-block;
          float: right;
          width: 25%;
          padding: 10px 10px;
          font-size: 10px;
          text-align: right
      }
      .page-todo .task .time .date {
          font-size: 14px;
          margin-bottom: 5px
      }
      .page-todo .timeslot .task span {
          padding: 5px;
          display: block;
          font-size: 10px
      }
      .page-todo .timeslot .task span span {
          border: 0;
          background: 0 0;
          padding: 0
      }
      .page-todo .timeslot .task span span.details {
          font-size: 14px;
          margin-bottom: 0
      }
      .page-todo .timeslot .task span span.remaining {
          font-size: 12px
      }
  }
 
  @media only screen and (max-width:767px) {
      .page-todo .tasks {
          position: relative;
          margin: 0!important
      }
      .page-todo .graph {
          position: relative;
          margin: 0!important
      }
      .page-todo .task {
          margin-bottom: 1px
      }
      .page-todo .task .desc {
          display: inline-block;
          width: 65%;
          padding: 10px 10px;
          font-size: 10px;
          margin-right: -20px
      }
      .page-todo .task .desc .title {
          font-size: 14px;
          margin-bottom: 5px
      }
      .page-todo .task .time {
          display: inline-block;
          float: right;
          width: 25%;
          padding: 10px 10px;
          font-size: 10px;
          text-align: right
      }
      .page-todo .task .time .date {
          font-size: 14px;
          margin-bottom: 5px
      }
      .page-todo .timeslot .task span {
          padding: 5px;
          display: block;
          font-size: 10px
      }
      .page-todo .timeslot .task span span {
          border: 0;
          background: 0 0;
          padding: 0
      }
      .page-todo .timeslot .task span span.details {
          font-size: 14px;
          margin-bottom: 0
      }
      .page-todo .timeslot .task span span.remaining {
          font-size: 12px
      }
  }


          
What is Flux?

Flux is an architectural  design of Facebook application. It is certainly not MVC. 
Flux is essential to React because it helps to promote the use of React components in the way they are intended. 
Flux does this by creating a one-directional data flow. Data flows through three main portions of the Flux architecture: 

Dispatcher, 
Stores, 
and React views 

Target UI:



Posted by at No comments:
Subscribe to: Posts (Atom)