dunky11/react-saas-template

🌊 Template for building an SaaS / admin website using React + Material-UI

react-saas-template's Issues

Chrome v88 JSS issue

I recently updated my Chrome browser to v88 and the site crashed. After investigation, I narrowed it down to this line int he PriceCard.js

borderRadius: theme.shape.borderRadius * 2

Once I removed the "* 2" the site worked again.

Error during service worker registration

Hi, well done on the template.

I noticed a service worker registration error being logged in the console. You can verify this on the live demo - https://reactsaastemplate.com. I did an independent deployment of the template, and the same error is logged.

Chrome 88

Firefox 84

Regards

can open dashboard without login?

It seems like the dashboard page is not protected. I can open the dashboard without logging in or after logging out.
Doesn't look like the logging in is doing anything?

Invalid usage of pushMessageToSnackbar & setPushMessageToSnackbar

In the below code snippets, the use of pushMessageToSnackbar & setPushMessageToSnackbar is reversed.

react-saas-template/src/logged_in/components/Main.js

Lines 83 to 88 in 7697590

	const onPaymentSuccess = useCallback(() => {
	pushMessageToSnackbar({
	text: "Your balance has been updated.",
	});
	setIsAddBalanceDialogOpen(false);
	}, [pushMessageToSnackbar, setIsAddBalanceDialogOpen]);

react-saas-template/src/logged_in/components/Main.js

Lines 217 to 230 in 7697590

	const toggleAccountActivation = useCallback(() => {
	if (pushMessageToSnackbar) {
	if (isAccountActivated) {
	pushMessageToSnackbar({
	text: "Your account is now deactivated.",
	});
	} else {
	pushMessageToSnackbar({
	text: "Your account is now activated.",
	});
	}
	}
	setIsAccountActivated(!isAccountActivated);
	}, [pushMessageToSnackbar, isAccountActivated, setIsAccountActivated]);

react-saas-template/src/logged_in/components/Main.js

Lines 299 to 301 in 7697590

	const getPushMessageFromChild = useCallback(pushMessage => {
	setPushMessageToSnackbar(() => pushMessage);
	}, [setPushMessageToSnackbar]);

react-saas-template/src/logged_in/components/Main.js

Line 341 in 7697590

pushMessageToSnackbar={pushMessageToSnackbar}

Opening modals causes weird look

As a logged user, when I open Credit Card dialog or open messages popup, then the height of the page changes, the scroll bar disappears, and leaves the top navbar "cut-out"

Browser Back button required twice in the logged in section

Once logged in, navigate through the NavBar icons (Dashboard, Posts, Subscriptions). If you press the Back button in the browser to navigate to the previous, it shows the same section and it is required to press the Back button a second time to navigate to the previous section.
Can be reproduced in the demo site.

JS errors on unchanged main branch

Hello. I cloned and run clean project (main branch) and faced following JS errors in console after logging:

1. Failed prop type: The prop selectedTab is marked as required in NavBar, but its value is null.
2. React does not recognize the buttonRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase buttonref instead. If you accidentally passed it from a parent component, remove it from the DOM element.
3. React does not recognize the labelWidth prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase labelwidth instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Per my understanding, first one is caused by undetermined order in which components are rendered and can be fixed by assigning dummy/empty value to selectedTab (so that NavBar does not mark anything unless some componen is rendered).

Second and third issues seems to be related to changes in mui. Is that correct? Should they just be removed?

Thanks in advance for any help.

How to deploy template on github pages?

Hola buenas noches queria saber si se puede implementar en github pages ya que no lo logro hacer funcionar.

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

I followed the instructions to start the project, but I get an error on startup:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]start: [email protected]
7 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]start: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/osboxes/dev/github/react-saas-template/node_modules/.bin:/home/osboxes/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle [email protected]start: CWD: /home/osboxes/dev/github/react-saas-template
10 silly lifecycle [email protected]start: Args: [ '-c', 'node scripts/start.js' ]
11 silly lifecycle [email protected]start: Returned: code: 1 signal: null
12 info lifecycle [email protected]start: Failed to exec start script
13 verbose stack Error: [email protected] start: node scripts/start.js
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:321:20)
13 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:321:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/osboxes/dev/github/react-saas-template
16 verbose Linux 4.18.0-25-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "start"
18 verbose node v12.16.0
19 verbose npm v6.13.4
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: node scripts/start.js
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Upgrade from mui v4 to mui v5?

Any thought to doing this?

I'm trying to follow their guide but haven't been able to crack it as I don't really understand all the parts of the template. https://mui.com/guides/migration-v4/

It seems there's lots of bug fixes in v5, as well as being benchmarked as 50% faster

Module not found: Can't resolve './navigation/NavBar'

Project is very good!
An error was found on linux:
Module not found: Can't resolve './navigation/NavBar' in '/home/dbit/下载/react-saas-template/src/logged_out/components'

B should be uppercase
src/logged_out/components/navigation/Navbar.js --> NavBar.js

Registration

How can registration can be enabled?