DEV Community: tuantvk

Building a Dynamic Job Board with Issues Github, Next.js, Tailwind CSS and MobX-State-Tree

tuantvk — Thu, 28 Mar 2024 11:22:30 +0000

In this tutorial, we will cover the development of the core components of a job board step-by-step, using Next.js, Tailwind CSS and MobX-State-Tree for the frontend and Issues Github as job data. Below is a list of what this tutorial covers.

How It Works?
Prerequisites
Creating a Next.js Project
Data Fetching
Parse Front Matter
Render UI
Conclusion

Visit website at https://wwwhat-dev.vercel.app/ or my github repo https://github.com/tuantvk/wwwhat.dev

How It Works?

When a Github user creates a new issue on Github, the website will call Github's api to get the issues in open state and exclude issues that have the label bug.

https://api.github.com/search/issues?q=is:issue repo:tuantvk/wwwhat.dev state:open -label:bug

Once all issues are retrieved, they will be displayed on the website. The displayed content will be based on the markup information as shown in the file below.

---
company: GitHub
logoCompany: https://user-images.githubusercontent.com/logo.png
shortDescription: GitHub is where over 100 million developers...
location: San Francisco, CA, United States
salary: $100K – $110K/yr
technologies: Java, JavaScript, Kotlin, Kubernetes, MongoDB, Node.js, PostgreSQL, Python
isRemoteJob: true
---

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Prerequisites

To get the most out of this article, you need to have the following:

Familiarity with TypeScript, React and Next.js
Basic knowledge of Tailwind CSS and MobX-State-Tree

Creating a Next.js Project

To create our Next.js app, we navigate to our preferred directory and run the terminal command below:

npx create-next-app@latest <app-name>

