Skip to content

Feature/UI #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
renardelyon wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature/UI #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b232020
API integration
renardelyon Jun 5, 2024
aee472a
Add prettier and linting
renardelyon Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions frontend_web_store/.prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"endOfLine": "auto"
}

19 changes: 19 additions & 0 deletions frontend_web_store/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";


export default [
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
pluginReactConfig,
{
"rules": {
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
}
},
{
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]
}
];
4,709 changes: 3,478 additions & 1,231 deletions frontend_web_store/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

31 changes: 29 additions & 2 deletions frontend_web_store/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"lint": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},
"eslintConfig": {
"extends": [
Expand All @@ -57,7 +59,32 @@
]
},
"devDependencies": {
"@eslint/js": "^9.4.0",
"@faker-js/faker": "^8.4.1",
"faker": "^5.5.3"
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.2",
"faker": "^5.5.3",
"globals": "^15.3.0",
"husky": "^9.0.11",
"lint-staged": "^15.2.5",
"prettier": "^3.3.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"prettier --write",
"eslint --fix",
"git add"
],
"*.{html,css,less,ejs}": [
"prettier --write",
"git add"
]
}
}
12 changes: 6 additions & 6 deletions frontend_web_store/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import './App.css';
import { BrowserRouter } from 'react-router-dom';

import ApiRoutes from "./api/ApiRoutes";
import { Provider } from "react-redux";
import store from "./store/store";
import { MantineProvider } from "@mantine/core";
import ApiRoutes from './api/ApiRoutes';
import { Provider } from 'react-redux';
import store from './store/store';
import { MantineProvider } from '@mantine/core';
// core styles are required for all packages
import '@mantine/core/styles.css';

