DEV Community: Nestor Solalinde

GITHUB CHEAT SHEET

Nestor Solalinde — Mon, 13 Dec 2021 12:41:20 +0000

GITHUB CHEAT SHEET

STARTING A PROJECT

Forked projects or existing projects

cd ~/GITHUB/manolosolalinde
git clone <url>
git config credential.helper store

Create remote repository

cd ~/GITHUB/manolosolalinde
mkdir <reponame>
# deprecated: curl -u 'manolosolalinde@gmail.com' -d '{"name":"'"${PWD##*/}"'"}' https://api.github.com/user/repos
# token from https://github.com/settings/tokens
curl -i -H "Authorization: token <GET FROM https://github.com/settings/tokens> " \
    -d '{
        "name": "'"${PWD##*/}"'", 
        "description": "This is your first repository",
        "homepage": "https://github.com",
        "private": true,
        "has_issues": true,
        "has_projects": true,
        "has_wiki": true
        }' \
    https://api.github.com/user/repos
echo "# TODO Readme" >> README.md

Start Local Repository and push first commit

git init
git config credential.helper store
git add .
git commit -m "first commit"
git remote add origin https://github.com/manolosolalinde/${PWD##*/}.git
git push -u origin master

Change local repository:

git remote show origin
git remote set-url origin https://github.com/manolosolalinde/${PWD##*/}.git

DELETING ALL HISTORY

cd <localrepofolder>
rm -rf .git
Start Repository (as above)
git push -u --force origin master

DELETING A FULL REMOTE REPO

cd <REPONAME>
curl -X DELETE -H 'Authorization: token replacewithtoken' https://api.github.com/repos/manolosolalinde/${PWD##*/}

Get Delete Auth token
https://developer.github.com/v3/oauth_authorizations/#create-a-new-authorization

curl -v -u 'manolosolalinde@gmail.com' -X POST https://api.github.com/authorizations -d '{"scopes":["delete_repo"], "note":"token with delete repo scope"}' >> token.json

INITIAL GLOBAL SETUP

git config --global user.name "Manuel Solalinde"
git config --global user.email "manolosolalinde@gmail.com"

UNTRACK FILES already added to git repository based on .gitignore

git rm -r --cached .
git add .
git commit -m ".gitignore fix"

rm is the remove command
-r will allow recursive removal
--cached will only remove files from the index. Your files will still be there.
The . indicates that all files will be untracked. 
You can untrack a specific file with git rm --cached foo.txt (thanks @amadeann).

GENERAL PURPOSE

http://www.cheat-sheets.org/saved-copy/github-git-cheat-sheet.pdf

git config --global user.name "Manuel Solalinde"\
Sets the name you want atached to your commit transactions

git remote add origin git@github.com:manolosolalinde/newrepo.git\
Add origin for existing repository

git config --global user.email "manolosolalinde@gmail.com"\
Sets the email you want atached to your commit transaction

git init [project-name]\
Creates a new local repository with the specified name

git clone [url]\
Downloads a project and its entire version history

git status\
Lists all new or modified files to be commited

git add [file]\
Snapshots the file in preparation for versioning

git reset [file]\
Unstages the file, but preserve its contents

git diff\
Shows file differences not yet staged

git diff --staged\
Shows file differences between staging and the last file version

git commit -m "[descriptive message]"\
Records file snapshots permanently in version history

git branch\
Lists all local branches in the current repository

git branch [branch-name]\
Creates a new branch

git checkout [branch-name]\
Switches to the specified branch and updates the working directory

git merge [branch]\
Combines the specified branch’s history into the current branch

git branch -d [branch-name]\
Deletes the specified branch

Working with multiple versions of a project

Interesting post: https://stackoverflow.com/questions/12153405/how-to-manage-multiple-versions-of-a-project

Example

In my case, I have two version of the same software that the basics are the same but each version has some different features.

So I create two worktree that means, create two relevant long-running branches beside the master.

    $git worktree add -b version-silver ..\version-silver master
    $git worktree add -b version-gold ..\version-gold master

Then I have:

    $git branch
    master  # base stuff here
    version-silver # some normal features
    version-gold # some better features