On installation, choose the following:

Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes 
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias?  Yes
What import alias would you like configured? @/*

After running the script, move to the created directory and start the Next.js server:

yarn dev
# or
pnpm dev
# or
bun dev

You should have your app running at http://localhost:3000

Installing the required dependencies

# UI
yarn add axios dayjs react-infinite-scroller react-modal

# Markdown
yarn add front-matter react-markdown

# State management
yarn add mobx mobx-react-lite mobx-state-tree

Data Fetching

When we call endpoint https://api.github.com/search/issues, data response is so many key, but I limited like model below:

app/models/Issues.ts

// Minified
// Issues Model
import { Instance, types } from "mobx-state-tree"

export const ItemModel = types.model("ItemModel").props({
  node_id: types.identifier,
  id: types.number,
  title: types.string,
  html_url: types.string,
  body: types.string,
  created_at: types.string,
  labels: types.optional(types.array(LabelModel), []),
})

export const IssuesModel = types.model("IssuesModel").props({
  total_count: types.number,
  incomplete_results: types.boolean,
  items: types.array(ItemModel),
})

View more REST API endpoints for issues.

In file IssuesStore, we call endpoint and set data response to state.

// Minified
// Issues Store
import axios from "axios"
import { types, flow } from "mobx-state-tree"
import { API_GITHUB_SEARCH_ISSUES } from "@/constants/github"
import { IssuesModel } from "./Issues"

export const IssuesStoreModel = types
  .model("IssuesStore")
  .props({
    issues: types.maybeNull(IssuesModel),
  })
  .actions((self) => ({
    fetchIssues: flow(function* fetchIssues(params = "") {
      try {
        const response = yield axios.get(
          `${API_GITHUB_SEARCH_ISSUES} ${params}`,
        )
        self.issues = response.data
      } catch { }
    }),
    afterCreate() {
      this.fetchIssues()
    },
  }))

Parse Front Matter

Because body items are markdown content, we need to parse key/value from header content from markup information above.

import parseFrontMatter from "front-matter"

const {
  company,
  logoCompany,
  shortDescription,
  location,
  salary,
  technologies,
  isRemoteJob,
} = parseFrontMatter(item.body)?.attributes || {}

Render UI

Skip some components in my github repo, we get data from mobx and render CardIssue with map function.

// Minified
// page.tsx
const Home = () => {
  const { issues } = useIssuesStore()

  return (
    <InfiniteScroll>
      {issues.items.map((item) => (
        <CardIssue key={item.node_id} item={item} />
      ))}
    </InfiniteScroll>
  )
}

// CardIssue.tsx
"use client"
import Image from "next/image"
import Link from "next/link"
import { observer } from "mobx-react-lite"
import Markdown from "react-markdown"
import parseFrontMatter from "front-matter"
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import { IItem } from "@/models/Issues"
import { useIssuesStore } from "@/models/IssuesStore"
import { IFrontMatter } from "@/definitions"
import { EASY_APPLY_LABEL } from "@/constants/labels"
import {
  IconBookmark,
  IconLocation,
  IconClock,
  IconZap,
  IconDollar,
  IconRemote,
} from "@/icons"

dayjs.extend(relativeTime)

interface Props {
  item: IItem
  onSeach: (tech: string) => void
}

export const CardIssue = observer(({ item, onSeach }: Props) => {
  const { bookmarks, toggleBookmark } = useIssuesStore()

  const isBookmark = bookmarks?.has(item.node_id)
  const isEasyApply = !!item?.labels?.find(
    (label) => label.name === EASY_APPLY_LABEL,
  )
  const createdAt = dayjs(item.created_at).fromNow(true)
  const {
    company,
    logoCompany,
    shortDescription,
    location,
    salary,
    technologies,
    isRemoteJob,
  } = parseFrontMatter<IFrontMatter>(item.body)?.attributes || {}

  return (
    <article
      key={item.id}
      title={item.title}
      className="relative cursor-pointer pb-3 px-3 pt-[22px] rounded-xl bg-white border-2 border-[#D9D9D9] hover:border-black shadow-[2px_2px_0px_#D9D9D9] hover:shadow-[4px_4px_0px_#FFCC00] ease-in-out duration-300"
    >
      <Link href={item.html_url} target="_blank">
        <Image
          src={logoCompany || "/apple-touch-icon.png"}
          alt="avatar"
          width={44}
          height={44}
          className="w-11 h-11 object-contain rounded absolute -top-[23px] left-0 right-0 mx-auto border-2 border-black shadow-[2px_2px_0px_#FFCC00]"
        />
        <h1 className="mt-1 font-heading text-base text-xl font-bold text-slate-700 hn-break-words truncate">
          {item.title}
        </h1>
        <div className="flex flex-row items-center">
          <span className="text-base font-medium text-slate-500 hn-break-words line-clamp-1">
            {company}
          </span>
          {isEasyApply && (
            <div className="flex flex-row items-center ml-5">
              <IconZap width={12} height={12} />
              <span className="text-xs ml-1 text-emerald-400">
                {EASY_APPLY_LABEL}
              </span>
            </div>
          )}
          {Boolean(isRemoteJob) && (
            <div className="flex flex-row items-center ml-5">
              <IconRemote width={14} height={14} />
              <span className="text-xs ml-1 text-violet-600">Remote job</span>
            </div>
          )}
        </div>
        <div className="mt-2">
          {shortDescription?.trim()?.length ? (
            <div className="text-sm text-slate-500 line-clamp-5">
              {shortDescription}
            </div>
          ) : (
            <Markdown
              skipHtml
              allowedElements={["p"]}
              className="text-sm text-slate-500 line-clamp-4"
            >
              {item.body}
            </Markdown>
          )}
        </div>
        <div className="flex flex-row mt-3 items-center justify-between">
          <div className="flex flex-row items-center">
            <IconDollar width={18} height={18} />
            <p className="ml-1 text-sm text-slate-700">{salary || "?"}</p>
          </div>
          <div className="flex flex-row items-center">
            <IconLocation width={18} height={18} fill="#94a3b8" />
            <p className="ml-1 text-sm text-slate-700">{location || "?"}</p>
          </div>
          <div className="flex flex-row items-center">
            <IconClock width={18} height={18} />
            <p className="ml-1 text-sm text-slate-700">{createdAt}</p>
          </div>
        </div>
      </Link>
      <div className="grid grid-cols-6 gap-2 mt-3">
        <div className="flex flex-row flex-wrap col-span-5 gap-2">
          {technologies
            ?.split(",")
            ?.slice(0, 6)
            ?.map((tech) => (
              <div
                key={tech}
                className="rounded bg-slate-100 px-2 py-1 text-xs text-slate-700 hover:bg-slate-200 ease-in-out duration-300"
                onClick={() => onSeach(tech?.trim())}
              >
                {tech?.trim()}
              </div>
            ))}
        </div>
        <div className="flex items-end justify-end">
          <IconBookmark
            width={22}
            height={22}
            fill={isBookmark ? "#ffcc00" : "#94a3b8"}
            className="hover:scale-125 ease-in-out duration-300"
            onClick={() => toggleBookmark(item)}
          />
        </div>
      </div>
    </article>
  )
})

Conclusion

With this, we created a job board using Next.js, Tailwind CSS and MobX-State-Tree and Issues Github as job data. I hope you’ve enjoyed this tutorial and are looking forward to building additional projects with Next.js.

This project in the tutorial is absolutely open source and if you want to add a feature or edit something, feel free clone it and make it your own or to fork and make your pull requests.

Any comments and suggestions are always welcome. Please make Issues or Pull requests for me.

Free Online Resume Builder with NextJS

tuantvk — Fri, 11 Aug 2023 07:05:19 +0000

In today's digital age, having an effective and well-crafted resume has never been more important. Whether you're a seasoned professional or just starting your career journey, a resume is a powerful tool that can open doors to new opportunities. With the help of free online resume builders, you can create a standout resume without the need for design skills or expensive software. In this article, we will explore the benefits of using a free online resume builder and provide recommendations for reliable platforms to get you started.

Resume Builder - Try Now

Benefits of Free Online Resume Builders:

User-friendly interface: Free online resume builders offer intuitive interfaces that make the resume-building process effortless and enjoyable. You don't need to be a tech expert to navigate through the tools and create a compelling resume.
Variety of templates: These platforms provide a wide range of professionally designed templates to suit different industries and career levels. Whether you're applying for a creative role or a corporate position, you'll find a template that matches your style and showcases your skills effectively.
Time-saving: Crafting a resume from scratch can be time-consuming, especially if you're unsure about formatting and structure. Free online resume builders provide pre-built sections and layouts, allowing you to simply fill in your information and customize your resume accordingly. This saves time and eliminates the guesswork.
Customization options: While the templates serve as a starting point, free online resume builders allow for customization to ensure your resume reflects your unique qualifications and experiences. You can adjust fonts, colors, sections, and layouts to make your resume truly tailored to your needs.
Easy sharing and downloading: Once you're done creating your resume, free online resume builders make it seamless to share your resume with potential employers. These platforms enable you to download your resume in standard formats like PDF or Word, ensuring compatibility when submitting applications.

NextJS

Next.js, a popular React framework, allows developers to build static websites effortlessly while enjoying the benefits of server-side rendering, static generation, and easy deployment. In this article, we will walk you through the process of building a static website with Next.js.

1. Setting up the Next.js project

To begin, make sure you have Node.js installed on your machine. Create a new directory for your project, navigate to it using the command line, and initialize a new Next.js project by running the following command:

npx create-next-app cv4free

This will set up a basic Next.js project structure and install all the necessary dependencies.

2. Creating pages

Next.js follows an intuitive file-based routing system. To create a new page, simply create a new file inside the pages directory with a .js, .jsx, or .ts extension. Each file in this directory represents a unique route in your application. For example, creating a file named resume-builder.tsx will generate a route accessible at "/resume-builder".

3. Fetching data

Next.js allows you to fetch data at the server-side, which ensures faster initial page loading and improved SEO. Utilize Next.js's built-in getStaticProps function to fetch data during build time and pass it as a prop to your components.

Some other support libraries:

Form & Validation: formik, yup
Print PDF file: react-to-print
Generate sitemap: next-sitemap
Markdown: react-markdown, gray-matter
Optimize images: next-export-optimize-images

That all!

I build the application with a static html file, so the export config will look like this:

package.json

"scripts": {
   "dev": "next dev",
   "build": "next build && next-export-optimize-images",
   "start": "next start",
   "postbuild": "next-sitemap",
   "lint": "next lint"
},

next.config.js

/** @type {import('next').NextConfig} */
const withExportImages = require('next-export-optimize-images')
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development'
})

