Skip to content

Instantly share code, notes, and snippets.

import * as faker from 'faker'
import gql from 'graphql-tag'
import _ from 'lodash'
import { SingletonRouter, useRouter } from 'next/router'
import pluralize from 'pluralize'
import React, { useEffect, useRef, useState } from 'react'
import { useForm } from 'react-hook-form'
import Select from 'react-select'
import {
Form,
@SvitlanaShepitsena
SvitlanaShepitsena / ProductList.tsx
Created January 20, 2020 17:41
ProductList Implemented with React, apollo hooks and graphql code generator
import moment from 'moment'
import Link from 'next/link'
import React, { useState } from 'react'
import { Button, Icon, Input, Label, Loader, Table } from 'semantic-ui-react'
import styled from 'styled-components'
import { useProductsQuery } from '../../generated/apollo-components'
const ProductsList = () => {
const [state, setState] = useState({
column: 'createdAt',
@SvitlanaShepitsena
SvitlanaShepitsena / ProductForm.tsx
Created January 20, 2020 17:39
ProductForm written with React hooks, using apollo hooks and graphql codegenerator
import * as faker from 'faker'
import gql from 'graphql-tag'
import { SingletonRouter, useRouter } from 'next/router'
import pluralize from 'pluralize'
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import Select from 'react-select'
import {
Form,
Grid,
import * as faker from 'faker'
import { SingletonRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import Select from 'react-select'
import {
Form,
Grid,
Message,
Segment,
@SvitlanaShepitsena
SvitlanaShepitsena / PostForm.js
Created January 9, 2020 12:51
PostForm created with RenderProps Approach
import React, { Component, createRef } from 'react'
import styled from 'styled-components'
import CKeditor from 'react-ckeditor-component'
import { withRouter } from 'next/router'
import { SortableContainer, arrayMove } from 'react-sortable-hoc'
import { Mutation, Query } from 'react-apollo'
import axios from 'axios'
import CancelSubmitButtons from '../../common/buttons/CancelSubmitButtons'
import RemoveButton from '../../common/buttons/RemoveButton'
import * as faker from 'faker'
import Select from 'react-select'
require('dotenv').config()
import React, { useState, useEffect, FormEvent } from 'react'
import * as yup from 'yup'
import CancelSubmitButtons from '../../common/buttons/CancelSubmitButtons'
const ProductSchema = yup.object().shape({
{"lastUpload":"2019-10-14T20:40:42.002Z","extensionVersion":"v3.4.3"}
@SvitlanaShepitsena
SvitlanaShepitsena / withWidth2.js
Created December 23, 2016 02:15
width customized
import React, {Component} from "react";
import EventListener from "react-event-listener";
export const X_SMALL = 1;
export const SMALL = 2;
export const H_SMALL = 3;
export const MEDIUM = 4;
export const X_MEDIUM = 5;
export const LARGE = 6;
import React, {PropTypes} from 'react';
import Radium from 'radium';
import muiTheme from '../../../../../../../../../configuration/webapp/muiTheme.js';
class SearchCard_Classic_Header extends React.Component {
static propTypes = {
customHeaderStyle: PropTypes.object,
danger: PropTypes.bool,
primary: PropTypes.bool,
};
@SvitlanaShepitsena
SvitlanaShepitsena / SearchCard_Classic.js
Created December 22, 2016 23:55
React 'Card' with borders
import React, {PropTypes} from 'react';
import Radium from 'radium';
import muiTheme from '../../../../../../../../../configuration/webapp/muiTheme.js';
class SearchCard_Classic extends React.Component {
static propTypes = {
borderRadius: PropTypes.number,
danger: PropTypes.bool,
primary: PropTypes.bool,
};