There is one repository, but I have 3 separate folders beside each other for each branch above. And make the common changes in master. then merge it with both other versions.

    cd master
    vim basic.cpp
    git add .
    git commit -m "my common edit on basic.cpp"
    cd ..\version-silver
    vim silver.cpp
    git add .
    git commit -m "my specific edit on silver.cpp"
    git merge master # here i get the basic.cpp latest changes for silver project
    cd ..\version-gold
    git merge master # here i get the basic.cpp latest changes for gold project

Copy changes of `only last commit` from branch A to branch B

Stackoverflow - Commit to multiple branches at the same time

git checkout A
git commit -m "Fixed the bug x"
git checkout B
git cherry-pick A

Problems

Problems with vscode and credentials

https://stackoverflow.com/questions/34400272/visual-studio-code-always-asking-for-git-credentials

You should be able to set your credentials like this:

git remote set-url origin https://<USERNAME>:<PASSWORD>@bitbucket.org/path/to/repo.git

You can get the remote url like this:

git config --get remote.origin.url

My problem was solved with:

cd "C:\Program Files\Git\mingw64\libexec\git-core"
git-credential-manager.exe uninstall

React Native Tutorial by The Net Ninja - Notes

Nestor Solalinde — Thu, 08 Apr 2021 16:08:31 +0000

Youtube Link: https://www.youtube.com/watch?v=ur6I5m2nTvk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ

Repo: https://github.com/iamshaunjp/react-native-tutorial

Documentation: https://reactnative.dev/docs/getting-started

Local folder: E:\NMS\CURSOS\REACT-NATIVE-NINJA\react-native-tutorial

components lib: https://reactnativeelements.com/docs/header

Initial commands – Configuration

Android studio installation: Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows

Expo documentation: https://docs.expo.io/

npm install --global expo-cli
expo init myproject
npm start

Full examples:

Todo App: https://github.com/manolosolalinde/react-native-tutorial/tree/lesson-15

The reviews App: https://github.com/manolosolalinde/react-native-tutorial/tree/lesson-35

Tutorial structure:

lesson-2 to lesson-8: setup and basics

lesson-9 to lesson-15: Todo App

React Native Tutorial #10 – Todo App (part 2)

React Native Tutorial #11 – Todo App (part 3)

React Native Tutorial #12 – Alerts

React Native Tutorial #13 – Dismissing the Keyboard

React Native Tutorial #14 – Flexbox Basics

React Native Tutorial #15 – Icons & More Flexbox

lesson-16 to lesson-35: The reviews App

Views, text and styles

Note: React native does not use css. It emulates the idea of css.

Note: Styles are not automatically inherited.

In general views are used instead of div.

Due to the lack of DOM, React Native doesn’t use tags like: div, section, span, input, etc. But don’t worry, almost every HTML tag has an equivalent React Native component, so we are able to use the same mindset of the web to develop with React Native components View, Text, TextInput, etc.

Examples

ScrollView, Button, TextInput:

<ScrollView> 
    <Button title='update state' onPress={clickHandler}/>
    <TextInput
            multiline
            keyboardType='numeric' 
            placeholder='e.g. John Doe'
            onChangeText={()=>setName()}
            style={styles.input}/>
<ScrollView/>

Flatlist, touchable component:

    <View style={styles.container}>
      <FlatList 
        numColumns={2}
        keyExtractor={(item) => item.id} 
        data={people} 
        renderItem={({ item }) => ( 
        <TouchableOpacity onPress={()=>pressHandler(item.id)}>
          <Text style={styles.item}>{item.name}</Text>
        </TouchableOpacity>
        )}
      />
    </View>

Alert:

// jsx
      Alert.alert('OOPS', 'Todo must be over 3 characters long', [
        {text: 'Understood', onPress: () => console.log('alert closed') }
      ]);

Keyboard dismiss:

    <TouchableWithoutFeedback onPress={() => {
      Keyboard.dismiss();
      console.log('dismissed');
    }}>
      <View style={styles.container}>
        <Header />
        <View style={styles.content}>
          <AddTodo submitHandler={submitHandler} />
          <View style={styles.list}>
            <FlatList
              data={todos}
              renderItem={({ item }) => (
                <TodoItem item={item} pressHandler={pressHandler} />
              )}
            />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>

Flexbox:

