DEV Community: Simone Aronica

C++ read file from stdin

Simone Aronica — Sat, 08 Feb 2020 10:28:16 +0000

I've started to learn c++ and I need a way to read a file line by line directly from stdin. Now what I've tried is this:

freopen("input.txt", "r", stdin);
string buffer;
vector<int> temp = {};
getline(cin, buffer);
for(int elem : buffer) 
  if(elem != ' ')
    temp.push_back(elem - '0');
*dest = temp;

but when I run this code, the console waits for me to insert data via cli instead of reading it from stdin.
What can I do?

Fetch returns an array, but javascript doesn't recognise fields.

Simone Aronica — Thu, 06 Feb 2020 10:28:22 +0000

Background

I'm creating a website for my school using react and node.js. Now when I fetch all the articles the fetch actually sends all the articles, but javascript doesn't the whole data.

This is what the network receives:

The code

fetch(`/api/article/fetchlatest?offset=${offset}`)
      .then(res => res.json())
      .then(res => {
        console.log(res); // this is the console.log stated before
        setList(res);
        setFetched(true);
        setOffset(offset + 10);
      });

Editor.js react viewer

Simone Aronica — Sat, 18 Jan 2020 14:59:38 +0000

I've been using editor.js and react-editor-js as a WYSIWYG editor and now that I've developed the backend for images and text storing in a mongo database, I'm facing another issue: viewing those articles.

For those of you who don't know this is how every paragraph gets stored in editor.js:

"{\"time\":1579259743447,\"blocks\":[{\"type\":\"paragraph\",\"data\":{\"text\":\"How can I resist you?\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"<b>Mammamia</b>\"]}},{\"type\":\"paragraph\",\"data\":{\"text\":\"1<i><b>Bebebe</b></i>\"}},{\"type\":\"paragraph\",\"data\":{\"text\":\"<a href=\\\"https://google.com/\\\">Bobobo</a>\"}},{\"type\":\"quote\",\"data\":{\"text\":\"Pull me\",\"caption\":\"\",\"alignment\":\"left\"}},{\"type\":\"header\",\"data\":{\"text\":\"Mamma\",\"level\":1}},{\"type\":\"paragraph\",\"data\":{\"text\":\"1wowowo\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"Bismillah\"]}},{\"type\":\"paragraph\",\"data\":{\"text\":\"We will not let you go\"}},{\"type\":\"paragraph\",\"data\":{\"text\":\"Bis\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"Bismillah\"]}}],\"version\":\"2.16.1\"}"

And my issue now is trying to show those <a> <i> <b> as I can't just paste them into react like this:

<p>{elem.data.text}</p>

because react will reder , and as a text instead of as elements.
What can I do to overcome this issue?

This is what I've done so far:

<section>
        {article.body != undefined
          ? JSON.parse(article.body).blocks.map(elem => {
              console.log(elem);
              let rElem;
              switch (elem.type) {
                case "paragraph":
                  rElem = <p>{elem.data.text}</p>;
                  break;
                case "list":
                  switch (elem.data.style) {
                    case "ordered":
                      rElem = (
                        <ol>
                          {elem.data.items.map(innerElem => {
                            return <li>{innerElem.text}</li>;
                          })}
                        </ol>
                      );
                      break;
                    case "unordered":
                      rElem = (
                        <ul>
                          {elem.data.items.map(innerElem => {
                            return <li>{innerElem.text}</li>;
                          })}
                        </ul>
                      );
                      break;
                  }
                  break;
                case "image":
                  rElem = (
                    <img
                      src={elem.data.file.url}
                      width={elem.data.file.width}
                      height={elem.data.file.height}
                      alt={elem.data.file.url}
                    />
                  );
                  break;
                case "header":
                  switch (elem.data.level) {
                    case 1:
                      rElem = <h1>{elem.data.text}</h1>;
                      break;
                    case 2:
                      rElem = <h2>{elem.data.text}</h2>;
                      break;
                    case 3:
                      rElem = <h3>{elem.data.text}</h3>;
                      break;
                    case 4:
                      rElem = <h4>{elem.data.text}</h4>;
                      break;
                    case 5:
                      rElem = <h5>{elem.data.text}</h5>;
                      break;
                    case 6:
                      rElem = <h6>{elem.data.text}</h6>
                      break;
                  }
                  break;
                default:
                  rElem = null;
              }
              return rElem;
            })
          : null}
      </section>

