Sprint-3 profile page layout

e-commerce-app/src/components/AddressItem/AddressItem.tsx

@@ -0,0 +1,76 @@
+import { FC } from 'react';
+import { Typography, Box, Paper, IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import type { Board } from '../../pages/UserPage/UserForm2';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+interface addressItemProps {
+  todo: Board;
+  onDeleteAddr: (id: Board['id']) => void;
+  onCheckAddr: (id: Board['id']) => void;
+  onEdit: (id: Board['id']) => void;
+}
+
+export const AddressItem: FC<addressItemProps> = ({ todo, onDeleteAddr, onCheckAddr, onEdit }) => (
+  <Paper
+    elevation={1}
+    sx={{
+      marginBottom: '5px',
+      width: '100%',
+      padding: '5px 10px',
+      borderRadius: 1,
+      gap: 1,
+      opacity: todo.checked ? 0.5 : 1,
+    }}
+  >
+    <Box textAlign="left">
+      <Typography
+        onClick={() => onCheckAddr(todo.id)}
+        sx={{ cursor: 'pointer', textDecorationLine: todo.checked ? 'line-through' : 'none' }}
+        variant="h6"
+        component="h6"
+        gutterBottom
+      >
+        {todo.name}
+      </Typography>
+    </Box>
+    <Box display="flex" textAlign="left">
+      <Typography variant="subtitle1" component="div" gutterBottom>
+        {todo.street}, {todo.city}, {todo.country}, {todo.postcode}
+      </Typography>
+    </Box>
+    <Box display="flex" justifyContent="flex-end">
+      <FormControlLabel
+        sx={{ mr: '25px' }}
+        value="end"
+        control={<Checkbox />}
+        label={
+          <Box component="div" fontSize={10}>
+            default shipping address
+          </Box>
+        }
+        labelPlacement="end"
+      />
+      <FormControlLabel
+        sx={{ mr: '25px' }}
+        value="end"
+        control={<Checkbox />}
+        label={
+          <Box component="div" fontSize={10}>
+            default billing address
+          </Box>
+        }
+        labelPlacement="end"
+      />
+
+      <IconButton onClick={() => onEdit(todo.id)} color="primary" aria-label="edit">
+        <EditIcon />
+      </IconButton>
+      <IconButton onClick={() => onDeleteAddr(todo.id)} color="error" aria-label="delete">
+        <DeleteIcon />
+      </IconButton>
+    </Box>
+  </Paper>
+);

e-commerce-app/src/components/AddressList/AddressList.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { Box } from '@mui/material';
+import { AddressItem } from '../AddressItem/AddressItem';
+import type { Board } from '../../pages/UserPage/UserForm2';
+import { AddressPanel } from '../Panel/Panel';
+
+interface TodoListProps {
+  editTodoId: Board['id'] | null;
+  todoList: Board[];
+  onDeleteAddr: (id: Board['id']) => void;
+  onCheckAddr: (id: Board['id']) => void;
+  onEdit: (id: Board['id']) => void;
+  onChangeAddr: ({ name, street, city, country, postcode }: Omit<Board, 'id' | 'checked'>) => void;
+}
+
+export const BoardList: FC<TodoListProps> = ({
+  todoList,
+  editTodoId,
+  onChangeAddr,
+  onDeleteAddr,
+  onCheckAddr,
+  onEdit,
+}) => (
+  <Box>
+    {todoList.map((todo) => {
+      if (todo.id === editTodoId)
+        return <AddressPanel mode="edit" onChangeAddr={onChangeAddr} editTodo={todo} />;
+      return (
+        <AddressItem
+          key={todo.id}
+          todo={todo}
+          onDeleteAddr={onDeleteAddr}
+          onCheckAddr={onCheckAddr}
+          onEdit={onEdit}
+        />
+      );
+    })}
+  </Box>
+);

e-commerce-app/src/components/Panel/Panel.tsx

@@ -0,0 +1,97 @@
+import { FC, useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import { TextField, Paper, Button, Box, Grid } from '@mui/material';
+import type { Board } from '../../pages/UserPage/UserForm2';
+
+const DEFAULT_TODO = { name: '', street: '', city: '', country: '', postcode: '' };
+
+interface AddBoardPanelProps {
+  mode: 'add';
+  onAddAddress: ({ name, street, city, country, postcode }: Omit<Board, 'id' | 'checked'>) => void;
+}
+
+interface EditBoardPanelProps {
+  mode: 'edit';
+  editTodo: Omit<Board, 'id' | 'checked'>;
+  onChangeAddr: ({ name, street, city, country, postcode }: Omit<Board, 'id' | 'checked'>) => void;
+}
+
+type PanelProps = AddBoardPanelProps | EditBoardPanelProps;
+
+export const AddressPanel: FC<PanelProps> = (props) => {
+  const isEdit = props.mode === 'edit';
+  const [todo, setTodo] = useState(isEdit ? props.editTodo : DEFAULT_TODO);
+
+  const onClick = () => {
+    if (isEdit) {
+      return props.onChangeAddr(todo);
+    }
+    props.onAddAddress(todo);
+    setTodo(DEFAULT_TODO);
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value, name } = event.target;
+    setTodo({ ...todo, [name]: value });
+  };
+
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        marginBottom: '10px',
+        width: '100%',
+        padding: '10px 15px',
+        borderRadius: 1,
+        gap: 2,
+      }}
+    >
+      <Grid container spacing={1}>
+        <Grid item xs={12}>
+          <TextField
+            value={todo.name}
+            onChange={onChange}
+            name="name"
+            label="Address name"
+            fullWidth
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            value={todo.street}
+            onChange={onChange}
+            name="street"
+            label="street"
+            fullWidth
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField value={todo.city} onChange={onChange} name="city" label="city" fullWidth />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            value={todo.country}
+            onChange={onChange}
+            name="country"
+            label="country"
+            fullWidth
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            value={todo.postcode}
+            onChange={onChange}
+            name="postcode"
+            label="postcode"
+            fullWidth
+          />
+        </Grid>
+      </Grid>
+      <Box textAlign="right" marginTop={2}>
+        <Button startIcon={<AddIcon />} variant="outlined" onClick={onClick}>
+          {isEdit ? 'EDIT' : 'ADD'}
+        </Button>
+      </Box>
+    </Paper>
+  );
+};