export default function Sandbox() {
  return (
    <View style={styles.container}>
      <Text style={styles.boxOne}>one</Text>
      <Text style={styles.boxTwo}>two</Text>
      <Text style={styles.boxThree}>three</Text>
      <Text style={styles.boxFour}>four</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 40,
    backgroundColor: '#ddd',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: '100%',
  },
  boxOne: {
    flex: 1,
    backgroundColor: 'violet',
    padding: 10,
  },
  boxTwo: {
    flex: 2,
    backgroundColor: 'gold',
    padding: 10,
    alignSelf: 'flex-end',
  },
  boxThree: {
    flex: 1,
    backgroundColor: 'coral',
    padding: 10,
  },
  boxFour: {
    flex: 3,
    backgroundColor: 'skyblue',
    padding: 10,
    alignSelf: 'flex-start',
  }
});

Icons:

https://docs.expo.io/guides/icons/

import { MaterialIcons } from '@expo/vector-icons';
export default function TodoItem({ pressHandler, item }) {
  return (
    <TouchableOpacity onPress={() => pressHandler(item.key)}>
      <View style={styles.item}>
        <MaterialIcons name='delete' size={18} color='#333' />
        <Text style={styles.itemText}>{item.text}</Text>
      </View>
    </TouchableOpacity>
  )
}

Fonts:

– Documentation: https://docs.expo.io/guides/using-custom-fonts/?redirected

– Installation:

expo install expo-font @expo-google-fonts/nunito
npm install expo-app-loading

Example:

import React from 'react';
import AppLoading from 'expo-app-loading';
import Home from './screens/home';
import { useFonts, Nunito_400Regular, Nunito_700Bold } from '@expo-google-fonts/nunito';

export default function App() {
    let [fontsLoaded] = useFonts({
        Nunito_400Regular,
        Nunito_700Bold,
    });
    if (!fontsLoaded) {
        return <AppLoading />;
    }  
    else {
        return <Home />;
    }
}

lesson-18 – Global Styles:

Just create a file in styles -> global.js and create and do:

(nothing weird)

import { StyleSheet } from 'react-native';
export const globalStyles = StyleSheet.create({
  titleText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  paragraph: {
    marginVertical: 8,
    lineHeight: 20,
  },
  container: {
    flex: 1,
    padding: 20,
  },
});

lesson-19 – React Navigation Configuration

# install react-navigation 5.0
npm install @react-navigation/native
npm install @react-navigation/stack
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install react-navigation-stack

lesson-20 – Stack Navigator

Installs for react navigator 5.0x:

routes/homeStack.js:

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetails";

const { Navigator, Screen } = createStackNavigator();

const HomeNavigator = () => (
  <Navigator headerMode="none">
 {/* //other options: "float", "screen" */}
    <Screen name="Details" component={ReviewDetails} />
    <Screen name="Home" component={Home} />
  </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <HomeNavigator />
  </NavigationContainer>
);

And bind it into the App.js root component:

...
import { AppNavigator } from "./routes/HomeStack";
...
if (fontsLoaded) {
    return <AppNavigator />;
  } else {
   ...
  }

lesson-21 – Example navigation:

export default function Home({ navigation }) {

  const pressHandler = () => {
    navigation.navigate('ReviewDetails');
    // navigation.goBack();
    // navigation.push('ReviewDetails'); 
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
      <Button title='to review details screen' onPress={pressHandler} />
    </View>
  );
}

React Native Tutorial #22 – Passing Data Between Screens

Navigation documentation: https://reactnavigation.org/docs/params

React Native Tutorial #23 – Navigation Options

https://reactnavigation.org/docs/headers#sharing-common-options-across-screens

React Native Tutorial #24 – Drawer Navigation

npm install @react-navigation/drawer

./routes/drawer.js

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import { HomeNavigator } from './homeStack'
import { AboutNavigator } from './aboutStack';

const Drawer = createDrawerNavigator();

export const AppDrawer = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator headerMode="screen" initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeNavigator} />
        <Drawer.Screen name="About" component={AboutNavigator} />
      </Drawer.Navigator>
    </NavigationContainer> 
  );
}

React Native Tutorial #30 – Formik Forms (part 1)

npm install formik

Formik Example:

import React from 'react';
import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
import { globalStyles } from '../styles/global.js';
import { Formik } from 'formik';
import * as yup from 'yup';
import FlatButton from '../shared/button.js';

const reviewSchema = yup.object({
  title: yup.string()
    .required()
    .min(4),
  body: yup.string()
    .required()
    .min(8),
  rating: yup.string()
    .required()
    .test('is-num-1-5', 'Rating must be a number 1 - 5', (val) => {
      return parseInt(val) < 6 && parseInt(val) > 0;
    }),
});