Expand Down
230 changes: 115 additions & 115 deletions frontend_web_store/src/api/ApiRoutes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,115 @@
import React from "react";
import { Routes, Route, useLocation } from "react-router-dom";
import HomePage from "../pages/main/HomePage";
import LoginPage from "../pages/main/LoginPage";
import RegisterPage from "../pages/main/login/RegisterPage";
import NotFoundPage from "../pages/exception/NotFoundPage";
import CategoryPage from "../pages/main/CategoryPage";
import RecoverPage from "../pages/main/login/RecoverPage";
import ProductByCategoryPage from "../pages/main/category/ProductByCategoryPage";
import CartPage from "../pages/main/CartPage";
import ProductPage from "../pages/main/ProductPage";
import NewsPage from "../pages/main/NewsPage";
import OrderPage from "../pages/main/OrderPage";
import SubscriptionPage from "../pages/main/SubscriptionPage";
import UnauthenticatedAndCustomerAccess from "../components/protected/UnauthenticatedAndCustomerAccess";
import ProfilePage from "../pages/main/ProfilePage";
import AuthenticatedAccess from "../components/protected/AuthenticatedAccess";
import StockPage from "../pages/main/services/StockPage";
import SentimentAnalysisPage from "../pages/main/services/SentimentAnalysisPages";
import NarrativeSummary from "../pages/main/services/NarrativeSummary";
import AnalysisResult from "../pages/main/services/AnalysisResultPages";
import Sidebar from "../components/basic/Sidebar";
function ApiRoutes() {
const location = useLocation();
return (
<Routes location={location} key={location.pathname}>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route path="/recover" element={<RecoverPage />} />
<Route
path="/cart"
element={
<UnauthenticatedAndCustomerAccess>
<CartPage />
</UnauthenticatedAndCustomerAccess>
}
/>
<Route
path="/profile"
element={
<AuthenticatedAccess>
<ProfilePage />
</AuthenticatedAccess>
}
/>
<Route path="/category" element={<CategoryPage />} />
<Route path="/category/:code" element={<ProductByCategoryPage />} />
<Route path="/product" element={<ProductPage />} />
<Route path="/news" element={<NewsPage />} />
<Route
path="/order"
element={
<AuthenticatedAccess>
<OrderPage />
</AuthenticatedAccess>
}
/>
<Route
path="/services/forecasting"
element={
<Sidebar>
<AuthenticatedAccess>
<SubscriptionPage />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/stocks"
element={
<Sidebar>
<AuthenticatedAccess>
<StockPage />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/sentiment-analysis"
element={
<Sidebar>
<AuthenticatedAccess>
<SentimentAnalysisPage />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/summary"
element={
<Sidebar>
<AuthenticatedAccess>
<NarrativeSummary />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/result"
element={
<Sidebar>
<AuthenticatedAccess>
<AnalysisResult />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
);
}
export default ApiRoutes;
import React from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import HomePage from '../pages/main/HomePage';
import LoginPage from '../pages/main/LoginPage';
import RegisterPage from '../pages/main/login/RegisterPage';
import NotFoundPage from '../pages/exception/NotFoundPage';
import CategoryPage from '../pages/main/CategoryPage';
import RecoverPage from '../pages/main/login/RecoverPage';
import ProductByCategoryPage from '../pages/main/category/ProductByCategoryPage';
import CartPage from '../pages/main/CartPage';
import ProductPage from '../pages/main/ProductPage';
import NewsPage from '../pages/main/NewsPage';
import OrderPage from '../pages/main/OrderPage';
import SubscriptionPage from '../pages/main/SubscriptionPage';
import UnauthenticatedAndCustomerAccess from '../components/protected/UnauthenticatedAndCustomerAccess';
import ProfilePage from '../pages/main/ProfilePage';
import AuthenticatedAccess from '../components/protected/AuthenticatedAccess';
import StockPage from '../pages/main/services/StockPage';
import SentimentAnalysisPage from '../pages/main/services/SentimentAnalysisPages';
import NarrativeSummary from '../pages/main/services/NarrativeSummary';
import AnalysisResult from '../pages/main/services/AnalysisResultPages';
import Sidebar from '../components/basic/Sidebar';

function ApiRoutes() {
const location = useLocation();
return (
<Routes location={location} key={location.pathname}>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
<Route path="/recover" element={<RecoverPage />} />
<Route
path="/cart"
element={
<UnauthenticatedAndCustomerAccess>
<CartPage />
</UnauthenticatedAndCustomerAccess>
}
/>
<Route
path="/profile"
element={
<AuthenticatedAccess>
<ProfilePage />
</AuthenticatedAccess>
}
/>
<Route path="/category" element={<CategoryPage />} />
<Route path="/category/:code" element={<ProductByCategoryPage />} />
<Route path="/product" element={<ProductPage />} />
<Route path="/news" element={<NewsPage />} />
<Route
path="/order"
element={
<AuthenticatedAccess>
<OrderPage />
</AuthenticatedAccess>
}
/>
<Route
path="/services/forecasting"
element={
<Sidebar>
<AuthenticatedAccess>
<SubscriptionPage />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/stocks"
element={
<Sidebar>
<AuthenticatedAccess>
<StockPage />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/sentiment-analysis"
element={
<Sidebar>
<AuthenticatedAccess>
<SentimentAnalysisPage />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/summary"
element={
<Sidebar>
<AuthenticatedAccess>
<NarrativeSummary />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route
path="/services/result"
element={
<Sidebar>
<AuthenticatedAccess>
<AnalysisResult />
</AuthenticatedAccess>
</Sidebar>
}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
);
}

export default ApiRoutes;
15 changes: 9 additions & 6 deletions frontend_web_store/src/components/basic/Breadcrumbs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { Link } from "react-router-dom";
import useBreadcrumbs from "use-react-router-breadcrumbs";
import { Link } from 'react-router-dom';
import useBreadcrumbs from 'use-react-router-breadcrumbs';

function Breadcrumbs() {
const breadcrumbs = useBreadcrumbs();
const lastBreadcrumbs = breadcrumbs.slice(-1);

const capitalizeFirstLetter = (string) => {
const capitalizeFirstLetter = string => {
return string.charAt(0).toUpperCase() + string.slice(1);
};

let formattedBreadcrumbs = lastBreadcrumbs[0].key.split("/");
let formattedBreadcrumbs = lastBreadcrumbs[0].key.split('/');
let formattedBreadcrumb = capitalizeFirstLetter(
formattedBreadcrumbs[formattedBreadcrumbs.length - 1].replaceAll("%20", " ")
formattedBreadcrumbs[formattedBreadcrumbs.length - 1].replaceAll(
'%20',
' ',
),
);

const firstBreadcrumbs = breadcrumbs.slice(0, breadcrumbs.length - 1);
Expand All @@ -20,7 +23,7 @@ function Breadcrumbs() {
<div className="container py-4">
{firstBreadcrumbs.map(({ breadcrumb }) => (
<span key={breadcrumb.key}>
<Link to={breadcrumb.key}>{breadcrumb}</Link> /{" "}
<Link to={breadcrumb.key}>{breadcrumb}</Link> /{' '}
</span>
))}
<span>{formattedBreadcrumb}</span>
Expand Down
18 changes: 9 additions & 9 deletions frontend_web_store/src/components/basic/FooterComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import "../../css/components/basic/Footer.css";
import '../../css/components/basic/Footer.css';

export default function FooterComponent(props) {
return (
<div className={props.position === "absolute" ? "absolute" : "relative"}>
<div className={props.position === 'absolute' ? 'absolute' : 'relative'}>
<p
className={
props.variant === "dark"
? "copyright d-flex bg-dark text-light justify-content-center align-items-center"
: props.variant === "light"
? "copyright d-flex bg-light text-dark justify-content-center align-items-center"
: props.color === "white"
? "copyright d-flex text-white justify-content-center align-items-center"
: "copyright d-flex justify-content-center align-items-center"
props.variant === 'dark'
? 'copyright d-flex bg-dark text-light justify-content-center align-items-center'
: props.variant === 'light'
? 'copyright d-flex bg-light text-dark justify-content-center align-items-center'
: props.color === 'white'
? 'copyright d-flex text-white justify-content-center align-items-center'
: 'copyright d-flex justify-content-center align-items-center'
}
>
© 2023 Ghiffary Rifqialdi
Expand Down
Loading