DEV Community: Jin Jose Manuel

MongoDB - React drive files

Jin Jose Manuel — Thu, 13 Jan 2022 23:59:37 +0000

Overview of My Submission

I made a MongoDB-Express-React application which allows user to upload files to mongodb gridFS.

It connects to the database on Mongodb Atlas. My database has collections for storing the files.
In the front-end I usedreact and dropzone-ui/react to upload the files and to display them.

Submission Category:

Choose Your Own Adventure

This project is considered as random category since it does not fit to any category mentioned on the hackaton announcement.

Link to Code

atlashackathon / mongo-drive-backend

Simple and Small file storage service using Mongo DB. Tech: MERN

mongo-drive

Simple and Small file storage service using Mongo DB. Tech: MERN

View on GitHub

atlashackathon / mongo-drive-frontend

mongo-drive-frontend

Simple and Small file storage service using Mongo DB. Tech: MERN

Available Scripts

In the project directory, you can run:

`npm start`

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

The page will reload when you make changes.
You may also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with…

View on GitHub

Additional Resources / Info

Demo here:

Technology Used: React, Dropzone-ui, Express, Mongodb gridFS, Atlas

Automate unit testing with github actions and get coveralls badge for an npm package

Jin Jose Manuel — Tue, 07 Dec 2021 01:04:25 +0000

First of all, let´s see what are unit tests?.

Start with this question: How do you ensure the quality of your project?

The goal of unit testing is to isolate each part of the program and show that the individual parts are correct. A unit test provides a strict, written contract that the piece of code must satisfy. As a result, it affords several benefits.

Unit testing finds problems early in the development cycle. This includes both bugs in the programmer's implementation and flaws or missing parts of the specification for the unit. The process of writing a thorough set of tests forces the author to think through inputs, outputs, and error conditions, and thus more crisply define the unit's desired behavior. The cost of finding a bug before coding begins or when the code is first written is considerably lower than the cost of detecting, identifying, and correcting the bug later. Bugs in released code may also cause costly problems for the end-users of the software. Code can be impossible or difficult to unit test if poorly written, thus unit testing can force developers to structure functions and objects in better ways.

My Workflow

Since there is no need to reinvent the wheel, I will take advantage of an existing github action in the Continuous integration workflows category: Node.js. With this action I will set up this action in one of my public repositories. I will set up Node.js action for automating my unit test and also integrate with coveralls.io for getting a badge of how much my tests covers relevant lines.

What do I need?

A javascript project

Well, first we need to create a public repository for a javascript project on Github. You can use mine as a template. Dynamicss is a javascript project and is an npm package that is used to manage dynamically css stylesheets using javascript (create,edit and delete stylesheets). I will use this project in this example.

A coveralls account:

This is pretty simple. Just go to https://coveralls.io and create an account using your Github account. This is important, since you will need to grant access to coveralls.io to your repo. Finally, enable the permission that allows coveralls.io to acces to your repo like I did. Once the account is created using github, go to the left panel and click on "Add repos".

Click on the switch to enable the access to the desired repo. In my case, I filter the repos to get dynamicss.

Copy the repo token because we will need it for the set up.

Create unit tests

You can take my simple unit tests as a simpe example. Of course, there are more complex unit test when working with react or other libraries.
https://github.com/JinSSJ3/dynamicss/tree/master/tests

Create a .coveralls.yml file

Remember we copied a repo token? Well, in our project, we need to create a .yml file that contains just one line:
https://github.com/JinSSJ3/dynamicss/blob/master/.coveralls.yml

Set up the github action

Now, in your github repo, go to "actions" tab.
Search for Node.js action and click on "Set up this worklow".

Then we need to edit the code to get something like this:

We just need to set the node version. In my case, I'm using node version 16.
After that, we need to set the commands in the last lines, we only need 2:

npm ci (for installing dependencies)
npm run test:coveralls (for testing and sending results to coveralls.io). This command was set previously in package.json file.

Finally, make a commit to save the configuration:

This will save the .yml file in this location:
https://github.com/JinSSJ3/dynamicss/blob/master/.github/workflows/node.js.yml
Commiting will also trigger the job to be executed. Now, every time we push a commit, the job will be triggered, execute the unit tests and send results to coveralls.

Results

