These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Oct 2018
Fernando
@lestairon
Oct 06 2018 00:10
@AJ-Brommy I mean at the moment the container is working as intended.
The only thing are the divs
Fsalker
@Fsalker
Oct 06 2018 06:21
yo
any idea how to catch this rejected promise?
    let x = (await new Promise( (async(resolve, reject) => {
        throw "abcdef"
    })))
alpox
@alpox
Oct 06 2018 06:33
@Fsalker put a try/catch clause around the whole thing
@Fsalker btw. You have two lairs of parens which are not needed
Fsalker
@Fsalker
Oct 06 2018 06:33
yep ikr
i've fixed that in the mea time
i'll try with try catch
try{
    let x = new Promise((resolve, reject) => {
        throw "abcdef"
    })
}
catch(e){
    console.log(e)
}
ah damn
(node:10048) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): abcdef
uh... what i meant is that i fixed the two pairs of parens
but i haven't figured out how to handle the rejection :(
alpox
@alpox
Oct 06 2018 06:38
You removed the await too :D that should still be there
Fsalker
@Fsalker
Oct 06 2018 06:39
oh damn
i was experimenting with something
try{
    let x = new Promise(async(resolve, reject) => {
        throw "abcdef"
    })
}
catch(e){
    console.log(e)
}
no luck
alpox
@alpox
Oct 06 2018 06:47
The async there is not needed
But an await in front of new is
Fsalker
@Fsalker
Oct 06 2018 06:47
i don't think so
the whole function's a simplification of a broader function that actually uses await inside of it :p
and i can't use await in the global scope anyway
i'm beginning to get it
throw cannot really be used inside of async functions
reject works
Fsalker
@Fsalker
Oct 06 2018 07:10
yep, just had to reject it hehe
Brad
@bradtaniguchi
Oct 06 2018 07:33
Why does that code have a promise and async await, seems odd
Aditya
@ezioda004
Oct 06 2018 07:37
@bradtaniguchi async-await is sugarcoat for promises :D
alpox
@alpox
Oct 06 2018 07:41
@Fsalker
async function example() {
  try {
    let x = await new Promise((resolve, reject) => {
       throw "abcd"
    })
  }
  catch (e) {
    console.log(e)
  }
}

example();
tightcode
@tightcode
Oct 06 2018 10:04
Seeking frontend code review
ehutchllew
@ehutchllew
Oct 06 2018 12:38
@tightcode okay, can you link?
@alpox I could be wrong, but if the promise gets rejected, wouldn't await throw an error. So try/catch isn't needed? Again, I'm not 100% certain.
gadzet
@gadzet
Oct 06 2018 12:56
anyone could help me with promises in typescript

I have a class funtion which sets some data but returns string

    public fetchStocksData() : Promise<string> {
        return new Promise((resolve) => {
            this._stocksDataPromise
                .then(dataSet => {
                    resolve('Success!');
                    this.setSMAData(this._getSimpleMovingAverage(dataSet));
                    this.setStocksData(dataSet);
                })
        });
    }

