Skip to content

Commit

Permalink
feat(upgrade): react and react router & tailwind setup
Browse files Browse the repository at this point in the history
  • Loading branch information
midas95 committed Nov 26, 2022
1 parent edc80a5 commit 9ae1991
Show file tree
Hide file tree
Showing 21 changed files with 2,767 additions and 6,995 deletions.
27 changes: 11 additions & 16 deletions packages/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,24 @@
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.0.3",
"@types/node": "^16.11.11",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/node": "^18.11.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"formik": "^2.2.9",
"moment": "^2.29.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^3.11.0",
"react-redux": "^7.2.6",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"redux": "^4.1.2",
"react-router-dom": "^6.4.3",
"react-scripts": "^5.0.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"tailwindcss": "^2.2.19",
"typescript": "^4.5.2",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:tailwindcss": "postcss src/index.css -o src/tailwind.css",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Expand Down Expand Up @@ -62,13 +57,13 @@
"@types/react-router-dom": "^5.3.2",
"@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.5.0",
"autoprefixer": "^10.3.1",
"autoprefixer": "^10.4.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"prettier": "^2.3.2"
"postcss": "^8.4.12",
"prettier": "^2.3.2",
"tailwindcss": "^3.0.23"
}
}
7 changes: 4 additions & 3 deletions packages/client/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const tailwindcss = require('tailwindcss');