Let´s check the result of the action. Let´s go to the actiontab again. In my process, I can see that my code passed all tests and sent result to coveralls. I got a 93% of coverage in relevant lines of code. Also, we can see that job finished successfully.

Now, if you go to you coveralls account in your repo you will se something like this:

Final step: get your badge

And you are done! At this point we created a job for testing our code using github actions.
Now we can get our badge an embeb it on our README.md file.

Click on Embed button and copy the markdown code:
.

Finally we can add the badge in our readme file, commit, push and we'll get something like this.

Submission Category:

DIY Deployments

Yaml File or Link to Code

The coveralls result can be accessed here.
The coveralls .yml file can be accessed here.
The github action .yml file can be accessed here.
The repo can be accessed here.

JinSSJ3 / dynamicss

Manage CSS stylesheets dynamically with JavaScript

Description

With DinamiCSS you can manage CSS style sheets dynamically

Installation

DinamiCSS is available as an npm package.

// with npm
npm i @dynamicss/dynamicss

Main Features:

Insert style sheets from javascript files.
Edit stylesheets at run-time.
Remove style sheet.
Check whether a style sheet has already been inserted into the DOM
Create a DynamicSheet object rpresentation

Usage (basic example)

Here is a quick example to get you started, it's all you need:

Interactive and live demo:

DynamiCSS Types:

Name	Description	Attributes
`DynamicSheet`	Object that represents a css style sheet	`id`: string;
`content?`: string;
`sheetRules?`: DynamicSheetRule[];
`DynamicSheetRule`	Object that represents a set of css rules for a classname	`className`: string;
`rules`: DynamicStyle \| DynamicPseudoNested \| DynamicHyphens;

DynamiCSS namespace Functions:

Function	Description
`function insertStyleSheet(dynamicSheet: DynamicSheet): string`	Inserts the stylesheet into the DOM
`function editStyleSheet(id: string, sheetRules: DynamicSheetRule[]): string`	Edits an existing stylesheet in the DOM

…

View on GitHub

Additional Resources / Info

Unit test info was taken from wikipedia.

dropzone-ui: the new way of providing Drag and Drop File Uploads in React apps (part 1)

Jin Jose Manuel — Sun, 26 Sep 2021 03:51:42 +0000

Introduction

Dropzone UI is a complete set of react components that allows developers to spend less time in coding a drag and drop zone for file uploads.

In standard HTML5 you can perform file uploads through
<input type="file">. Additionally there are packages like dropzone and react-dropzone that can handle this task very well.
However, inspired in the last ones, there was created something new and more powerful: dropzone-ui.

With this new tool you can easily display previews and also restrict file types, file size and amount of files. Furthermore, you can change the view mode to see the files as an horizontal list or as a grid.

As I said before, you can change the view mode by clicking the button on the top next to the "remove all" button:

The last sample is important because you can also see 2 excellent functionalities:

Info layer
File status

Info Layer

The layer that shows all the relevant info about the file such as name, type and size.

File Status

The status of the file after being validated according to the validation criteria.

To make a Dropzone that supports the screenshots showed above you just need this code taken from CodesandBox:


import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          preview
          info
          hd
        />
      ))}

    </Dropzone>
  );
}

Full Screen preview

One killer feature is that, combined with other component called "FullScreenPreview" from the same package, you can see a full screen image preview of a file.

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          preview
          info
          hd
        />
      ))}
      <FullScreenPreview
        imgSource={imageSrc}
        openImage={imageSrc}
        onClose={(e) => handleSee(undefined)}
      />
    </Dropzone>
  );
}

And this is the result after dropping files, and clicking on the view button on the file item wanted:

Localization

Last but not least, dropzone ui is available in Spanish through the localization prop:

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
      localization={"ES-es"}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          localization={"ES-es"}
          preview
          info
          hd
        />
      ))}
      <FullScreenPreview
        imgSource={imageSrc}
        openImage={imageSrc}
        onClose={(e) => handleSee(undefined)}
      />
    </Dropzone>
  );
}

Conclusion

In conclusion, this is an amazing library for drag and drop files with image previews. This post cannot show the complete potential of dropzone-ui, but a general overview was provided. In fact, the information here is enough for start developing with his amazing tool. You can find more info in the documentation https://www.npmjs.com/package/dropzone-ui. In next posts I will show this package in deep.