In antother class i fetch the data and try do get set values

        this._stocks = new CStocks();
        const self = this;
        this._stocks.fetchStocksData().then((rez) => {
            console.log('rez', rez);
            console.log('sda',self._stocks.getStocksData());
            console.log('sda',self._stocks.getSMAData());

2nd and 3rd console log always returns the setSMAData if i change order in the promise function it returns the first set data, i don't get it... can anyone explain whats happening ?

ehutchllew
@ehutchllew
Oct 06 2018 13:03
@gadzet so if you change order in fetchStockData it returns getStocksData for 2nd and 3rd log?
gadzet
@gadzet
Oct 06 2018 13:03
correct
private setStocksData(stocksData) {
        this._stocksData = this._formatStockData(stocksData);
    }
    private setSMAData(simpleMovingAverageData) {
        this._simpleMovingAverageData = this._formatStockData(simpleMovingAverageData);
    }
this._stocksData and this._simpleMovingAverageData are getting the same value if i console log this
does it give you any thoughts @ehutchllew ?
ehutchllew
@ehutchllew
Oct 06 2018 13:06
what does your getSimpleMovingAverage look like?
gadzet
@gadzet
Oct 06 2018 13:06
private _getSimpleMovingAverage(stocksData: []): IStock[] {
        // todo get simple avg for each
        // step =1 
        // range = 20
        let range = 20;
        return stocksData.map((stockData: IStock, index): IStock => {
            const stockInterval: number[] =  stocksData.slice(index, (range+index))
                .map((stock: IStock) => (stock.last));

            stockData.last = this._calculateAverage(stockInterval);
            return stockData;
        });        
    }
    private _formatStockData(stocskDataSet: []): IChartData[] {
        return stocskDataSet.map((item: IStock) => {
            return {
                x: (new Date(item.date)).toISOString(),
                y: item.last
            };
        });
    }
ehutchllew
@ehutchllew
Oct 06 2018 13:10
okay so
i think you might be altering the object referenced in memory
gadzet
@gadzet
Oct 06 2018 13:11
ok, go on :)
ehutchllew
@ehutchllew
Oct 06 2018 13:11
hmm
one sec
can you give me an example of what the dataset looks like?
gadzet
@gadzet
Oct 06 2018 13:15
[
    {
        "date": "2014-01-02",
        "last": 146.9
    },
    {
        "date": "2014-01-03",
        "last": 146.5
    },
    {
        "date": "2014-01-06",
        "last": 146.4
    },
    {
        "date": "2014-01-07",
        "last": 147.7
    },
    {
        "date": "2014-01-08",
        "last": 148.6
    },
    {
        "date": "2014-01-09",
        "last": 148.2
    },
    {
        "date": "2014-01-10",
        "last": 152
    },
]
it suddenly started working :O
ehutchllew
@ehutchllew
Oct 06 2018 13:18
is it consistently working?
gadzet
@gadzet
Oct 06 2018 13:19
yes i tried changing my code back
but it is intresting problem :) thanks anyway @ehutchllew
ehutchllew
@ehutchllew
Oct 06 2018 13:20
also try doing this
private _getSimpleMovingAverage(stocksData: []): IStock[] {
        // todo get simple avg for each
        // step =1 
        // range = 20
        let range = 20;
        return stocksData.map((stockData: IStock, index): IStock => {
            const stockInterval: number[] =  stocksData.slice(index, (range+index))
                .map((stock: IStock) => (stock.last));

            return {...stockData, last: this._calculateAverage(stockInterval)};
        });        
    }
gadzet
@gadzet
Oct 06 2018 13:20
yeah looks much nicer thank you @ehutchllew
ehutchllew
@ehutchllew
Oct 06 2018 13:21
well here you're also shallow cloning the stockData object. instead of manipulating it directly
which can cause issues, as it alters your original data set.
gadzet
@gadzet
Oct 06 2018 13:21
stocksData or stockData ?
ehutchllew
@ehutchllew
Oct 06 2018 13:22
well both reallyh, stocksData holds all the stockData, but altering stockData directly will change that index in stocksData/dataset
because they're objects.
gadzet
@gadzet
Oct 06 2018 13:22
ok, what would be right implementation ?
ehutchllew
@ehutchllew
Oct 06 2018 13:22
in JS, it's a good idea to "clone" arguments
gadzet
@gadzet
Oct 06 2018 13:22
define new constant ?
ehutchllew
@ehutchllew
Oct 06 2018 13:23

so instead of doing something like:

function someFunc(args){
    args.last = 1;
    return args;
}

You want to do this:

function someFunc(args){
    return {...args, last: 1}
}
soo in the first one, you are changing the object/array that gets passed into someFun, whereas in the 2nd example, you're cloning it (creating a new reference in memory) and returning the clone, so it doesn't alter args at all.
So if you define a new const you need to do const newObj = {...oldObj} and not just const newObj = oldObj //any changes to newObj or oldObj this way changes both at the same time, DATA ISSUES
things get a bit more complicated if you have arguments that have nested objects, then you need some recursive function to traverse the oobject tree and manually clone them, but for your case, the spread operator ... // this thing is enough.
gadzet
@gadzet
Oct 06 2018 13:26
ok so basically i should always return new object ?
ehutchllew
@ehutchllew
Oct 06 2018 13:27
yes
gadzet
@gadzet
Oct 06 2018 13:27
that was valuable tip thanks alot!
ehutchllew
@ehutchllew
Oct 06 2018 13:27
except for setters really, they're generally there to alter an existing object.
no problem.
gadzet
@gadzet
Oct 06 2018 13:29
do you think my structure is fine ?
ehutchllew
@ehutchllew
Oct 06 2018 13:32
yeah, fetchStocksData looks a bit funky
like would it be possible to just return stocksDatapromise directly?
instead of having a nested promise
gadzet
@gadzet
Oct 06 2018 13:33
haha, i wanted it to remain in the class so i could called the setter methods inside it
i think it would be a bad practice to call setters from another class
is there other way ?
ehutchllew
@ehutchllew
Oct 06 2018 13:35
what if you just returned stocksDataPromise inside of fetchStocksData instead of wrappign it with a Promise? Would that work?
gadzet
@gadzet
Oct 06 2018 13:36
where would i do this then ?
this.setStocksData(dataSet);
this.setSMAData(this._getSimpleMovingAverage(dataSet));
ehutchllew
@ehutchllew
Oct 06 2018 13:37
try:
public fetchStocksData() : Promise<string> {
         return   this._stocksDataPromise
                .then(dataSet => {
                    resolve('Success!');
                    this.setSMAData(this._getSimpleMovingAverage(dataSet));
                    this.setStocksData(dataSet);
                })
    }