module.exports = {
plugins: [tailwindcss('./tailwind.config.js', require('autoprefixer'))],
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
9 changes: 0 additions & 9 deletions packages/client/src/App.test.ts

This file was deleted.

13 changes: 4 additions & 9 deletions packages/client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import React from 'react';
import Routers from './routes';
import './tailwind.css';
import Routers from './routes/Router';
import './App.css';

function App() {
return (
<div className="w-full h-full">
<Routers />
</div>
);
}
const App: React.FC = () => {
return <Routers />;
};

export default App;
6 changes: 5 additions & 1 deletion packages/client/src/components/common/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react';

const MainContentContainer: React.FC = (props) => {
interface IProps {
children?: React.ReactNode;
}

const MainContentContainer: React.FC<IProps> = (props) => {
const { children } = props;
return (
<div
Expand Down
6 changes: 5 additions & 1 deletion packages/client/src/components/layouts/GamingPageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React from 'react';
import MainContentContainer from '../common';
import Navbar from '../limb/navbar';

const GamingPageLayout: React.FC = (props) => {
interface IProps {
children?: React.ReactNode;
}

const GamingPageLayout: React.FC<IProps> = (props) => {
const { children } = props;
return (
<div className="w-full h-full flex flex-col">
Expand Down
6 changes: 5 additions & 1 deletion packages/client/src/components/layouts/HomePageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React from 'react';
import MainContentContainer from '../common';
import Navbar from '../limb/navbar';

const HomePageLayout: React.FC = (props) => {
interface IProps {
children?: React.ReactNode;
}

const HomePageLayout: React.FC<IProps> = (props) => {
const { children } = props;
return (
<div className="w-full h-full flex flex-col">
Expand Down
6 changes: 5 additions & 1 deletion packages/client/src/components/layouts/MarketplacePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React from 'react';
import MainContentContainer from '../common';
import Navbar from '../limb/navbar';

const MarketplacePageLayout: React.FC = (props) => {
interface IProps {
children?: React.ReactNode;
}

const MarketplacePageLayout: React.FC<IProps> = (props) => {
const { children } = props;
return (
<div className="w-full h-full flex flex-col">
Expand Down
6 changes: 5 additions & 1 deletion packages/client/src/components/layouts/ProfilePageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React from 'react';
import MainContentContainer from '../common';
import Navbar from '../limb/navbar';

const ProfilePageLayout: React.FC = (props) => {
interface IProps {
children?: React.ReactNode;
}

const ProfilePageLayout: React.FC<IProps> = (props) => {
const { children } = props;
return (
<div className="w-full h-full flex flex-col">
Expand Down
6 changes: 5 additions & 1 deletion packages/client/src/components/layouts/WatchPageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React from 'react';
import MainContentContainer from '../common';
import Navbar from '../limb/navbar';

const WatchPageLayout: React.FC = (props) => {
interface IProps {
children?: React.ReactNode;
}

const WatchPageLayout: React.FC<IProps> = (props) => {
const { children } = props;
return (
<div className="w-full h-full flex flex-col">
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/components/limb/post/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const Post: React.FC<IProps> = (props) => {
<div className="w-full flex flex-col space-y-2 p-2 px-4">
<div className="flex items-center justify-between pb-2 border-b border-gray-300 text-gray-500 text-sm">
<div className="flex items-center">
<button className="flex items-center">
<div className="flex items-center">
<button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white">
<i style={{ fontSize: 10 }} className="fas fa-heart"></i>
</button>
Expand All @@ -59,7 +59,7 @@ const Post: React.FC<IProps> = (props) => {
<div className="ml-1">
<p>{post.likes}</p>
</div>
</button>
</div>
</div>
<div className="flex items-center space-x-2">
<button>{post.comments} Comments</button>
Expand Down
13 changes: 6 additions & 7 deletions packages/client/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { createRoot } from 'react-dom/client';

ReactDOM.render(
const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);

serviceWorker.unregister();
45 changes: 17 additions & 28 deletions packages/client/src/routes/PrivateRoute.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,26 @@
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import React, { ElementType, PropsWithChildren } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { LOGIN } from './routes';

interface IProps {
component: any;
layout: any;
exact: boolean;
path: string;
layout: ElementType;
}

const PrivateRoute: React.FC<IProps> = ({
component: Component,
layout: Layout,
...rest
}) => {
const PrivateRoute: React.FC<PropsWithChildren<IProps>> = (props) => {
const { children, layout: Layout } = props;
const { pathname } = useLocation();

const isAuthenticated = true;

return (
<Route
exact={rest.exact}
path={rest.path}
render={(props) =>
isAuthenticated === null ? null : isAuthenticated === true ? (
<Layout>
<Component {...props} />
</Layout>
) : (
<Redirect
to={{
pathname: '/#',
}}
/>
)
}
return isAuthenticated ? (
<Layout>{children}</Layout>
) : (
<Navigate
to={{
pathname: LOGIN,
search:
pathname && pathname !== '/' ? `?redirect=${pathname}` : undefined,
}}
/>
);
};
Expand Down
85 changes: 85 additions & 0 deletions packages/client/src/routes/Router.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import GamingPageLayout from '../components/layouts/GamingPageLayout';
import HomePageLayout from '../components/layouts/HomePageLayout';
import MarketplacePageLayout from '../components/layouts/MarketplacePage';
import ProfilePageLayout from '../components/layouts/ProfilePageLayout';
import WatchPageLayout from '../components/layouts/WatchPageLayout';
import GamingPage from '../components/pages/gaming';
import HomePage from '../components/pages/home';
import LoginPage from '../components/pages/#';
import MarketplacePage from '../components/pages/marketplace';
import PageNotFound from '../components/pages/notfound';
import ProfilePage from '../components/pages/profile';
import RegisterPage from '../components/pages/#';
import WatchPage from '../components/pages/watch';
import { PrivateRoute } from './PrivateRoute';
import {
GAMING,
HOME,
LOGIN,
MARKETPLACE,
PROFILE,
REGISTER,
WATCH,
} from './routes';

const Routers: React.FC = () => {
return (
<BrowserRouter>
<Routes>
<Route path={LOGIN} element={<LoginPage />} />
<Route path={REGISTER} element={<RegisterPage />} />

<Route
path={HOME}
element={
<PrivateRoute layout={HomePageLayout}>
<HomePage />
</PrivateRoute>
}
/>

<Route
path={WATCH}
element={
<PrivateRoute layout={WatchPageLayout}>
<WatchPage />
</PrivateRoute>
}
/>

<Route
path={MARKETPLACE}
element={
<PrivateRoute layout={MarketplacePageLayout}>
<MarketplacePage />
</PrivateRoute>
}
/>

<Route
path={GAMING}
element={
<PrivateRoute layout={GamingPageLayout}>
<GamingPage />
</PrivateRoute>
}
/>

<Route
path={PROFILE}
element={
<PrivateRoute layout={ProfilePageLayout}>
<ProfilePage />
</PrivateRoute>
}
/>

<Route path="*" element={<PageNotFound />} />
</Routes>
</BrowserRouter>
);
};

export default Routers;
Loading

0 comments on commit 9ae1991

Please # to comment.