const config = withPWA({
  reactStrictMode: true,
  swcMinify: true,
  output: 'export',
  trailingSlash: true,
  images: {
    contentSecurityPolicy: ``,
  },
})

module.exports = withExportImages(config)

Because I use a self-host, the images will not be cached like when you use Vercel, which will cause your website to have a heavier load. Therefore, I used a temporary solution using the next-export-optimize-images library.

A free online resume builder is a valuable resource that empowers job seekers to create compelling resumes easily and effectively. With user-friendly interfaces, customizable templates, and seamless sharing options, these platforms simplify the resume-building process and allow you to make a great first impression. Take advantage of these tools to unlock your career potential and land the job of your dreams.

Free resume templates: https://cv4free.vercel.app
Free Online Resume Builder

Thank you for reading!

Mobile app testing easier with Maestro (React Native)

tuantvk — Wed, 10 May 2023 05:00:58 +0000

Mobile app testing easier with Maestro

Languages

🇻🇳 Tiếng Việt

View full on my Github: https://github.com/tuantvk/rnmaestro

I used Detox to test React Native apps. At that time, Detox was so "cool", saving both the time and effort of the dev team and the tester team. However, later on, I saw the complexity, as well as the "difficulty" with new team members, and that's when Maestro came to me as a savior. I know Maestro through an article on dev.to, but my team's "noob" is true 😂 (but my teammates don't believe it).

What is Maestro?
Setting up the development environment and initializing the app
Installing Maestro
Test flows
Maestro studio
Test case
Interaction with a component by testID
External parameters
runFlow
Recording your flow
Tags
Maestro Cloud
Videos testing of Maestro

What is Maestro?

Maestro is the simplest and most effective mobile UI testing framework. Maestro is built on learnings from its predecessors (Appium, Espresso, UIAutomator, XCTest) and allows you to easily define and test your Flows.

What are Flows? Think of Flows as parts of the user journey in your app. Login, Checkout and Add to Cart are three examples of possible Flows that can be defined and tested using Maestro. Declarative yet powerful syntax and write your tests in a yaml or yml file. Read more Why Maestro?

Platform Support:

Platform	Support
iOS	✅
Android	✅
React Native	✅
Flutter	✅
Web Views	✅

I like using Maestro for mobile app testing. Installing and writing tests is also very easy for all those who do not know how to use the Casio FX-570 calculator.
In this example, I will guide you to install and write some common test cases. I use Mac OS and a simple app written in React Native.

Setting up the development environment and initializing the app

First, you must have the application to be tested. To create a React Native project, you can refer to the full steps in Setting up the development environment.

Assuming you already have the environment, proceed with initializing the application:

npx react-native init RNMaestro

After initialization, notice the applicationId of Android (android/app/build.gradle -> applicationId) and iOS (Project in Xcode -> Signing & Capabilities -> Bundle Identifier). You can optionally edit them for later use, in this tutorial, I edit Android and iOS to com.rnmaestro.

In the App.tsx file of the project, copy & paste the code below.

// App.tsx
import React, { useState } from 'react';
import {
  View,
  Alert,
  SafeAreaView,
  TextInput,
  Button,
  FlatList,
} from 'react-native';

const TASKS = Array.from({ length: 25 }, (_, i) => ({ title: 'Task ' + i }));

interface Item {
  title: string;
}

const App = () => {
  const [title, setTitle] = useState('');
  const [tasks, setTasks] = useState(TASKS);

  const addTask = () => {
    if (title?.trim()?.length === 0) {
      Alert.alert('Title is required');
    } else {
      const newTasks = [...tasks];
      newTasks.unshift({ title });
      setTasks(newTasks);
      setTitle('');
    }
  };

  const renderItem = ({ item }: { item: Item }) => (
    <Button title={item?.title} onPress={() => Alert.alert(item?.title)} />
  );

  const keyExtractor = (item: Item, idx: number) => `${idx}`;

  return (
    <SafeAreaView>
      <FlatList
        data={tasks}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        ListHeaderComponent={
          <View>
            <TextInput
              value={title}
              placeholder="Enter your title"
              onChangeText={setTitle}
            />
            <Button testID="btn_add_task" title="Add task" onPress={addTask} />
          </View>
        }
      />
    </SafeAreaView>
  );
};

export default App;

Or you can use my project (skip the step below if you don't use it):

Clone repository

git clone https://github.com/tuantvk/rnmaestro.git

Installing packages

cd rnmaestro; yarn install

Pod (Only for iOS)

npx pod-install

Installing Maestro

For installation information for Windows or other environments, please refer to the official documentation Installing Maestro
.

Run the following command to install Maestro on Mac OS, Linux:

curl -Ls "https://get.maestro.mobile.dev" | bash

You can check if maestro is installed by checking the version:

maestro -v

It should print the version number vi.xxx.com (E.g: 1.27.0).
In case zsh: command not found: maestro, restart your terminal please.

Running flows on iOS Simulator requires installation of Facebook IDB:

brew tap facebook/fb
brew install idb-companion

Xcode recommended version is 14 or higher.

Maestro can't interact with real iOS devices yet. Only Simulator is supported at the moment. (May 2023)

After completing the above steps, the installation is complete. Start writing test cases.

Test flows

Based on the functionality of the current application, our workflow should look like this:

Start the app
Press Add task button
Check if the empty message is visible
Enter title
Press Add task button
Check if the new task is visible

Maestro studio

Use Maestro Studio to instantly discover the exact commands needed to interact with your app.

maestro studio

Run the command above to launch Maestro Studio in your browser, default is http://localhost:9999.

Video demo on Github - Maestro Studio

Test case

Create file .maestro/app.yaml in the root folder of the project.

# .maestro/app.yaml
appId: com.rnmaestro # applicationId
---
- launchApp
# Check if "Title is required" is visible
- tapOn: "Add task"
- assertVisible: "Title is required"
- tapOn: "OK"

# Check if new task is visible
- tapOn: "Enter your title"
- inputText: "Task from maestro"
- hideKeyboard # Note 1
- tapOn: "Add task"
- assertVisible: "Task from maestro"

Note 1:
On iOS, hideKeyboard is done with help of scrolling up and down from the middle of the screen since there is no native API to hide the keyboard. If using this command doesn't hide the keyboard we recommend clicking on some non-tappable region with tapOn points command, similarly to how a user would hide the keyboard when interacting with your app. Read more iOS implementation caveat.

Run the associated Flow using the maestro test command.

# run single flow
maestro test .maestro/app.yaml
# or
# run all flows in a directory
maestro test .maestro/

Video demo on Github - Test case

In terminal looks similar to the image below:

The test will be automatically restarted whenever you make a change to the test file. This is particularly convenient when writing a new test from ground up. Run with -c argument.

maestro test -c .maestro/app.yaml

Commands


assertVisible	assertNotVisible	assertTrue	back
clearKeychain	clearState	copyTextFrom	evalScript
eraseText	extendedWaitUntil	hideKeyboard	inputText
launchApp	openLink	pressKey	pasteText
repeat	runFlow	runScript	scroll
scrollUntilVisible	setLocation	stopApp	swipe
takeScreenshot	tapOn	travel	waitForAnimationToEnd

Interaction with a component by `testID`

In the example above, I was instructed to write the flow by calling the contents of the screen directly. However, there will be many testing parts whose content changes after each operation, so you need to use testID to identify like: View, Button, Text, Image.

Example:

# .maestro/app.yaml
appId: com.rnmaestro # applicationId
---
- launchApp
# Check if "Title is required" is visible
- tapOn:
    id: "btn_add_task" # testID here
- assertVisible: "Title is required"
- tapOn: "OK"

External parameters

There might be cases where you don't want to store certain values in a test file itself, you can pass parameters to Maestro:

maestro test -e APP_ID=com.rnmaestro .maestro/app.yaml

And then refer to them in your flow using ${name} notation:

# .maestro/app.yaml
appId: ${APP_ID} # applicationId
---
- launchApp

Constants can be declared at the flow file level, in key env, above the --- marker:

# .maestro/app.yaml
appId: ${APP_ID} # applicationId
env:
  APP_ID: com.rnmaestro
---
- launchApp

If you want to run tests from scripts of package.json you can config:

{
  "scripts": {
    "test": "$HOME/.maestro/bin/maestro test",
    "test-dev": "yarn test -e APP_ID=com.rnmaestro.dev",
    "test-prod": "yarn test -e APP_ID=com.rnmaestro"
  }
}

In case, I have 2 environments dev and production.

com.rnmaestro.dev is for dev environments
com.rnmaestro is for production environments

Run test:

yarn run test-prod .maestro/app.yaml

runFlow

If you'd like to avoid duplication of code or otherwise modularize your Flow files, you can use the runFlow command to run commands from another file. Example:

# Login.yaml
appId: com.example.app
---
- launchApp
- tapOn: Username
- inputText: Test User
- tapOn: Password
- inputText: Test Password
- tapOn: Login

# Settings.yaml
appId: com.example.app
---
- runFlow: Login.yaml # Run commands from `Login.yaml`
- tapOn: Settings
- assertVisible: Switch to dark mode

Recording your flow

Simply run the command below:

maestro record .maestro/app.yaml

After testing is complete, maestro renders a beautiful mp4 video recording of the entire process.

Currently, Maestro versions CLI 1.26.0, CLI 1.26.1, CLI 1.27.0, the record feature does not work on iOS, but it has been fixed at commit 2bd380d, but no release yet. If you are using the above versions, it is possible that the screen recording feature will not work (Updated date: 2023-05-09).

The easiest way to test your Flows in CI is to run your Flows on Maestro Cloud. Since your flows run in the cloud there's no need to configure any simulators or emulators on your end. Check out the Maestro Cloud Documentation.

CI Support:

CI Platform	Support via CLI	Native Integration
GitHub Actions	✅	✅
Bitrise	✅	✅
Bitbucket	✅	✅
CircleCI	✅	✅
GitLab CI/CD	✅	🚧
TravisCI	✅
Jenkins	✅
All other CI platforms	✅

Videos testing of Maestro

Android contacts flow automation - maestro.mobile.dev

Facebook signup flow automation - maestro.mobile.dev

Resources

Maestro: https://maestro.mobile.dev/
Maestro Cloud: https://cloud.mobile.dev/
Facebook IDB: https://github.com/facebook/idb
Best tips & tricks for E2E Maestro with React Native: https://dev.to/retyui/best-tips-tricks-for-e2e-maestro-with-react-native-2kaa
Test your React Native app with Maestro: https://dev.to/b42/test-your-react-native-app-with-maestro-5bfj
Streamline Your React Native Testing with Maestro: https://viniciuspetrachin.medium.com/streamline-your-react-native-testing-with-maestro-bc279586125f

Maestro is also very new to the mobile application testing community, there are many issues to fix and upgrade. However, it is well deserved 1 star on the Maestro Github for the development team.

🎉 🎉 🎉 Hope the article is useful to everyone! Thanks! 🎉 🎉 🎉

Contributions

Any comments and suggestions are always welcome. Please make Issues or Pull requests for me.

License

MIT licensed.

Test 1102

tuantvk — Tue, 02 Nov 2021 05:09:28 +0000

<p x="">

Enter date easily with react-native-datefield

tuantvk — Thu, 22 Apr 2021 13:57:45 +0000

In the course of implementing a few projects, I have found that users who use the selection date function in applications often have difficulty choosing years in the past.

Hence, I developed the react-native-datefield library to make it easier for the users to enter date data.
The react-native-datefield library has great support in terms of both user interface and functional performance. It validates the entered date data, leap years, allows customization of layout input and returns errors if the user enters incorrect data.

Components:

DateMonthYearField
MonthDateYearField
YearMonthDateField

Usage

import DateField from 'react-native-datefield';

const DateField = require('react-native-datefield');

<DateField
  labelDate='Enter date'
  labelMonth='Enter month'
  labelYear='Enter year'
  defaultValue={new Date()}
  styleInput={styles.inputBorder}
  onSubmit={(value) => console.log(value)}
/>

<MonthDateYearField
  styleInput={styles.inputBorder}
  onSubmit={(value) => console.log('MonthDateYearField', value)}
/>

<YearMonthDateField
  styleInput={styles.inputBorder}
  onSubmit={(value) => console.log('YearMonthDateField', value)}
/>

const styles = StyleSheet.create({
  inputBorder: {
    width: '30%',
    borderRadius: 8,
    borderColor: '#cacaca',
    borderWidth: 1,
    marginBottom: 20,
  },
});

View more example App.tsx.

My repo on Github react-native-datefield

Thanks for reading !

Use Enzyme for testing React Native Component

tuantvk — Wed, 13 May 2020 10:39:48 +0000

A unit could be individual methods and functions in classes or really any small pieces of functionality. We mock out dependencies in these tests so that we can test individual methods and functions in isolation.

This is example for use Enzyme for testing React Native Component. I have component Members.js and enter the following contents:

// Members.js
import React from 'react';
import { View, Text } from 'react-native';


const Members = ({ members }) => {

    return (
        <View>
            {members.map(member => (
                <Text key={member.id} testID="memberDetail">{member.name}</Text>
            ))}
        </View>
    )
}


export default Members;

Members Component receive a props members include id key and name key, render each item member with testID="memberDetail"

// Members.spec.js
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

import Members from './Members';

const members = [{ id: 1, name: 'Daphne', }, { id: 2, name: 'Margret', }];


describe('Members Component', () => {
    it('should render without issues', () => {
        const component = shallow(
            <Members members={members} />
        );

        expect(component.length).toBe(1);
        expect(toJson(component)).toMatchSnapshot();
    });

    it('should render all item in members', () => {
        const wrapper = shallow(
            <Members members={members} />
        );

        expect(wrapper.find({ testID: 'memberDetail' }).length).toBe(2);
    });

    it('should render correct names', () => {
        const wrapper = shallow(
            <Members members={members} />
        );

        wrapper.find({ testID: 'memberDetail' }).forEach((node, index) => {
            expect(node.props().children).toBe(members[index].name);
        });
    });

});

Events Hook Testing

How to testing component use Hooks ? For example:

// EventsHook.js
import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

const EventsHook = () => {

  const [number, _setNumber] = useState(1);

  return (
    <View>
      <TouchableOpacity onPress={() => _setNumber(number + 1)}>
        <Text>{number}</Text>
      </TouchableOpacity>
    </View>
  );
}

export default EventsHook;

// EventsHook.spec.js
import React from 'react';
import {
  Text,
  TouchableOpacity,
} from 'react-native';
import renderer from 'react-test-renderer';
import { waitForElement } from 'react-native-testing-library';
import EventsHook from './EventsHook';

describe('EventsHook', () => {

  it('calls setCount with count + 1', async () => {

    let inst;
    inst = renderer.create(<EventsHook />)

    await waitForElement(() => {
      const button = inst.root.findByType(TouchableOpacity);
      const text = inst.root.findByType(Text);

      button.props.onPress();

      expect(text.props.children).toBe(2);

    })

  });

});

View all on my repo WtfReactNativeTesting

MonalisaUI - UI component library for React Native

tuantvk — Sat, 07 Dec 2019 05:24:51 +0000

MonalisaUI

MonalisaUI is a free and open source UI component library for React Native to build native mobile apps for iOS and Android platforms.

Usage

Visit https://tuantvk.gitbook.io/monalisaui/ for full documentation.

Github https://github.com/tuantvk/monalisa-ui

Install

yarn add monalisa-ui
# or
npm install --save monalisa-ui

Components

Example

import React from 'react';
import { View } from 'react-native';
import { ArticleCard } from 'monalisa-ui';

const datas = [
  {
    img: 'http://lorempixel.com/640/480/abstract',
    title: 'Et saepe in aut voluptates illum eum laudantium ipsam similique.',
    category: 'Aut voluptatem dicta',
    author: 'Dr. Ida Marvin',
    time: '21 min ago',
  },
  {
    img: 'http://lorempixel.com/640/480/abstract',
    title: 'Et saepe in aut voluptates illum eum laudantium ipsam similique.',
    category: 'Aut voluptatem dicta',
    author: 'Dr. Ida Marvin',
    time: '21 min ago',
  },
  {
    img: 'http://lorempixel.com/640/480/abstract',
    title: 'Et saepe in aut voluptates illum eum laudantium ipsam similique.',
    category: 'Aut voluptatem dicta',
    author: 'Dr. Ida Marvin',
    time: '21 min ago',
  },
];

const Example = () => (
  <View>
    {
      datas.map((data, index) => (
        <ArticleCard
          key={index}
          {...data}
          style={{ marginBottom: 15 }}
        />
      ))
    }
  </View>
);

export default Example;

import React from 'react';
import { View } from 'react-native';
import { ListItem } from 'monalisa-ui';

const Example = () => (
  <View>
    <ListItem
      title="Matteo Kilback"
      subTitle="United States of America"
    />
    <ListItem
      title="Lauriane Dibbert"
      subTitle="United States of America"
    />
  </View>
);

export default Example;

import React from 'react';
import { View } from 'react-native';
import { SocialIcon } from 'monalisa-ui';

const Example = () => (
  <View>
    <SocialIcon
      type="facebook"
    />
    <SocialIcon
      type="twitter"
    />
    <SocialIcon
      type="instagram"
    />
    <SocialIcon
      type="youtube"
    />
  </View>
);

export default Example;

import React from 'react';
import { View } from 'react-native';
import { Rating } from 'monalisa-ui';

const Example = () => (
  <View>
    <Rating />
  </View>
);

export default Example;

Contributing

So you want to contribute? Fun! I love seeing new PRs for MonalisaUI. If you are thinking about working on something, feel free to make an issue beforehand so that you can make sure it'll be worth your time!

React Native App use TypeScript, custom component - React Native Flawless UI

tuantvk — Fri, 15 Nov 2019 08:23:27 +0000

Web React Native Flawless UI - react-native-flawless-ui.netlify.com for 🔰 beginner use React Native 🔰

This post uses Microsoft's TypeScript-React-Native-Starter repo as a guide.

Create react native app

Once you've tried scaffolding out an ordinary React Native project,
you'll be ready to start adding TypeScript. Let's go ahead and do that.

react-native init MyAwesomeProject
cd MyAwesomeProject

Adding TypeScript

The next step is to add TypeScript to your project. The following commands will:

add TypeScript to your project
add React Native TypeScript Transformer to your project
initialize an empty TypeScript config file, which we'll configure next
add an empty React Native TypeScript Transformer config file, which we'll configure next
Adds typings for React and React Native

yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

The tsconfig.json file contains all the settings for the TypeScript compile.
The defaults created by the command above are mostly fine, but open the file and uncomment the following line:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": [
      "es6"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

The rn-cli.config.js contains the settings for the React Native TypeScript Transformer.
Open it and add the following:

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

Button

Example Button component use Typescript:

import React from 'react';
import {
  TouchableOpacity,
} from 'react-native';

interface BProps {
  activeOpacity?: number,
  children: React.ReactNode,
}

const Button = ({
  children,
  activeOpacity,
  ...rest
}: BProps) => (
    <TouchableOpacity activeOpacity={activeOpacity} {...rest}>
      {children}
    </TouchableOpacity>
  );

Button.defaultProps = {
  activeOpacity: 0.8,
}

export default Button;

Text

Example Text component use Typescript:

import React from 'react';
import {
  Text as RNText,
  TextStyle,
} from 'react-native';
import {
  Consts, // size of text
  Colors, // color if text
} from '../../constants';

export interface TextProps {
  size?: 'S' | 'M' | 'L' | 'XL' | 'XXL'; // size name
  style?: TextStyle;
  bold?: boolean,
  color?: string,
  children: React.ReactNode;
}

const getSize: { [key: string]: number } = Consts;

const checkSize = (size: string): number => {
  return getSize[size] || 0;
}

const Text = ({
  size = 'M',
  children,
  style,
  bold,
  color,
  ...rest
}: TextProps) => (
    <RNText {...rest}
      style={{
        ...style,
        fontSize: checkSize(size),
        fontWeight: bold ? '700' : '400',
        color: color || Colors.black,
      }}
    >
      {children}
    </RNText>
  );

export default Text;

Example use Text component

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

const Home = () => (
  <View>
    {/* prop size 'S'  | 'M'  | 'L'  | 'XL' | 'XXL' */}
    {/* same      '11' | '14' | '16' | '22' | '28' */}
    <Text size="XL">Text component 1</Text>

    {/* use fontWeight bold */}
    <Text bold={true}>Text component 2</Text>

    {/* custom color text */}
    <Text color="#ff0">Text component 3</Text>

    {/* add more style  */}
    <Text style={{ textAlign: 'right' }}>Text component 4</Text>

    {/* use onPress of Text react native */}
    <Text onPress={() => alert("Hello from Text")}>Text component 5</Text>
  </View>
);

export default Home;

View repo on 🏁 Github

What are we unit testing exactly ? 🚨

We're using "unit testing" to refer to tests of functions and plain JavaScript objects, independent of the React Native framework. This means that we aren't testing any components that rely on React Native.
View more

Happy hacking 💓 !

React Native Flawless UI

tuantvk — Tue, 24 Sep 2019 13:44:41 +0000

Introduction

Performance is one of the topic which can change the overall perception of the service you deliver.
To be honest, we have sometimes a hard time matching our and our customers expectation on that topic.
This articles is based on what we learned so far during this journey.
Mistakes that we did, and will not reproduce, or stuff that we learnt and actions that we took in responses.

Everything you know about React performance will apply in a React Native application

There are some great React Native Apps out-there. Here is how we try to be one of them.

View on web React Native Flawless UI

View repo on Github

Table of Content

Navigation

State Management

Form

Custom Component

Built With

Exemplary real world application built with react-mobx-cli (Mobx 5)

tuantvk — Thu, 19 Sep 2019 02:24:23 +0000

How to build your app with Mobx and React quickly ?

If you are in the React world there are some pretty high chances you may have heard about Mobx. Mobx is a lightweight and easy to learn state management library.

Besides mobx we will also add mobx-react that we will use to glue together mobx and react.

Installing react-mobx-cli

git clone https://github.com/tuantvk/react-mobx-cli.git

cd react-mobx-cli

npm install

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

View repo Github

Testing React Native Apps ? WtfReactNativeTesting

tuantvk — Tue, 10 Sep 2019 03:18:57 +0000

What are we unit testing exactly ? 🚨

We're using "unit testing" to refer to tests of functions and plain JavaScript objects, independent of the React Native framework. This means that we aren't testing any components that rely on React Native.

For example, a unit could be individual methods and functions in classes or really any small pieces of functionality. We mock out dependencies in these tests so that we can test individual methods and functions in isolation.

These test are written using testing frameworks and for this article i will be using Jest, javascript testing framework together with Enzyme and React Native Testing Library.

View all on my repo WtfReactNativeTesting

Essential Python Tips And Tricks For Python Developer

tuantvk — Sat, 17 Aug 2019 02:56:13 +0000

Writing shorthand statements in python

Python is having shorthand statements and shorthand operators. These things will help you write more logic with less number of statements.

We will see those available shorthand statements.

File Example shorthand.py

lambda statement

Probably every body is aware of the lambda functions. The statement lambda is helpful to write single line functions with out naming a function. This will return the function reference where you can assign it to any arbitrary variable. It's more like JavaScript anonymous functions.

foo = lambda a: a+3
foo(3)
6
foo(8)
11

SELF CALLED LAMBDA

You can write the lambda and you can make it call it self like self-invoking functions in javascript. Let's see an example.

(lambda a: a+3)(8)
11
(lambda x: x**x)(3)
27

List Comprehension

List Comprehension is the great feature that python is having. Using this feature you can reduce the lot of code, you can reduces space complexity of the code. Simple for loops can be written using list comprehension.

Syntax:

L = [ mapping-expression for element in source-list if filter-expression ]

Where:

L Variable, result gets assigned to

mapping-expression Expression, which is executed on every loop if only filter-expression > in if condition resolved as True

This list comprehension is equivalent to.

result = []
for element in source-list:
  if filter-expression:
    result.append(mapping-expression)

EXAMPLE

Lets see list comprehension example. Get even number from the given range.

Usual code

result = []
for i in range(10):
  if i%2 == 0:
    result.append(i)

print(result)
[0, 2, 4, 6, 8]

List Comprehension

[i for i in range(10) if i%2==0]
[0, 2, 4, 6, 8]

Dict Comprehension

Dict comprehension is available in python 2.7 and 3.x. This syntax will provide you the way to encapsulate several lines you use to create dictionaries into one line. It's is similar to list comprehension but we use dict literals {} instead of [].

Syntax:

{key:value for element in source-list if filter-expression }

Let's how we use it by an example.

I have a list of fruits, I want to make it dictionary by changing their case

['APPLE', 'MANGO', 'ORANGE']

I want to convert all keys into lower case. This is we would do with out using comprehension.

l = ['MANGO', 'APPLE', 'ORANGE']

d = {}

for i in l:
  d[i.upper()] = 1

{'ORANGE': 1, 'MANGO': 1, 'APPLE': 1}

Using Simple list comprehension.

{i.upper(): 1 for i in l}

Set Comprehension

Set comprehension syntax is very much similar to dict comprehension with a small difference.

Let’s consider dict comprehension example. Using following statement you generate set

{i.upper() for i in l}

Where we haven’t specified value like we do in dict comprehension

Generator Expression

You might have already know about generators. Any function which contains yield statment is called generator. generator gives iterable where we can call next method to get the next item in the sequence. Python got short notation for this generators like lambda. It is same as list comprehension but we enclose the expression with touple literals instead.

GENERATOR FUNCTION

def gen():
  for i in range(10):
    yield i 
g = gen()
<generator object gen at 0x7f60fa104410>
g.next()
0
g.next()
1

GENERATOR EXPRESSION

Same generator function can written as follow.

g = (i for i in range(10))
g
<generator object <genexpr> at 0x7f60fa1045f0>
g.next()
0

Shorthand If Else

Like C and javascript ternary operator (?:) you can write short hand if-else comparison. By taking readability into account we have following syntax in python

if-expression if (condition) else else-expression

This is equivalent to.

if True:
  print("This is True")
else:
  print("This is False")

Tuple Unpacking

Python 3 even more powerful unpacking feature. Here it is.

Example:

a, rest = [1, 3, 4, 6]

In this case, a will get 1 and rest of the list will get assigned to variable rest. i.e [3, 4, 6]

String Concatenation with delimiter

If you want to concatenate list of strings with some random delimiter. You can do that by using string method join

" || ".join(["hello", "world", "how", "are", "you"])

'hello || world || how || are || you'

Powerful One-Liners

Are you tired of reading through lines of code and getting lost in conditional statements? Python one-liners might just be what you are looking for. For example, the conditional statements.

if alpha > 7:
   beta = 999
elif alpha == 7:
   beta = 99
else:
   beta = 0

can really be simplified to:

beta = 999 if alpha > 7 else 99 if alpha == 7 else 0

Removing duplicates items from a list

Most of the time we wanted to remove or find the duplicate item from the list. Let see how to delete duplicate from a list. The best approach is to convert a list into a set. Sets are unordered data-structure of unique values and don’t allow copies.

listNumbers = [20, 22, 24, 26, 28, 28, 20, 30, 24]
print("Original= ", listNumbers)

listNumbers = list(set(listNumbers))
print("After removing duplicate= ", listNumbers)

How to efficiently compare two unordered lists

Above two lists contains the same element only their order is different. Let see how we can find two lists are identical.

We can use collections.Counter method if our object is hashable.
We can use sorted() if objects are orderable.

from collections import Counter

one = [33, 22, 11, 44, 55]
two = [22, 11, 44, 55, 33]
print("is two list are b equal", Counter(one) == Counter(two))

Convert Byte to String

To convert byte to string we can decode the bytes object to produce a string. You can decode in the charset you want.

byteVar = b"pynative"
str = str(byteVar.decode("utf-8"))
print("Byte to string is" , str )

Convert hex string, String to int

hexNumber = "0xfde"
stringNumber="34"

print("Hext toint", int(hexNumber, 0))
print("String to int", int(stringNumber, 0))

DEV Community: tuantvk

Building a Dynamic Job Board with Issues Github, Next.js, Tailwind CSS and MobX-State-Tree

How It Works?

Prerequisites

Creating a Next.js Project

Installing the required dependencies

Data Fetching

Parse Front Matter

Render UI

Conclusion

Free Online Resume Builder with NextJS

Benefits of Free Online Resume Builders:

NextJS

Mobile app testing easier with Maestro (React Native)

Mobile app testing easier with Maestro

Languages

Table of Contents

What is Maestro?

Setting up the development environment and initializing the app

Installing Maestro

Test flows

Maestro studio

Test case

Interaction with a component by testID

External parameters

runFlow

Recording your flow

Tags

Maestro Cloud

Videos testing of Maestro

Resources

Contributions

License

Test 1102

Enter date easily with react-native-datefield

Components:

Usage

Use Enzyme for testing React Native Component

Events Hook Testing

MonalisaUI - UI component library for React Native

MonalisaUI

Usage

Install

Components

Example

Contributing

React Native App use TypeScript, custom component - React Native Flawless UI

Create react native app

Adding TypeScript

Button

Text

Example use Text component

What are we unit testing exactly ? 🚨

Happy hacking 💓 !

React Native Flawless UI

Introduction

Table of Content

Navigation

State Management

Form

Custom Component

Built With

Exemplary real world application built with react-mobx-cli (Mobx 5)

How to build your app with Mobx and React quickly ?

Installing react-mobx-cli

Testing React Native Apps ? WtfReactNativeTesting

What are we unit testing exactly ? 🚨

Essential Python Tips And Tricks For Python Developer

Writing shorthand statements in python

lambda statement

SELF CALLED LAMBDA

List Comprehension

EXAMPLE

Dict Comprehension

Set Comprehension

Generator Expression

Shorthand If Else

Tuple Unpacking

String Concatenation with delimiter

Powerful One-Liners

Interaction with a component by `testID`