Categories
Mastering Development

Bootstrap style disappearing on refresh only on one page in React app

I am working on a react app with a bootstrap template. So far all my pages work well except for one page. When I click on a link to this page the template loads fine, when I refresh on this page I loose my bootstrap styling. The only thing different about this page from the […]

Categories
Development

How to adjust background color for ‘paper’ on material-ui?

I am studying material-ui styling and using one of the free templates that is given. const useStyles = makeStyles(theme => ({ root: { height: “100vh” }, image: { backgroundImage: “url(https://source.unsplash.com/random)”, backgroundRepeat: “no-repeat”, backgroundColor: theme.palette.type === “dark” ? theme.palette.grey[900] : theme.palette.grey[50], backgroundSize: “cover”, backgroundPosition: “center” }, paper: { margin: theme.spacing(8, 4), display: “flex”, flexDirection: “column”, alignItems: […]

Categories
Development

Nivo Pie Chart Not Rendering

I’m using the nivo charting library and am struggling to get my pie charts to render. I really don’t understand why the pie chart isn’t showing up. Here is my core component code for the dashboard: import React, { useState, useEffect } from “react”; import Amplify, { Storage } from “aws-amplify”; import Paper from “@material-ui/core/Paper”; […]

Categories
Development

How can I have a function accept multiple file types?

How can I have a function accept multiple file types such as .jpg, .png, and .gif? Example of the intended file structure: img/slides/ profilePic-0.jpg profilePic-1.png profilePic-2.gif var imageType = “.jpg”; $.each($(“#modal .slide”), function(index, value) { $(this).css({ background: “url(‘img/slides/” + id + “-” + index + imageType + “‘) center center/cover”, backgroundSize: “cover” }); });

Categories
Development

Testing Material-UI with Jest outputs ShallowWrapper {} in my snapshot

Here’s my component: import React, { useState } from ‘react’; import history from ‘redux/history’; import parse from ‘html-react-parser’; import { Avatar, makeStyles, Typography, TextField, Button, Grid, Chip, Paper } from ‘@material-ui/core’; import LockOutlinedIcon from ‘@material-ui/icons/LockOutlined’; import CONFIG from ‘config’; import { loginUser as loginUserUtil } from ‘utils/accountUtil/accountUtil’; const useStyles = makeStyles((theme) => ({ root: { […]