zourdyzou

import { renderHook } from '@testing-library/react-hooks';
import { describe, expect, it } from 'vitest';

import { useTreeFormatData } from './useFormatTreeData';

interface DataSample {
  id: string;
  name: string;
  rootGroup: boolean;
  parentGroupId?: string | null;

zourdyzou

import { useMemo, useState } from 'react';

/**
 * A type that extends the generic type T to include a children property.
 */
type TreeNode<T> = T & { [key: string]: any; children?: TreeNode<T>[] };

/**
 * Options for configuring the useTreeFormatData hook.
 *

zourdyzou

import { useEffect, useRef, useState } from 'react';
import * as React from 'react';
import { DragDropContext, DragStart, DropResult } from 'react-beautiful-dnd';
import { useSelector } from 'react-redux';
import AddIcon from '@mui/icons-material/Add';
import ExpandMoreIcon from '@mui/icons-material/ArrowForwardIos';
import DeleteIcon from '@mui/icons-material/Delete';
import DragHandleIcon from '@mui/icons-material/DragHandle';
import ModeEditIcon from '@mui/icons-material/ModeEdit';
import { Box, Button, Grid, IconButton } from '@mui/material';

zourdyzou

import { useState } from 'react';

export type WBSProjectCRUD = {
  id?: string | null;
  name: string;
  reference: string;
  parentReference?: string | null;
  parentWbsId?: string | null;
  projectId?: string | null;
  wbsLevel: number;

zourdyzou

const headCells: GridColDef[] = [
  {
    field: `reference`,
    headerName: `Tool reference`,
    sortable: true,
    minWidth: 270,
    flex: 1,
    renderCell: (params) => {
      return (
        <Tooltip title={params.value}>

zourdyzou

Mock-up link

• To select an element in the mock-up you can click on checkbox of the first line of the table
• To display more information about the group you can click on the first line of the table

Link: https://xd.adobe.com/view/e24cff83-0246-4982-bf63-4d8c0e4556fd-b71f/

Documentation the of the Rest API:

Groups:

zourdyzou

Instructions

1. Write a solutions of the task/problem thoroughly using any approach you comfortable with (readability, queality, efficiency matter ☺️ ).
2. Every task should have some explanation or step process of how you solved the problem/task.
3. After you finish, create a Gist file in your own Github account and put your solution in that file.
4. Send your solutions (link to the Gist file) to [email protected] with "Recruitment Process - Technical Screening [SRD-2023]" as a subject field

⚠️ Use typescript as the primary language for the solutions! https://www.typescriptlang.org/play

Task

zourdyzou

  function sanitizeString(str){
    str = str.replace(/[^a-z0-9áéíóúñü \.,_-]/gim,"");
    return str.trim();
  }

zourdyzou

import { ChangeEvent, FormEvent, useState } from 'react';

interface Validation {
  required?: {
    value: boolean;
    message: string;
  };
  pattern?: {
    value: string;
    message: string;

zourdyzou

import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { useCookies } from 'react-cookie'
import addDays from 'date-fns/addDays'

/**
 * useChangeLocation observes the current `locale` of the page and compares it
 * wit the the `defaultLocale`. If they do not match it updates the user's
 * cookies which will used by Next.js to determine the user's language.
 *