export default function ReviewForm({ addReview }) {

  return (

    <View style={globalStyles.container}>
      <Formik
        initialValues={{ title: '', body: '', rating: '' }}
        validationSchema={reviewSchema}
        onSubmit={(values, actions) => {
          actions.resetForm(); 
          addReview(values);
        }}
      >
        {props => (
          <View>
            <TextInput
              style={globalStyles.input}
              placeholder='Review title'
              onChangeText={props.handleChange('title')}
              onBlur={props.handleBlur('title')} 
              value={props.values.title}
            />
            {/* only if the left value is a valid string, will the right value be displayed */}
            <Text style={globalStyles.errorText}>{props.touched.title && props.errors.title}</Text>
            <FlatButton onPress={props.handleSubmit} text='submit' />
          </View>
        )}
      </Formik>
    </View>
  );
}

Javascript Unit Testing – Jest - Course Notes

Nestor Solalinde — Mon, 17 Aug 2020 23:04:28 +0000

Jest Traversy Tutorial

Local folder:
E:\NMS\CURSOS\SMALL-TUTORIALS\jest-tutorial-traversy

Youtube tutorial link:
https://www.youtube.com/watch?v=7r4xVDI2vho

Github link of tutorial:
https://github.com/bradtraversy/jest_testing_basics

Installation

npm init -y
npm i -D jest
# for systax highlighting in vscode (type adquisition)
# https://stackoverflow.com/questions/42024526/vscode-automatic-type-acquisition-for-jest
npm install -D @types/jest

In package.json

  "scripts": {
    "test": "jest"
  },

How to run tests

npm test

Example functions.test.js

const functions = require('./functions');

// to run functions before of after
// beforeEach(() => initDatabase());
// afterEach(() => closeDatabase());
// beforeAll(() => initDatabase());
// afterAll(() => closeDatabase());

//toBe
test('Adds 2 + 2 = 4', ()=> {
    expect(functions.add(2,2)).toBe(4);
});

//to not.toBe
test('Adds 2 + 2 not equal to 5', ()=> {
    expect(functions.add(2,2)).not.toBe(5);
});

// toBeFalsy
test('is 0 falsy?', ()=> {
    expect(0).toBeFalsy();
}); //Answer is yes

// toEqual
test('User should be Brad Traversy object', () => {
    expect(functions.createUser()).toEqual({
      firstName: 'Brad',
      lastName: 'Traversy'
    });
  });

// Async Await
test('User fetched name should be Leanne Graham', async () => {
    // expect.assertions(1);
    const data = await functions.fetchUser();
    expect(data.name).toEqual('Leanne Graham');
  });

// CHECK FOR TRUTHY & FALSY VALUES
// toBeEqual
// toBeNull matches only null
// toBeUndefined matches only undefined
// toBeDefined is the opposite of toBeUndefined
// toBeTruthy matches anything that an if statement treats as true
// toBeFalsy matches anything that an if statement treats as false

Example functions.js

const axios = require('axios');

const functions = {
  add: (num1, num2) => num1 + num2,
  isNull: () => null,
  checkValue: x => x,
  createUser: () => {
    const user = { firstName: 'Brad' };
    user['lastName'] = 'Traversy';
    return user;
  },
  fetchUser: () =>
    axios
      .get('https://jsonplaceholder.typicode.com/users/1')
      .then(res => res.data)
      .catch(err => 'error')
};

module.exports = functions;

Mocks and async functions

In order of getting testing results that are independent of the API's we use, we can use mocks.

For that, we can create a __mocks__ folder that we can call using jest.mock('./mymodule').

An entire module is substituted. When using global package such as axios. You dont need to call jest.mock('axios'), it is done automatically if you place the axios.js file in the __mocks__ folder.

__mocks__/async.js:

const fetchUser = () => {
  console.log("Using mock function for fetchData")
    return Promise.resolve({name:"Leanne Graham"});
  }
exports.fetchUser = fetchUser;

async.js

const axios = require('axios');

const fetchUser = () =>{
  console.log('Fetching data with axios...')
    return axios
      .get('https://jsonplaceholder.typicode.com/users/1')
      .then(res => res.data)
      .catch(err => 'error')
    }
exports.fetchUser = fetchUser;

async.test.js

jest.mock('./async')
const {fetchUser} = require('./async');

