Geoff happy slider

[GMorse19]

I tried to keep the styling to a minimum on this component keeping in mind that the ReviewCreate.js component is undergoing some major design changes.

In order to get the component to work,

replace Form.Control with HappySlider.

Pass an 'ID' as a prop with the same value as 'name' from ReviewCreate.js:

               <HappySlider
                  type="range"
                  min="1"
                  max="5"
                  step="1"
                  id="clean"
                  name="clean"
                  className="slider"
                  value={this.state.clean}
                  onChange={this.handleChange}
               />

The input styling in ReviewCreate.scss will conflict with the styling of the component. Removing the 'input' styling from ReviewCreate.scss will remedy this.

The sizing of the svg files is not uniform, so the images are a little difficult to center. (they're slightly off now) I'd love some feed back on the best way to address this. My initial instinct is to bring in new svg files that are uniform, but maybe there is a better, easier way?

[GMorse19]

One more note. The 'step' is set to 0.01 inside the slider. This can easily be changed, but I think the slider moves smoothly this way and I wanted to see what people thought. The values may need to addressed if we decide to go with this option because we don't end up with rounded integers, but that can be easily addressed, as well.

[GMorse19]

I did get these SVG files straight from the figma.

As you can see, the file is 24 x 36. I know it wouldn't be difficult to re-size them, but I was curious if there might be another straight forward way to handle the alignment of the image using CSS. I tried a few options, but I didn't feel like they were very solid solutions.

I agree that it makes sense to move the images into the public folder. Do you think I should make that change on this PR? Any body else have thoughts on this?

[GMorse19]

@yingsongsana I tried moving the images to the public folder, but the paths don't seem to be working the way I would expect.

I moved the entire Smileys folder into the public folder, similar to the Avatars folder. I tried multiple ways to write the path to these images, but for whatever reason it doesn't want to compile.

This is what I assumed would work.

import smiley1 from 'Smileys/smiley1.svg'

Any thoughts on where I am going wrong?

This link provides some insight: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory

Seems like there could be some issues with importing from outside the src directory, but the file paths in helpers/avatarArray.js work...

[yingsongsana]

@GMorse19 I wonder if it has to do with the fact that you're not actually importing them as img elements. How are you exporting the images? Is it:

export const Smileys = [
     'Smileys/smiley1.svg',
     'Smileys/smiley2.svg'
]

?

[yingsongsana]

Sorry if above wasn't clear... you'd be creating an array of smileys in a separate file adjacent to HappySlider.js, using the images from the public folder. And importing them into HappySlider.js as Smileys.

[GMorse19]

Yes. That is how I'm exporting them.

export const smileys = ['', smiley1, smiley2, smiley3, smiley4, smiley5]

When I move the entire 'Smileys' folder to the public folder and change the paths to

import smiley1 from 'Smileys/smiley1.svg'

I get this error message.

./src/components/HappySlider/smileys.js
Module not found: Can't resolve 'Smileys/smiley1.svg' in '/Users/jenn/project-five/maps/src/components/HappySlider'

For some reason it is still looking for the files inside src/components/HappySlider.

[GMorse19]

I tried this also

import smiley1 from '/../../public/Smileys/smiley1.svg'

And I get this error

./src/components/HappySlider/smileys.js
Module not found: You attempted to import /../../public/Smileys/smiley1.svg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Seems to not want to go outside the src directory.

This link discusses it some: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory

It seems to say that it would be better to leave the images in the component or at least inside the src directory.

What I don't understand is how do the Avatar images work, but not these? The only difference I can see is that the smileys are being imported as variables.

[yingsongsana]

@GMorse19 try exporting from smileys.js as

export const smileys = [
     '',
     'Smileys/smiley1.svg',
     'Smileys/smiley2.svg'
]

then inside HappySlider.js import with import { smileys } from './smileys'

[yingsongsana]

Make sure your upppercase/lowercase is consistent since you have Smileys as a folder in public as well as smileys.js file. Alternatively, you could rename some of the things to keep it less confusing for you.

[GMorse19]

Problem with that is we need to import the images into variables in order for the CSS variables to work.

`url(${smileys[rounded]})`)

This bit here in line 16 needs to be passed a variable. The relative path will not work.

You can see my Stackoverflow question on this here: https://stackoverflow.com/questions/62804992/im-having-trouble-using-setproperty-to-set-css-variable-for-background-image

Everything is working as far as spelling etc. It's only when we move the image folder to public that things seem to go haywire.

[yingsongsana]

@GMorse19 I got it to work locally.... try removing the entire :root property inside the scss file. That was where it couldn't resolve the path/module

[GMorse19]

Ok. Interesting. I'll give it a shot.

[GMorse19]

Can you push your branch up? It doesn't work for me.

Edit: It's working! I had to remove the import files! Awesome job. Thanks. This wasn't making any sense to me, but now I see that the imports were unnecessary since smileys is coming in as an array and we only need to access the index. Beautiful!

[yingsongsana]

@GMorse19 nice! Time to take a break. You've probably been staring at it all for too long :)