Should a new webapp run on both http and https protocols?

Simone Aronica — Sun, 29 Dec 2019 23:38:30 +0000

I've been thinking about how to host my webapp and as I use a react frontend with serious authentication protocols, should my app be based on both http and https or use only https? More and more time thinking is leading me towards the latter, but I'm not sure. What do you think?

[SOLVED] Node.js ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Simone Aronica — Fri, 27 Dec 2019 12:39:26 +0000

Hello everyone,
I am using Node.js to host a webserver with both http and https, and I have generated my self signed certificate via the openssl commands:

$ openssl genrsa -des3 -out rootCA.key 2048
$ openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.crt

However when I try to connect to https://127.0.0.1:8080 or https://localhost:8080 or the machine's IP from another device I always get ERR_SSL_VERSION_OR_CIPHER_MISMATCH

What could it be? I have been trying to figure out for a while now and I can't understand what is the issue.

Server code

.env

PASSPHRASE=dummyPass
HTTPS=true
HTTPPORT=8079
HTTPSPORT=8080
KEY=rootCA.key
CERT=rootCA.crt

server.js

const httpsEnabled = process.env.HTTPS == 'true' || false;
if(httpsEnabled)
{
  const httpsPort = process.env.HTTPSPORT || 8081;
  const httpsServer = https.createServer(credentials, app);

  const keyStream = path.resolve(`./${process.env.KEY}`);
  const certificateStream = path.resolve(`./${process.env.CERT}`);
  const privateKey  = fs.readFileSync(keyStream, 'utf8');
  const certificate = fs.readFileSync(certificateStream, 'utf8');

  const credentials = {key: privateKey, cert: certificate, passphrase: process.env.PASSPHRASE};

  httpsServer.on("error", () => {
    console.log(`Could not start the app on port ${httpsPort}`);
    process.exit();
  });
  httpsServer.listen(httpsPort, () => {
    console.log(`App listening for HTTPS requests to https://127.0.0.1:${httpsPort}/`);
  });
}

Solved:

I'm stupid, I started the server before reading the credential. This is the fixed code:

server.js

const httpsEnabled = process.env.HTTPS == "true" || false;
if (httpsEnabled) {
  const keyStream = path.resolve(`./${process.env.KEY}`);
  const certificateStream = path.resolve(`./${process.env.CERT}`);
  const privateKey = fs.readFileSync(keyStream, "utf8");
  const certificate = fs.readFileSync(certificateStream, "utf8");
  const credentials = {
    key: privateKey,
    cert: certificate,
    passphrase: process.env.PASSPHRASE
  };

  const httpsPort = process.env.HTTPSPORT || 8081;
  const httpsServer = https.createServer(credentials, app);

  httpsServer.on("error", () => {
    console.log(`Could not start the app on port ${httpsPort}`);
    process.exit();
  });
  httpsServer.listen(httpsPort, () => {
    console.log(
      `App listening for HTTPS requests to https://127.0.0.1:${httpsPort}/`
    );
  });
}

How do I get a subcomponent value while referring to the main component?

Simone Aronica — Wed, 18 Dec 2019 08:48:41 +0000

So I have a component containing an input, and I need to access the value of this input through the main component like this:

//component declaration:
<MDTextField label='Password' type='password' ref='passwordField'/>

//reffing:
this.refs.passwordField

Can I do this in the first place? And if I can, how do I do this?

Code

const MDTextField = props => {
    PropTypes.checkPropTypes(MDTextField.propTypes, props, 'prop', 'MDTextField');
    const [isFocused, setFocused] = useState(false);
    const [isEmpty, setEmpty] = useState(true);
    const error = props.error;
    const type = props.type.toLowerCase();
    if(!type.match(/^(email|text|password|search)$/))
        throw "Invalid type. Type must be either email, text, password or search."
    console.log('error: ' + error + 'focus: ' + isFocused);
    const _setFocus = () => {
        setFocused(true);
    };
    const _setUnfocus = () => {
        setFocused(false);
    };
    const _handleChange = e => {
        setEmpty(e.target.value.length > 0 ? false : true);
    };
    return (
        <div
        {...props}
        style={{borderColor: props.error ? "rgb(176, 0, 32)" : props.color && isFocused ? props.color : ""}}
        className={`${props.outlined ? style.MDTextFieldOutlined : style.MDTextField} ${props.outlined ? palette.MDTextFieldOutlined : palette.MDTextField} ${props.className ? props.className : ''}`}
        onFocus={_setFocus}
        onBlur={_setUnfocus}
        >
        <label
            className={`${style.Label} ${palette.Label}`}
            style={{
            color: error ? "rgb(176, 0, 32)" : props.accentColor && isFocused ? props.accentColor : "",
            transform: isEmpty ? "" : `translateY(-${props.outlined ? "50" : "50"}%) scale(.75)`
            }}
        >
            {(props.label ? props.label : '') + (error ? "*" : "")}
        </label>
        <span className={style.InputWrapper}>
            <input
            style={{caretColor: error ? "rgb(176, 0, 32)" : (props.accentColor ? props.accentColor : "")}}
            className={`${style.TextInput} ${palette.TextInput}`}
            onChange={_handleChange}
            type={type}
            />
        </span>
        </div>
    );
};

