Skip to content

Instantly share code, notes, and snippets.

View mucahitgurbuz's full-sized avatar
🤓
Developing...

Mücahit Gürbüz mucahitgurbuz

🤓
Developing...
View GitHub Profile
@mucahitgurbuz
mucahitgurbuz / login.tsx
Created August 18, 2021 17:12
Authentication page for Auth0 react.
import React, { useEffect } from 'react';
import { useAuth0 } from '../../../auth/auth0';
import { urls } from '../../../routers/urls';
const Login: React.FC = () => {
const { loginWithRedirect, loading } = useAuth0();
useEffect(() => {
if (!loading) {
loginWithRedirect({ appState: urls.orderManagement });
@mucahitgurbuz
mucahitgurbuz / axios-interceptors.ts
Created August 18, 2021 17:05
Axios interceptors to check authorization and append a valid token
// Request interceptor for API calls
axios.interceptors.request.use(
async config => {
const token = await getTokenSilently();
config.headers.authorization = `Bearer ${token}`;
return config;
},
error => {
Promise.reject(error);
}
@mucahitgurbuz
mucahitgurbuz / auth0.tsx
Last active August 18, 2021 17:16
Auth0 React Methods
import React, { useState, useEffect, useContext, createContext } from 'react';
import createAuth0Client, {
getIdTokenClaimsOptions,
GetTokenSilentlyOptions,
GetTokenWithPopupOptions,
IdToken,
LogoutOptions,
PopupLoginOptions,
RedirectLoginOptions,
} from '@auth0/auth0-spa-js';
@mucahitgurbuz
mucahitgurbuz / reactComponentAfterOpt.tsx
Created May 15, 2021 11:15
A React Component after optimization with the recent changes
import React, { useEffect } from 'react';
import { Resource, resourceActions } from '@oplog/resource-redux';
import { useSelector, useDispatch } from 'react-redux';
import { ResourceType } from '../../models';
import { StoreState } from '../../models/state';
import { AddressTypeOutputDTO } from '../../services/swagger';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
export const HelloWorld: React.FC = () => {
@mucahitgurbuz
mucahitgurbuz / reactComponentBeforeOpt.tsx
Created May 15, 2021 11:13
A React Component before optimization with the recent changes
import React, { Dispatch, useEffect } from 'react';
import { Resource, resourceActions, resourceSelectors } from '@oplog/resource-redux';
import { connect } from 'react-redux';
import { ResourceType } from '../../models';
import { StoreState } from '../../models/state';
import { AddressTypeOutputDTO } from '../../services/swagger';
import { InjectedIntl, injectIntl } from 'react-intl';
import { RouteComponentProps, withRouter } from 'react-router-dom';
interface IHelloWorld {
@mucahitgurbuz
mucahitgurbuz / postinstall.js
Created April 14, 2021 08:33
Fix for "TypeError: message.split is not a function" error for Webpack 5
// This is a temporary fix for open issue https://github.com/facebook/create-react-app/issues/9880
const replace = require('replace-in-file');
const fixFormatWebpackMessages = async () => {
try {
const results = await replace({
files: 'node_modules/react-dev-utils/formatWebpackMessages.js',
from: `let lines = message.split('\\n');`,
to: `let lines = [];
@mucahitgurbuz
mucahitgurbuz / webpack.config.js
Created April 14, 2021 08:03
Webpack 4.* config example for Typescript, ReactJS
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@mucahitgurbuz
mucahitgurbuz / webpack.config.js
Created April 14, 2021 07:56
Webpack 5 Config Example for Typescript, ReactJS
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
@mucahitgurbuz
mucahitgurbuz / webpack-dev-server.config.js
Created April 13, 2021 13:54
webpack-dev-server Version 4 Configuration Example
'use strict';
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const paths = require('./paths');
const fs = require('fs');
const host = process.env.HOST || '0.0.0.0';
@mucahitgurbuz
mucahitgurbuz / webpack-dev-server.config.js
Created April 13, 2021 13:51
webpack-dev-server Version 3 Configuration Example
'use strict';
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const paths = require('./paths');
const fs = require('fs');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';