Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Obuladike Chisom obulaworld

🏠
Working from home
View GitHub Profile
@obulaworld
obulaworld / solution.jsx
Last active Sep 7, 2020
Solution to the dropdown problem
View solution.jsx
/*
Prompt:
We have defined a basic dropdown via the Dropdown and DropdownItem components below, with example usage in the ExampleNav component.
The Dropdown and DropdownItem components have some problems, and also have room for improvements.
Please fix any obvious bugs you see with the dropdown, and explain your reasoning.
Please then describe some improvements you would make to the dropdown, and how you would implement them.
Consider the different contexts in which you might use this dropdown and what changes might be neccessary to make it more flexible.
Follow up question: if we wanted to sync this dropdown selection to the server with app.sync('PATCH', 'user', { dropdown_1_state: {true,false} }) where would this be included
View Mock_data.js
export const stageMockData = {
stages: [
{
id: 'requested',
title: 'Requested',
className: 'requestedCount',
cardData: [
{
id: 1,
title: 'Flow Meter Measurement E',
View Card.css
hr {
height: 1px;
background-color: #f2f2f2;
border: none;
}
.cardTitle ~ .ellipsis {
margin-right: 0;
}
View Stage.css
.stage {
width: 20rem;
display: flex;
height: 43.25rem;
flex-direction: column;
overflow: scroll;
padding-bottom: 1.5rem;
align-items: center;
border: 1px solid #dce1e4;
position: relative;
@obulaworld
obulaworld / Board.jsx
Created Sep 4, 2020
Board component for the kanban scrum project
View Board.jsx
import React, { useCallback, useState } from 'react';
import ToolBar from '../ToolBar/ToolBar';
import Stage from '../Stage/Stage';
import { stageMockData } from '../../__mock_data/StageMockData';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { array_move, array_insert } from '../../utils/utils';
import './Board.css';
function Board() {
const [board, setBoard] = useState({ ...stageMockData });
@obulaworld
obulaworld / Stage.jsx
Created Sep 4, 2020
Stage component for the kanban scrum board project
View Stage.jsx
import React from 'react';
import { ToggleLayer } from 'react-laag';
import Card from '../Card/Card';
import { Draggable } from 'react-beautiful-dnd';
import './Stage.css';
import ellipsis from '../../assets/ellipsis.svg';
import mark from '../../assets/mark.svg';
import star from '../../assets/star.svg';
function Stage(props) {
@obulaworld
obulaworld / Card.jsx
Created Sep 4, 2020
Card component for the kanban scrum project
View Card.jsx
import React from 'react';
import cardTypeIcon from '../../assets/cardTypeIcon.svg';
import dateIcon from '../../assets/dateIcon.svg';
import './Card.css';
function Card(props) {
const {
title,
description,
tag,
You can’t perform that action at this time.