React Codes

App.jsx

// ADDING THE REDUX PROVIDER
import React from 'react';
import { Provider } from 'react-redux';
import store from '../redux/store';
import Routes from '../routes';

const App = () => {
  return (
      <Provider store={store}>
        <Routes />
      </Provider>
  );
};

export default App;

app.jsx

// setting up the routes

import "./App.css";
import Routes from './routes';


const App = () => {
  return (
      <Routes />
  );
};

export default App;

AuthenticatedRoute.jsx

import React from 'react';
import { Redirect } from 'react-router-dom';
import AuthorizedRoute from '../AuthorizedRoute';
import { isAuthenticated, decodeToken, getToken } from 'utils-auth';

/**
 * Renders the component if the user is authenticated
 *
 * @param {Component} Component
 *
 * @returns {JSX}
 */
const renderComponent = (Component) => (props) => {
  return <Component {...props} />;
};

/**
 * This Component returns a new
 * route based on authenticated status
 *
 * @returns {JSX}
 */
const AuthenticatedRoute = (props) => {
  const { component: Component, ...rest } = props;
  const checkisAuthenticated = isAuthenticated();
  const token = getToken();
  const user = decodeToken(token);

  if (!checkisAuthenticated) {
    return <Redirect to="/signin" />;
  }

  return (
      <AuthorizedRoute {...rest} render={renderComponent(Component)} />
  );
};

export default AuthenticatedRoute;

AuthorizedRoute.jsx

import * as React from 'react';
import { Route } from 'react-router';

/**
 * Returns authenticated route
 *
 * @param {Object} props
 *
 * @returns {JSX}
 */
const AuthorizedRoute = (props) => {
    return (
      <Route { ...props } />
    );
};


export default AuthorizedRoute;

axios-config.js

import axios from 'axios';

export const getToken = () => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    return JSON.parse(localStorage.getItem('accessToken'));
  }
  return null;
};

const instance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL || 'https://...APIURL',
});