Usestate hook not working inside arrow component.

Simone Aronica — Tue, 17 Dec 2019 12:08:36 +0000

The story

So I'm trying to replicate a Material Design text field, and I think I've managed to do that pretty well, as in this Code Sandbox: https://1d053.csb.app/

Now the only difference between this sandbox and the component I'll show later on is the use of scss modules instead of pure scss.

The problem

When I test this component it results in an Invalid Hook Call.
This is the error:

main.js:170 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1590)
    at useState (react.development.js:1618)
    at MDTextField (index.js:25)
    at hi (main.js:170)
    at Rs (main.js:170)
    at Ol (main.js:170)
    at Pl (main.js:170)
    at wl (main.js:170)
    at yl (main.js:170)
    at ou (main.js:170)

Now to my knowledge I see no reason for it to result in an invalid hook call.

The code

textfield/index.js

const MDTextField = props => {
    const [isFocused, setFocused] = useState(false);
    const [isEmpty, setEmpty] = useState(true);
    const _setFocus = () => {
        setFocused(true);
    };
    const _setUnfocus = () => {
        setFocused(false);
    };
    const _handleChange = e => {
        setEmpty(e.target.value.length > 0 ? false : true);
    };
    return (
        <div
        style={{
            borderColor: props.error
            ? "rgb(176, 0, 32)"
            : props.color && isFocused
            ? props.color
            : ""
        }}
        className={`${props.outlined ? style.MDTextFieldOutlined : style.MDTextField} ${palette.MDTextField} ${props.className ? props.className : ''}`}
        onFocus={_setFocus}
        onBlur={_setUnfocus}
        >
        <span
            className={`${style.Label} ${palette.Label}`}
            style={{
            color: props.error
                ? "rgb(176, 0, 32)"
                : props.color && isFocused
                ? props.color
                : "",
            transform: isEmpty
                ? ""
                : `translateY(-${props.outlined ? "50" : "50"}%) scale(.75)`
            }}
        >
            {props.label + (props.error ? "*" : "")}
        </span>
        <span className={style.InputWrapper}>
            <input
            style={{
                caretColor: props.error
                ? "rgb(176, 0, 32)"
                : props.color
                ? props.color
                : ""
            }}
            className={`${style.TextInput} ${palette.TextInput}`}
            onChange={_handleChange}
            />
        </span>
        </div>
    );
};

Also

Thank you for taking the time to read this issue, and I hope to find someone able enough to understand this error.

Edits:

This is the code I use to call the component:

