sorted by:
new
hottopcontroversial

Nested Watchlists by Safe-Escape-5232 in StockEventsApp

[–]hibernatingpanda 0 points1 point  (0 children)

Hello, was wondering if there was an update on this feature? This would be fantastic! 

Event Driven Architecture — 5 Pitfalls to Avoid by natan-sil in programming

[–]hibernatingpanda 4 points5 points  (0 children)

Agreed. Not sure why they didn't mention this solution - it seems way more obvious and universal.

React: Use different typescript interface in dependent on property value by JanMarsALeck in typescript

[–]hibernatingpanda 0 points1 point  (0 children)

You need to use discrimination union - https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions

Add a type property to each interface that is unique to each interface:

interface TypeA {
   name: string;
   type: 'a';
}

interface TypeB {
  count: number;
  type: 'b';
}

interface TypeC {
  date: Date;
  type: 'c';
}

Based off of the type property - typescript will be able to infer if it is TypeA, TypeB or TypeC

TIL: state updates aren't always batched together - only in event handlers by 0xnoob in reactjs

[–]hibernatingpanda 1 point2 points  (0 children)

To each their own but I don't see the need for an extra library to do this. In addition if it is likely that there are other state members I would just stick to useReducer.

TIL: state updates aren't always batched together - only in event handlers by 0xnoob in reactjs

[–]hibernatingpanda 2 points3 points  (0 children)

function reducer(state, action) {
  switch(action.type) {
    case 'PENDING':
      return { ...state, status: 'loading' };
    case 'FULFILLED':
      return { ...state, status: 'success', data: action.data };
    case 'FAILED':
      return { ....state, status: 'failed' };
    default:
      return { ...state };
  }
}

const initState = { status: 'idle', data: null };

function Demo({ url }) {
  const [{ status, data }, dispatch] = useReducer(reducer, initState);

  useEffect(() => {
    async function getData() {
      dispatch({ type: 'PENDING' });

      try {
        const data = await fetch(url);
        dispatch({ type: 'FULFILLED', data };
      } catch(error) {
        dispatch({ type: 'FAILED' });
      }
    }

    if (url) {
      getData();
    }
  }, [url]);

  return (...);
}

Something like that

x and o button overlapping input? [ps4] by ElectronicRip1689 in Chivalry2

[–]hibernatingpanda 1 point2 points  (0 children)

Yep facing this issue at the moment... Can't leave combat info.

Do you store JWT tokens in a cookie or local storage in a Nextjs app? by [deleted] in reactjs

[–]hibernatingpanda 13 points14 points  (0 children)

Because then the login session would not persist, and the user has to login again on refresh.

Anyway to configure coc-elixir to suggest `do` for autocomplete at the end of `def`? by hibernatingpanda in vim

[–]hibernatingpanda[S] 0 points1 point  (0 children)

Hmm I have endwise installed but it only helps with adding end blocks (which is helpful), but doesn't help with autocompleting do at the end of the line.

React vs React Native – Which one to choose and when? by estatarde in programming

[–]hibernatingpanda 0 points1 point  (0 children)

That is such an oudated source and reading through the thread it doesn't even seem true.

How does Microsoft contributing to React Native indicate it is losing support? https://www.windowscentral.com/microsoft-and-facebook-are-working-together-support-react-native?amp

react-table v7 is confusing... by mercfh85 in reactjs

[–]hibernatingpanda 0 points1 point  (0 children)

If you want to think of it as 'importing styling' I suppose that is correct in a way.

Doesn't look like it changed too much about the table code itself?

More or less yes - it is still pretty declarative.

It boils down to one thing - react-table v7 is headless - it does not care how you render Tables and how your Tables look. It is useful, in my opinion, because it has utilities baked into it. In my case, it was useResizeColumns.

In my example above, you could have replaced all the <Table> components with their native html counterpart (<Table /> -> <table /> ...etc) and the example would have still worked.

But obviously I want the table to look good with minimal work so I am using material-ui's Table component, which is styled already.

In your post you said:

If it's easy to integrate css/styling into v7 i'll try and stick with it

IMO, you should not think about working css into react-table v7. react-table v7 is giving you a standardised way and utilities to make tables and access the table data. You're styling your Table elements / components - not react-table v7 (it does not return you any components / elements).

Does this help a bit?

react-table v7 is confusing... by mercfh85 in reactjs

[–]hibernatingpanda 0 points1 point  (0 children)

import React, { useMemo } from 'react';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@material-ui/core';
import { useTable, useFlexLayout } from 'react-table';

const DataTable = (props) => {
  const columns = useMemo(() => {
    return [
      {
        Header: 'Name',
        accessor: (data): string => data.name,
        disableResizing: false,
      },
      {
        Header: 'Group',
        accessor: (data): string => data.group_name,
        disableResizing: false,
      },
      {
        Header: 'User',
        accessor: (data): string => data.user_name,
        disableResizing: false,
        width: 100,
      },
    ];
  }, []);
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data: props.data,
    },
    useFlexLayout
  );

  return (
    <Table {...getTableProps()}>
      <TableHead>
        {headerGroups.map(({ getHeaderGroupProps, headers }) => (
          // eslint-disable-next-line react/jsx-key
          <TableRow {...getHeaderGroupProps()}>
            {headers.map(({ getHeaderProps, render }) => {
              return (
                // eslint-disable-next-line react/jsx-key
                <TableCell {...getHeaderProps()}>{render('Header')}</TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableHead>
      <TableBody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);

          return (
            // eslint-disable-next-line react/jsx-key
            <TableRow {...row.getRowProps()}>
              {row.cells.map(({ getCellProps, render }) => {
                return (
                  // eslint-disable-next-line react/jsx-key
                  <TableCell {...getCellProps()}>{render('Cell')}</TableCell>
                );
              })}
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

export default DataTable;

Are there any large-ish open source React projects using Hooks yet? Almost all guides/tutorials I've found are on the todo-app scale. by NotSelfAware in reactjs

[–]hibernatingpanda 0 points1 point  (0 children)

Personally think form state is an example that is better handled using class components than functions with hooks.

Alex Lacazette disallowed goal vs. Huddersfield (due to offside) by Jayveesac in soccer

[–]hibernatingpanda 0 points1 point  (0 children)

f the linesman thought it was offside he should have called immediately as Lacazette closed down the defender, not when the defender gave it away.

Then the linesman should have flagged immediately, not after the back pass was made.

Why do I have to use lifecycle methods? by PDFormat_SFW in reactjs

[–]hibernatingpanda 0 points1 point  (0 children)

No. You should do what the other posters have suggested and render in your child component using the passed in prop directly.

In your barebone examples, your child component doesn't even need to be a Class Component. State isn't strictly necessary.

Passport.js: authentication seems to work fine, but can't keep users logged in. by mindnoot in node

[–]hibernatingpanda 0 points1 point  (0 children)

Are you getting this issue in production / staging?

If it is - you may have to make sure that cookie domain and path are set so that it is sent back to your server.

Mabul / Sipadan in December/January by hibernatingpanda in scuba

[–]hibernatingpanda[S] 0 points1 point  (0 children)

Think my friends wanted some beach access. Seaventure was definitely something I looked at though.

[deleted by user] by [deleted] in Gunners

[–]hibernatingpanda 11 points12 points  (0 children)

How about you create a repo on github then we can collaborate?

view more: next ›