Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3287 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3287 Rev 3432
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect, useState } from "react";
2 
import { axios } from '../../../utils'
 2 
import { axios } from "../../../utils";
3 
import { Link } from 'react-router-dom'
 3 
import { Link } from "react-router-dom";
4 
import { styled } from 'styled-components'
 4 
import { styled } from "styled-components";
5 
import { useSelector } from 'react-redux'
 5 
import { useSelector } from "react-redux";
6 
import IconButton from '@mui/material/IconButton'
 6 
import IconButton from "@mui/material/IconButton";
7 
import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 7 
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
8 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 8 
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
Línea 9... Línea 9...
9 
 
 9 
 
10 
import EmptySection from '../../UI/EmptySection'
 10 
import EmptySection from "../../UI/EmptySection";
Línea 11... Línea 11...
11 
import Avatar from '@components/common/Avatar'
 11 
import Avatar from "@components/common/Avatar";
12 
 
 12 
 
13 
const GroupWidget = styled.div`
 13 
const GroupWidget = styled.div`
14 
  display: flex;
 14 
  display: flex;
15 
  flex-direction: column;
 15 
  flex-direction: column;
Línea 16... Línea 16...
16 
  width: 100%;
 16 
  width: 100%;
17 
`
 17 
`;
18 
 
 18 
 
19 
const WidgetHeader = styled.div`
 19 
const WidgetHeader = styled.div`
Línea 26... Línea 26...
26 
  p {
 26 
  p {
27 
    font-size: 0.9rem;
 27 
    font-size: 0.9rem;
28 
    font-weight: 600;
 28 
    font-weight: 600;
29 
    color: gray;
 29 
    color: gray;
30 
  }
 30 
  }
31 
`
 31 
`;
Línea 32... Línea 32...
32 
 
 32 
 
33 
const WidgetList = styled.ul`
 33 
const WidgetList = styled.ul`
34 
  display: flex;
 34 
  display: flex;
35 
  flex-direction: column;
 35 
  flex-direction: column;
36 
  height: ${(props) => (props.$show ? 'auto' : 0)};
 36 
  height: ${(props) => (props.$show ? "auto" : 0)};
37 
  gap: 0.5rem;
 37 
  gap: 0.5rem;
38 
  overflow: hidden;
 38 
  overflow: hidden;
39 
  transition: all 0.2s ease-in-out;
 39 
  transition: all 0.2s ease-in-out;
Línea 40... Línea 40...
40 
`
 40 
`;
41 
 
 41 
 
42 
const ListItem = styled.li`
 42 
const ListItem = styled.li`
43 
  align-items: center;
 43 
  align-items: center;
Línea 53... Línea 53...
53 
  }
 53 
  }
Línea 54... Línea 54...
54 
 
 54 
 
55 
  &:hover {
 55 
  &:hover {
56 
    background-color: rgba(0, 0, 0, 0.08);
 56 
    background-color: rgba(0, 0, 0, 0.08);
57 
  }
 57 
  }
Línea 58... Línea 58...
58 
`
 58 
`;
59 
 
 59 
 
60 
const GroupsInfo = ({
 60 
const GroupsInfo = ({
61 
  url = '/helpers/my-groups',
 61 
  url = "/helpers/my-groups",
62 
  title = 'Mis grupos',
 62 
  title = "Mis grupos",
63 
  display = false
 63 
  display = false,
64 
}) => {
 64 
}) => {
65 
  const [widgetData, setWidgetData] = useState([])
 65 
  const [widgetData, setWidgetData] = useState([]);
66 
  const [displayMenu, setDisplayMenu] = useState(display)
 66 
  const [displayMenu, setDisplayMenu] = useState(display);
Línea 67... Línea 67...
67 
  const [lookMore, setLookMore] = useState(false)
 67 
  const [lookMore, setLookMore] = useState(false);
68 
  const labels = useSelector(({ intl }) => intl.labels)
 68 
  const labels = useSelector(({ intl }) => intl.labels);
69 
 
 69 
 
70 
  const getData = () => {
 70 
  const getData = () => {
71 
    axios.get(url).then(({ data: response }) => {
 71 
    axios.get(url).then((response) => {
72 
      const { success, data } = response
 72 
      const { success, data } = response.data;
73 
      if (success) {
 73 
      if (success) {
74 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
 74 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse());
Línea 75... Línea 75...
75 
      }
 75 
      }
76 
    })
 76 
    });
77 
  }
 77 
  };
78 
 
 78 
 
79 
  const dataSlice = () => {
 79 
  const dataSlice = () => {
80 
    let infoFollows = [...widgetData]
 80 
    let infoFollows = [...widgetData];
81 
    if (!lookMore) {
 81 
    if (!lookMore) {
Línea 82... Línea 82...
82 
      infoFollows = infoFollows.slice(0, 3)
 82 
      infoFollows = infoFollows.slice(0, 3);
83 
    }
 83 
    }
84 
    return infoFollows
 84 
    return infoFollows;
Línea 85... Línea 85...
85 
  }
 85 
  };
86 
 
 86 
 
87 
  const toggleList = () => {
 87 
  const toggleList = () => {
Línea 88... Línea 88...
88 
    setDisplayMenu(!displayMenu)
 88 
    setDisplayMenu(!displayMenu);
89 
  }
 89 
  };
90 
 
 90 
 
91 
  useEffect(() => {
 91 
  useEffect(() => {
Línea 104... Línea 104...
104 
      {widgetData.length ? (
 104 
      {widgetData.length ? (
105 
        <WidgetList show={displayMenu}>
 105 
        <WidgetList show={displayMenu}>
106 
          {dataSlice().map(({ id, name, profile, image }) => (
 106 
          {dataSlice().map(({ id, name, profile, image }) => (
107 
            <ListItem key={id}>
 107 
            <ListItem key={id}>
108 
              <Link to={profile}>
 108 
              <Link to={profile}>
109 
                <Avatar imageUrl={image} size='md' name={name} />
 109 
                <Avatar imageUrl={image} size="md" name={name} />
110 
                <span>{name}</span>
 110 
                <span>{name}</span>
111 
              </Link>
 111 
              </Link>
112 
            </ListItem>
 112 
            </ListItem>
113 
          ))}
 113 
          ))}
114 
        </WidgetList>
 114 
        </WidgetList>
Línea 116... Línea 116...
116 
        <EmptySection message={labels.empty} />
 116 
        <EmptySection message={labels.empty} />
117 
      )}
 117 
      )}
Línea 118... Línea 118...
118 
 
 118 
 
119 
      {widgetData.length >= 3 && (
 119 
      {widgetData.length >= 3 && (
120 
        <ListItem
 120 
        <ListItem
121 
          as='button'
 121 
          as="button"
122 
          className='justify-content-center cursor-pointer py-2'
 122 
          className="justify-content-center cursor-pointer py-2"
123 
          onClick={() => setLookMore(!lookMore)}
 123 
          onClick={() => setLookMore(!lookMore)}
124 
        >
 124 
        >
125 
          <span>{lookMore ? labels.view_less : labels.view_more}</span>
 125 
          <span>{lookMore ? labels.view_less : labels.view_more}</span>
126 
        </ListItem>
 126 
        </ListItem>
127 
      )}
 127 
      )}
128 
    </GroupWidget>
 128 
    </GroupWidget>
129 
  )
 129 
  );
Línea 130... Línea 130...
130 
}
 130 
};