e-commerce-app/src/pages/UserPage/UserForm1.tsx

@@ -0,0 +1,55 @@
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import { FC } from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import EditIcon from '@mui/icons-material/Edit';
+
+export const UserForm1: FC = () => {
+  return (
+    <Box sx={{ width: 450, margin: '0 auto' }}>
+      <Grid item xs={12} mt={2} sx={{ display: 'flex' }}>
+        <TextField fullWidth label="First Name" autoComplete="off" />
+        <Button>
+          <EditIcon />
+        </Button>
+      </Grid>
+      <Grid item xs={12} mt={2} sx={{ display: 'flex' }}>
+        <TextField fullWidth label="Last Name" autoComplete="off" />
+        <Button>
+          <EditIcon />
+        </Button>
+      </Grid>
+      <Grid item xs={12} mt={2} sx={{ display: 'flex' }}>
+        <TextField fullWidth type="date" label="Date of birth" autoComplete="off" />
+        <Button>
+          <EditIcon />
+        </Button>
+      </Grid>
+      <Grid item xs={12} mt={2} sx={{ display: 'flex' }}>
+        <TextField fullWidth label="Email" type="text" autoComplete="off" />
+        <Button>
+          <EditIcon />
+        </Button>
+      </Grid>
+      <Box sx={{ width: '100%', display: 'flex', pt: 4, gap: '30%' }}>
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          sx={{ backgroundColor: 'mediumaquamarine', color: 'black' }}
+        >
+          Update
+        </Button>
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          sx={{ backgroundColor: 'beige', color: 'black' }}
+        >
+          Cancel
+        </Button>
+      </Box>
+    </Box>
+  );
+};

e-commerce-app/src/pages/UserPage/UserForm2.tsx

@@ -0,0 +1,126 @@
+import { FC, useState } from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import { AddressPanel } from '../../components/Panel/Panel';
+import { BoardList } from '../../components/AddressList/AddressList';
+
+export type Board = {
+  id: number;
+  name: string;
+  street: string;
+  city: string;
+  country: string;
+  postcode: string;
+  checked: boolean;
+};
+
+const DEFAULT_TODO_LIST = [
+  {
+    id: 1,
+    name: 'Address 1',
+    street: 'street 1',
+    city: 'city 1',
+    country: 'country 1',
+    postcode: 'code 1',
+    checked: false,
+  },
+];
+
+export const UserForm2: FC = () => {
+  const [editTodoId, setEditTodoId] = useState<number | null>(null);
+  const [todoList, setTodoList] = useState(DEFAULT_TODO_LIST);
+
+  const onEdit = (id: Board['id']) => {
+    setEditTodoId(id);
+  };
+
+  const onDeleteAddr = (id: Board['id']) => {
+    setTodoList(todoList.filter((todo) => todo.id !== id));
+  };
+
+  const onAddAddress = ({
+    name,
+    street,
+    city,
+    country,
+    postcode,
+  }: Omit<Board, 'id' | 'checked'>) => {
+    setTodoList([
+      ...todoList,
+      {
+        id: todoList[todoList.length - 1].id + 1,
+        name,
+        street,
+        city,
+        country,
+        postcode,
+        checked: false,
+      },
+    ]);
+  };
+
+  const onCheckAddr = (id: Board['id']) => {
+    setTodoList(
+      todoList.map((todo) => {
+        if (todo.id === id) {
+          return { ...todo, checked: !todo.checked };
+        }
+        return todo;
+      }),
+    );
+  };
+
+  const onChangeAddr = ({
+    name,
+    street,
+    city,
+    country,
+    postcode,
+  }: Omit<Board, 'id' | 'checked'>) => {
+    setTodoList(
+      todoList.map((todo) => {
+        if (todo.id === editTodoId) {
+          return { ...todo, name, street, city, country, postcode };
+        }
+        return todo;
+      }),
+    );
+    setEditTodoId(null);
+  };
+
+  return (
+    <Box marginTop={5} height="100%" display="flex" justifyContent="center" alignContent="center">
+      <Box display="flex" flexDirection="column" width="500px">
+        <Typography textAlign="center" variant="h5">
+          My Addresses: {todoList.length}
+        </Typography>
+        <BoardList
+          editTodoId={editTodoId}
+          todoList={todoList}
+          onDeleteAddr={onDeleteAddr}
+          onCheckAddr={onCheckAddr}
+          onEdit={onEdit}
+          onChangeAddr={onChangeAddr}
+        />
+        <AddressPanel mode="add" onAddAddress={onAddAddress} />
+        <Box sx={{ width: '100%', display: 'flex', pt: 4, gap: '30%' }}>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ backgroundColor: 'mediumaquamarine', color: 'black' }}
+          >
+            Update
+          </Button>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ backgroundColor: 'beige', color: 'black' }}
+          >
+            Cancel
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+};