const App = () => {
    const style = useStyles();
    return <>
        <div className={style.bg}>
            <MDCard media='https://images7.alphacoders.com/909/909467.jpg' >
                <MDCardTitle>Title goes here</MDCardTitle>
                <MDCardSubtitle>Secondary text</MDCardSubtitle>
                <MDCardSection>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</MDCardSection>
                <MDCardSection>Tags: <b>#reactjs</b></MDCardSection>
                <MDDivider />
                <MDButton text>button</MDButton>
                <MDButton text>button</MDButton>
            </MDCard>
            <MDCard media='https://images7.alphacoders.com/909/909467.jpg' dark>
                <MDCardTitle>Title goes here</MDCardTitle>
                <MDCardSubtitle>Secondary text</MDCardSubtitle>
                <MDCardSection>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</MDCardSection>
            </MDCard>
            <MDCard>
                <MDCardTitle>Title goes here</MDCardTitle>
                <MDCardSubtitle>Secondary text</MDCardSubtitle>
                <MDButton text>Button</MDButton>
            </MDCard>
            <MDCard dark>
                <MDCardTitle>Title goes here</MDCardTitle>
                <MDCardSubtitle>Secondary text</MDCardSubtitle>
                <MDButton accentColor='#1da3dc' text>button</MDButton>
            </MDCard>
            <div className={style.bw}>
                <MDButton>Button</MDButton>
                <MDButton outlined>Button</MDButton>
                <MDButton text>Button</MDButton>
            </div>
            <div className={style.bw}>
                <MDButton accentColor='#212121'>Button</MDButton>
                <MDButton outlined accentColor='#212121'>Button</MDButton>
                <MDButton text accentColor='#212121'>Button</MDButton>
            </div>
            <div className={style.br}>
                <MDFloatingButton >+</MDFloatingButton>
                <MDFloatingButton mini>+</MDFloatingButton>
            </div>
            <div className={style.bw}>
                <MDTextField />
            </div>
        </div>
    </>
}

Every other component is fine since if I remove this component, everything else works.

Handling async await

Simone Aronica — Mon, 09 Dec 2019 22:58:07 +0000

I'm trying to implement a register system, and I have to validate the mail and check that it's not already being used by another account in the database. The problem is that the validator function for email must be asynchronous as the query is asynchronous, but the verifyUser function that among other things verifies the email must be a normal function.

To the code!

async function _verifyEmail(User){
    const { email } = User;
    var isAvailable = await UserModel.countDocuments({email: email}).then(res => isAvailable = res > 0 ? false : true);
    var isValid = EmailValidator.validate(email)
    console.log(`isValid: ${isValid}`)
    console.log(`isAvailable: ${isAvailable}`);
    if(!!isValid || !isAvailable)
        return 400;
    else
        return 202;   
}

function _verifyUser(User){
    var emailStatus;
    _verifyEmail(User).then(res => {
        emailStatus = res;
        console.log(`res: ${res}`);
    });

    const passwordStatus = _verifyPassword(User);
    const nameStatus = _verifyName(User);
    const surnameStatus = _verifySurname(User);

    console.log(`email status: ${emailStatus}`);
    console.log(`password status: ${passwordStatus}`);
    console.log(`name status: ${nameStatus}`);
    console.log(`surname status: ${surnameStatus}`);

    if(emailStatus === 400 || passwordStatus === 400 || nameStatus === 400 || surnameStatus === 400)
        return 400;
    else
        return 202;
}

The problem

When I run this code while every other parameter in _verifyUser is fine, emailStatus is unavailable since the _verifyEmail function returns after the if computation.

How can I solve this?

ReadFileSync return ENOENT

Simone Aronica — Sun, 08 Dec 2019 10:49:06 +0000

A bit of backstory

I'm trying to run an https REST server with express and I'm using webpack to compile and bundle.
Now this is my structure:

-dist
-src
 -server
  server.js
 client
  index.html
  index.js
.babelrc
package.json
webpack.config.js
rootCA.key
rootCA.pem

I have imported in server.js rootCA.key and rootCA.pem like this:

7 import key from '../../rootCA.key';
8 import cert from '../../rootCA.pem';

so whenever I build in my dist folder I import those files through file-loader.

Now to the problem

When I run the server and those two lines are executed the result is an ENOENT like this:

fs.js:114
    throw err;
    ^

Error: ENOENT: no such file or directory, open '/406598dc63994ef30b45f867a314da17.key'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at eval (webpack:///./src/server/server.js?:19:21)
    at Module../src/server/server.js (C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:121:1)
    at __webpack_require__ (C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:20:30)
    at C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:84:18
    at Object.<anonymous> (C:\Users\simon\Desktop\CodeProjects\dual-setup\dist\server.js:87:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)

I don't understand what the problem could be as both server.js and the key are in the dist directory.

Some configurations

webpack.config.js


const path = require('path')
const fs = require('fs');
const nodeExternals = require('webpack-node-externals')
module.exports = {
  entry: {
    server: './src/server/server.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  module: {
    rules: [
      {
        // Transpiles ES6-8 into ES5
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(pem|key)$/,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
    https: {
      cert: fs.readFileSync('./rootCA.pem'),
      key: fs.readFileSync('./rootCA.key')
    }
  }
}

It should be noted that the command that I use to run the server is as simple as:

node ./dist/server.js