also, i'm pretty sure when you call fetchstocksdata, you don't need to define const self = this; You're using an arrow function callback, if you were using a normal function you would need to do it though.
alpox
@alpox
Oct 06 2018 13:39
@ehutchllew yes await throws an error if the promise gets rejected - the promise gets rejected here by throwing inside of it. try/catch is needed for the example to show how one can catch the promise rejection in async/await and do something with the error.
ehutchllew
@ehutchllew
Oct 06 2018 13:39
gotcha
gadzet
@gadzet
Oct 06 2018 13:41
Type 'Promise<void>' is not assignable to type 'Promise<string>'.
  Type 'void' is not assignable to type 'string'.
which one is the void here
:D
ehutchllew
@ehutchllew
Oct 06 2018 13:41
okay yeah you'd need to change it to void i think
because you're not actually returning anything in that promise
gadzet
@gadzet
Oct 06 2018 13:42
and remove resolve then
?
ehutchllew
@ehutchllew
Oct 06 2018 13:42
yeah
gadzet
@gadzet
Oct 06 2018 13:43
but then i can't use try catch
ehutchllew
@ehutchllew
Oct 06 2018 13:43
are you referring to the .then() after stocksDataPromise?
gadzet
@gadzet
Oct 06 2018 13:46
    public fetchStocksData() : Promise<void> {
        const self = this;
        return this._stocksDataPromise
               .then(dataSet  => {
                   console.log('dataset',dataSet);
                   self.setSMAData(self._getSimpleMovingAverage(dataSet));
                   self.setStocksData(dataSet);
                   }).catch(err => {
                    throw new Error('DataSet not found', err);
                });
   }
good ?
ehutchllew
@ehutchllew
Oct 06 2018 13:48
yeah try that, also pretty sure you don't need const self = this;
but try it out and let me know if it works or not.
gadzet
@gadzet
Oct 06 2018 13:49
yup works fine
good stuff
first time using TS, really liking it
ehutchllew
@ehutchllew
Oct 06 2018 13:51
TS is nice, for sure! I'm still a noob at it myself.
anyway I'm out, peace!
gadzet
@gadzet
Oct 06 2018 13:51
ty, peace
Mohammed Boudad
@matrixersp
Oct 06 2018 14:33
Hey guys, I got stuck in this challenge https://learn.freecodecamp.org/front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering/
It looks a bit vague for me, can someone help me to better understand it?
gadzet
@gadzet
Oct 06 2018 14:48
@matrixersp ternary operator is an if statement basically with an assiment to variable
const isGreater = (1>0) ? true : false;
is same as
let isGreater;
if(1>0) {
  isGreater= true;
} else {
  isgreater=false;
}
Mohammed Boudad
@matrixersp
Oct 06 2018 14:56
@gadzet Thanks, yeh I understand the ternary operator
I figured it out, the problem is comparing a string to a number
Christopher
@bradley1492
Oct 06 2018 15:03

@X140hu4 Thx for the tips with specificty regarding bootstrap. I heard about specificity in connection with bs4 getting sort of complicated, but I didn't yet sort of run into it.

I guess now is the time for further research. .. :)

Christopher
@bradley1492
Oct 06 2018 15:59

Good evening,
I have another bootstrap question.

How could I give an element a border, which has a width of the whole container in which it sits, and not the elements width.

Do I have to change the width of the border in css here myself?

Because in the following pen the border only spans the width of the element in which it sits in..

https://codepen.io/bradley1492/pen/WaGMpm?editors=1000

Aita Kane
@aita-kane
Oct 06 2018 18:43
Hello I have a project to submit at October 23rd (php framework) . Our teacher taught us the CodeIgniter framework and for the exam we have to use a different one . So I was wondering which framework will be easy to understand like CodeIgniter . Do you think that I can understand Laravel in this short term? Thank for all advices
Raghav Mundra
@Raghav17
Oct 06 2018 19:19
How can I center these columns?
image.png
Nicolas Ramirez
@kamatheuska
Oct 06 2018 20:36
flexbox?
div.container {
  display: flex;
  justify-content: space-between;
}
@Raghav17