instance.interceptors.request.use(
  async (config) => {
    const token = getToken();

    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default instance;

Box.jsx

import React from 'react';
import styled from 'styled-components';

const Box = styled.div`
  margin: 40px;
  border: 5px black;
`;

const Content = styled.p`
  font-size: 16px;
  text-align: center;
`;

const Box = () => (
  <Box>
    <Content> Styling React Components </Content>
  </Box>
);

export default Box;

build-script

  "scripts": {
    "start-scripts": "react-scripts start",
    "start": "npm install -g serve && serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

DashboardWrapper.jsx

// using destructured props in styled components

export const DashboardWrapper = styled.div`
  margin-top: ${({ marginTop }) => (marginTop ? marginTop : '70px')};
`;

DownloadButton.jsx

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  &:hover {
    cursor: pointer;
  }
`;

form.jsx

const SimpleForm = (props) => {
  const [cardNumber, setCardNumber] = React.useState("");

  const handleCardNumber = (e) => {
    e.persist();

    const value = e.target.value;
    setCardNumber(value);
  }

  return (
    <form>
      <div className="card-number">
        <input
          type="text"
          placeholder="card number"
          value={cardNumber}
          onChange={handleCardNumber}
        />
      </div>
      <button type="submit" className="myButton">
        Login
      </button>
    </form>
  );
}

index-with-route.jsx

// index.jsx with route

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("roots")
);

link-sample.jsx

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

multiple_fields.jsx

const SignUp = () => {
  const [inputs, setInputs] = useState({
    name: '',
    gender: '',
    email: ''
  });
  
  const inputHandler = (e) => {
    e.persist();
    setInputs((inputs) => ({
      ...inputs,
      [e.target.name]: e.target.value,
    }));
  };

  const submitForm = () => {
    console.log(inputs);
  };
  
    return (
    <form>
      <div className="">
        <input
          type="text"
          placeholder="Full name"
          value={inputs.name}
          onChange={inputHandler}
        />
      </div>
       <div className="">
        <input
          type="email"
          placeholder="Email"
          value={inputs.email}
          onChange={inputHandler}
        />
      </div>
       <div className="">
        <select name="gender">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </div>
      <button type="submit" className="myButton" onClick={() => submitForm()}>
        Signup
      </button>
    </form>
    )
   };

export default SignUp;

reducer.js

import { combineReducers } from 'redux';

// import individual reducers
import user from './user-reducer';

// combine all reducers
export default combineReducers({
  user,
});

routes.jsx

// react libraries
import * as React from 'react';

import { Route, Switch } from 'react-router-dom';
import Welcome from './components/Welcome/index';
import Nav from './components/Nav';

const Routes = () => (
  <Switch>
    <Route exact path="/contact" component={Nav} />
    <Route exact path="/" component={Welcome} />
    <Route path="*" component={() => <div>Not found</div>} />
  </Switch>
);

export default Routes;

store.js

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import thunk from 'redux-thunk';
import reducer from '../reducers';

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;

Text.jsx

// A styled component using props
export const Text = styled.p`
  font-size: ${(props) => (props.size ? props.size : '25px')};
  font-weight: ${(props) => (props.weight ? props.weight : 'normal')};
  color: ${(props) => (props.color ? props.color : '#000000')};
  text-align: ${(props) => (props.align ? props.align : 'left')};
  text-transform: ${(props) => (props.transform ? props.transform : '')};
`;

user-action.js

import { getAllUsers } from 'redux/api/users-api';

export const fetchAllUsers = (toast) => async (dispatch) => {
  try {
    dispatch({
      type: 'GET_USERS_REQUEST',
    });
    const response = await getAllUsers();
    dispatch({
      type: 'GET_USERS_SUCCESS',
      payload: {
        requests: response?.data,
      },
    });
  } catch (error) {
    dispatch({
      type: 'GET_USERS_FAILURE',
    });
  }
};

};

user-api.js

import axios from 'config/axios';

// user

//get sample
export const getAllUsers = async () => {
  const request = await axios.get('/users');
  return request;
};

// post sample

export const addUsers = (data) => {
    let request = axios.post('/users', data)
    return request
};

user-reducer.jsx

const initialState = {
  loading: false,
  users: [],
};

/**
 *user Reducer
 *
 * @export
 */
export default function (state = initialState, { type, payload }) {
  switch (type) {
    case 'GET_USERS_REQUEST':
      return {
        ...state,
        loading: true,
      };
    case 'GET_USERS_SUCCESS':
      return {
        ...state,
        loading: false,
        users: payload.users,
      };
    case 'GET_USERS_FAILURE':
      return {
        ...state,
        loading: false,
      };
    default:
      return state;
  }
}

useref.jsx

import React, { useRef } from 'react';
function useRefExample = () => {  
  const inputRef= useRef(null);  
  const onButtonClick = () => {  
    inputRef.current.focus();  
  };  
  return (  
    <>  
      <input ref={inputRef} type="text" />  
      <button onClick={onButtonClick}>Submit</button>  
    </>  
  );  
} ;

export default useRefExample;

util-auth.js

import jwtDecode from 'jwt-decode';

export const isAuthenticated = () => {
  const token = getToken();
  return !!token;
};

export const getToken = () => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    return JSON.parse(localStorage.getItem('accessToken'));
  }
  return null;
};

export const setToken = (token) => {
  if (token) {
    localStorage.setItem('accessToken', JSON.stringify(token));
  } else {
    localStorage.removeItem('accessToken');
  }
};

export const setRefreshToken = (token) => {
  if (token) {
    localStorage.setItem('refreshToken', JSON.stringify(token));
  } else {
    localStorage.removeItem('refreshToken');
  }
};

export const isExpired = (token) => {
  try {
    const decoded = decodeToken(token);
    const milliseconds = decoded.exp * 1000;
    return Date.now() > milliseconds;
  } catch (err) {
    return true;
  }
};

const clearStorage = () => {
  localStorage.clear();
};

export const decodeToken = (token) => {
  let decoded = {};
  try {
    decoded = jwtDecode(token);
  } catch (error) {
  } finally {
    return decoded;
  }
};

export const login = (token) => {
  setToken(token);
};

export const logout = () => {
  clearStorage();
};

ViewUsers.jsx

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchAllUsers } from 'redux/actions/user-action';

/**
 *
 *
 * @return {*}
 */
const ViewUsers = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchAllExitTypes());
  }, [dispatch]);

  const { users, loading } = useSelector((state) => state.user);
  return (
    <div>
    <p>All Users</p>
            {loading
              ? 'Loading...'
              : users?.map((user) => (
                <div>{user.name}</div>
              ))
}
    </div>
  );
};

export default ViewUsers;