// Async Await using mock
test('User fetched name should be Leanne Graham', async () => {
  const data = await fetchUser();
    expect(data.name).toEqual('Leanne Graham');
  });

More code in: https://github.com/academind/js-testing-introduction/tree/async-code

Firebase Functions Unit Testing with Jest

Youtube video:
https://www.youtube.com/watch?v=8IoCPZJ-zwA

Github example:
https://github.com/ssagga/firebase-emulators-testing-with-jest/tree/master/functions

Documentation:
https://firebase.google.com/docs/rules/unit-tests

Local example:
E:\NMS\PROGRAMACION_NMS\CENTRALHUB\CH_SCRAPER\APPSEARCH_FIRESTORE_FUNCTIONS\functions

Example Folder Structure:

myapp
├── node_modules
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│ ├── node_modules
│ ├── index.js
│ ├── jest.config.js
│ ├── jsconfig.json
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── tests
│ │ │ └── mymodule.test.js
│ │ ├── change_appsearch.js
│ │ ├── change_firestore.js
│ │ ├── testCollectionTriggers.js
│ │ └── testing.js
│ └── ui-debug.log
├── package-lock.json
├── package.json
└── ui-debug.log

To run:

#in one terminal
firebase emulators:start
#in a different terminal
cd functions
jest

functions/jest.config.js

module.exports = {
    testRegex: 'src(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
    testPathIgnorePatterns: ['lib/', 'node_modules/'],
    moduleFileExtensions: ['js','ts','tsx','jsx','json','node'],
    testEnvironment: 'node',
    rootDir: 'src'
}

functions/jsconfig.json

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

To run tests sequentially instead of in parallel use jest --runInBand. It is necessary when running firestore test to prevent one test to influence the other.
functions/package.json

  "scripts": {
    ...
    "test": "jest '\\__tests__\\.*.test.js' --runInBand"
  },

functions/src/__tests__/mymodule.test.js

const firebase = require('@firebase/testing')
const admin = require('firebase-admin')

test('Should be 1', ()=> {
    expect(1).toBe(1);
})

const projectId = "rich-meridian-274818"
process.env.GCLOUD_PROJECT = projectId
process.env.FIRESTORE_EMULATOR_HOST = "localhost:8080";
let app = admin.initializeApp({projectId})
let db = firebase.firestore(app)

beforeAll(async ()=>{
    await firebase.clearFirestoreData({projectId});
})

// When Document written to '/TestCollection/{DocumentId}' , trigger function to copy it to '/Copies/{DocumentId}
test("Expect to find a copy in 'Copies' Collection", async ()=>{
    const testDoc = {
        name: 'Samer',
        age: 21,
        city: 'Riyadh'
    }
    const ref = db.collection('TestCollection').doc()
    await ref.set(testDoc)
    const copyId = ref.id
    const copyRef = db.collection('Copies').doc(copyId)
    await new Promise((r)=>setTimeout(r, 3000))
    const copyDoc = await copyRef.get()
    expect(copyDoc.data()).toStrictEqual(testDoc)
})

onCreate function:

const functions = require('firebase-functions');
const admin = require("firebase-admin")

// admin.initializeApp(); //initialized in index.js
const db = admin.firestore()

exports.onCreate = functions.firestore.document('TestCollection/{docId}').onCreate(async (snapshot)=>{
    const data = snapshot.data()
    const docId = snapshot.id
    const copyRef = db.collection('Copies').doc(docId)
    await copyRef.set(data)
})

DEV Community: Nestor Solalinde

GITHUB CHEAT SHEET

GITHUB CHEAT SHEET

STARTING A PROJECT

DELETING ALL HISTORY

DELETING A FULL REMOTE REPO

INITIAL GLOBAL SETUP

UNTRACK FILES already added to git repository based on .gitignore

GENERAL PURPOSE

Tags

Working with multiple versions of a project

Example

Copy changes of only last commit from branch A to branch B

Problems

Problems with vscode and credentials

React Native Tutorial by The Net Ninja - Notes

Initial commands – Configuration

Full examples:

Tutorial structure:

Views, text and styles

Examples

Javascript Unit Testing – Jest - Course Notes

Jest Traversy Tutorial

Installation

How to run tests

Mocks and async functions

Firebase Functions Unit Testing with Jest

Copy changes of `only last commit` from branch A to branch B