<repo_name>paweljankowski92/task-synapsi<file_sep>/src/components/Cypher.js
import React from 'react';

const Cypher = (props) => {

const cipherCode = 3;

function encode (char) {
  const letterCode = char.charCodeAt(0);
  const codedChar = String.fromCharCode(letterCode + cipherCode)
  return codedChar
}

function decode (char) {
  const letterCode = char.charCodeAt(0);
  const codedChar = String.fromCharCode(letterCode - cipherCode)
  return codedChar
}

const cypherText = [...props.text].map(char => encode(char)).join('');
const unCypherText = [...props.text].map(char => decode(char)).join('');


return (
  <div>
    <textarea className="textarea">
      {props.textCode ? cypherText : unCypherText }
    </textarea>
  </div>
)
}

export default Cypher;
<file_sep>/src/components/Textarea.js
import React, { Component } from 'react';
import Cypher from './Cypher';
import './Textarea.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLock } from '@fortawesome/free-solid-svg-icons';
import { faLockOpen } from '@fortawesome/free-solid-svg-icons';


class Textarea extends Component {

    state = {
      text: [],
      changeText: false,
      textCode: false,
    }

    code = () => {
      const textarea = document.getElementById('txtarea');
      const value = textarea.value;

      if(value !== ''){
      this.setState({
        text: value,
        changeText: true,
        textCode: true,
      })
    } else {
      alert('Zaby zakodować, wpisz dowolny ciąg znaków, liter lub cyfr')
      this.setState({
        text: '',
        changeText: false,
        textCode: false,
      })
    }
    }

    uncode = () => {
      const textarea = document.getElementById('txtarea');
      const value = textarea.value;

      if(value !== ''){
      this.setState({
        text: value,
        changeText: true,
        textCode: false,
      })
    } else {
      alert('Aby odkodować, wklej zaszyfrowany kod')
      this.setState({
        text: '',
        changeText: false,
      })
    }
    }

    clearArea = () => {
        this.setState({
          changeText: false
        })

    }

  render() {
  return (
    <div>
        <h2 className="title2">Now, I encourage you to see the cipher generator.</h2>
        <div className="columns">
          <div className="cypher">
            <textarea className='textarea' onChange={this.clearArea} id="txtarea" /><br />
          <div className='buttons'>
          <button className='btn' onClick={this.code}>
              <FontAwesomeIcon className="icon" icon={faLock} />
          </button>
              <button className ='btn' onClick={this.uncode}>
              <FontAwesomeIcon className="icon" icon={faLockOpen} />
            </button>
          </div>
          </div>
          <div className="result">
            {!this.state.changeText  ? <textarea disabled className="textarea"></textarea> : <Cypher
              text={this.state.text}
              textCode={this.state.textCode}
              />}
        </div>
    </div>
  </div>
  );
}
}

export default Textarea;
<file_sep>/src/components/App.test.js
import React from 'react'
import { shallow } from 'enzyme'
import App from './App'
import { expect } from 'chai'
import sinon from 'sinon'

describe('Component App', () => {
  it('should render Password', () => {
    const wrapper = shallow(<App />)
    expect(wrapper.find('Password'));
  });
  it('should render header', () => {
    const wrapper = shallow(<App />)
    expect(wrapper.find('header'));
  });
});
<file_sep>/src/components/Textarea.test.js
import React from 'react'
import { shallow } from 'enzyme'
import Textarea from './TextArea'
import { expect } from 'chai'
import sinon from 'sinon'

describe('Component Textarea', () => {
  it('should render Component Cypher', () => {
    const wrapper = shallow(<Textarea />)
    expect(wrapper.find('Cypher'));
  });
  it('should render button', () => {
    const wrapper = shallow(<Textarea />)
    expect(wrapper.find('button'));
  });
});
<file_sep>/README.md
Dzień dobry wszystkim! :)

Każdy projekt uczy czegoś nowego, dziękuję synapsi.xyz za możliwość jego wykonania!

Hasło potrzebne do uzyskania autoryzacji i skorzystania z generatora szyfru to: !<EMAIL>

Miłego szyfrowania i odszyfrowywania :)

Zadanie zostało wykonane za pomocą React JS.

<NAME>

<file_sep>/src/components/Password.test.js
import React from 'react'
import { shallow } from 'enzyme'
import Password from './Password'
import { expect } from 'chai'
import sinon from 'sinon'

describe('Component Password', () => {
  it('should render Textarea', () => {
    const wrapper = shallow(<Password />)
    expect(wrapper.find('Textarea'));
  });
  it('should render Authorization', () => {
    const wrapper = shallow(<Password />)
    expect(wrapper.find('h1').first().text()).to.contain('Authorization');
  });
  it('should render div which contains input', () => {
    const wrapper = shallow(<Password />)
    const input = wrapper.find('input')
    expect(wrapper.find('div')).to.contain(input);
  });

});
