@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/user/profile-post-item.jsx

@@ -1,226 +0,0 @@
-import PropTypes from 'prop-types';
-import { useRef, useState, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Card from '@mui/material/Card';
-import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
-import Avatar from '@mui/material/Avatar';
-import { alpha } from '@mui/material/styles';
-import Checkbox from '@mui/material/Checkbox';
-import InputBase from '@mui/material/InputBase';
-import IconButton from '@mui/material/IconButton';
-import CardHeader from '@mui/material/CardHeader';
-import Typography from '@mui/material/Typography';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import AvatarGroup, { avatarGroupClasses } from '@mui/material/AvatarGroup';
-
-import { useMockedUser } from 'src/hooks/use-mocked-user';
-
-import { fDate } from 'src/utils/format-time';
-import { fShortenNumber } from 'src/utils/format-number';
-
-import Image from 'src/components/image';
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-export default function ProfilePostItem({ post }) {
-  const { user } = useMockedUser();
-
-  const commentRef = useRef(null);
-
-  const fileRef = useRef(null);
-
-  const [message, setMessage] = useState('');
-
-  const handleChangeMessage = useCallback((event) => {
-    setMessage(event.target.value);
-  }, []);
-
-  const handleAttach = useCallback(() => {
-    if (fileRef.current) {
-      fileRef.current.click();
-    }
-  }, []);
-
-  const handleClickComment = useCallback(() => {
-    if (commentRef.current) {
-      commentRef.current.focus();
-    }
-  }, []);
-
-  const renderHead = (
-    <CardHeader
-      disableTypography
-      avatar={<Avatar src={user?.photoURL} alt={user?.displayName} />}
-      title={
-        <Link color="inherit" variant="subtitle1">
-          {user?.displayName}
-        </Link>
-      }
-      subheader={
-        <Box sx={{ color: 'text.disabled', typography: 'caption', mt: 0.5 }}>
-          {fDate(post.createdAt)}
-        </Box>
-      }
-      action={
-        <IconButton>
-          <Iconify icon="eva:more-vertical-fill" />
-        </IconButton>
-      }
-    />
-  );
-
-  const renderCommentList = (
-    <Stack spacing={1.5} sx={{ px: 3, pb: 2 }}>
-      {post.comments.map((comment) => (
-        <Stack key={comment.id} direction="row" spacing={2}>
-          <Avatar alt={comment.author.name} src={comment.author.avatarUrl} />
-
-          <Paper
-            sx={{
-              p: 1.5,
-              flexGrow: 1,
-              bgcolor: 'background.neutral',
-            }}
-          >
-            <Stack
-              sx={{ mb: 0.5 }}
-              alignItems={{ sm: 'center' }}
-              justifyContent="space-between"
-              direction={{ xs: 'column', sm: 'row' }}
-            >
-              <Box sx={{ typography: 'subtitle2' }}>{comment.author.name}</Box>
-
-              <Box sx={{ typography: 'caption', color: 'text.disabled' }}>
-                {fDate(comment.createdAt)}
-              </Box>
-            </Stack>
-
-            <Box sx={{ typography: 'body2', color: 'text.secondary' }}>{comment.message}</Box>
-          </Paper>
-        </Stack>
-      ))}
-    </Stack>
-  );
-
-  const renderInput = (
-    <Stack
-      spacing={2}
-      direction="row"
-      alignItems="center"
-      sx={{
-        p: (theme) => theme.spacing(0, 3, 3, 3),
-      }}
-    >
-      <Avatar src={user?.photoURL} alt={user?.displayName} />
-
-      <InputBase
-        fullWidth
-        value={message}
-        inputRef={commentRef}
-        placeholder="Write a comment…"
-        onChange={handleChangeMessage}
-        endAdornment={
-          <InputAdornment position="end" sx={{ mr: 1 }}>
-            <IconButton size="small" onClick={handleAttach}>
-              <Iconify icon="solar:gallery-add-bold" />
-            </IconButton>
-
-            <IconButton size="small">
-              <Iconify icon="eva:smiling-face-fill" />
-            </IconButton>
-          </InputAdornment>
-        }
-        sx={{
-          pl: 1.5,
-          height: 40,
-          borderRadius: 1,
-          border: (theme) => `solid 1px ${alpha(theme.palette.grey[500], 0.32)}`,
-        }}
-      />
-
-      <input type="file" ref={fileRef} style={{ display: 'none' }} />
-    </Stack>
-  );
-
-  const renderActions = (
-    <Stack
-      direction="row"
-      alignItems="center"
-      sx={{
-        p: (theme) => theme.spacing(2, 3, 3, 3),
-      }}
-    >
-      <FormControlLabel
-        control={
-          <Checkbox
-            defaultChecked
-            color="error"
-            icon={<Iconify icon="solar:heart-bold" />}
-            checkedIcon={<Iconify icon="solar:heart-bold" />}
-          />
-        }
-        label={fShortenNumber(post.personLikes.length)}
-        sx={{ mr: 1 }}
-      />
-
-      {!!post.personLikes.length && (
-        <AvatarGroup
-          sx={{
-            [`& .${avatarGroupClasses.avatar}`]: {
-              width: 32,
-              height: 32,
-            },
-          }}
-        >
-          {post.personLikes.map((person) => (
-            <Avatar key={person.name} alt={person.name} src={person.avatarUrl} />
-          ))}
-        </AvatarGroup>
-      )}
-
-      <Box sx={{ flexGrow: 1 }} />
-
-      <IconButton onClick={handleClickComment}>
-        <Iconify icon="solar:chat-round-dots-bold" />
-      </IconButton>
-
-      <IconButton>
-        <Iconify icon="solar:share-bold" />
-      </IconButton>
-    </Stack>
-  );
-
-  return (
-    <Card>
-      {renderHead}
-
-      <Typography
-        variant="body2"
-        sx={{
-          p: (theme) => theme.spacing(3, 3, 2, 3),
-        }}
-      >
-        {post.message}
-      </Typography>
-
-      <Box sx={{ p: 1 }}>
-        <Image alt={post.media} src={post.media} ratio="16/9" sx={{ borderRadius: 1.5 }} />
-      </Box>
-
-      {renderActions}
-
-      {!!post.comments.length && renderCommentList}
-
-      {renderInput}
-    </Card>
-  );
-}
-
-ProfilePostItem.propTypes = {
-  post: PropTypes.object,
-};

package/minimal/src/sections/user/user-card-list.jsx

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-
-import UserCard from './user-card';
-
-// ----------------------------------------------------------------------
-
-export default function UserCardList({ users }) {
-  return (
-    <Box
-      gap={3}
-      display="grid"
-      gridTemplateColumns={{
-        xs: 'repeat(1, 1fr)',
-        sm: 'repeat(2, 1fr)',
-        md: 'repeat(3, 1fr)',
-      }}
-    >
-      {users.map((user) => (
-        <UserCard key={user.id} user={user} />
-      ))}
-    </Box>
-  );
-}
-
-UserCardList.propTypes = {
-  users: PropTypes.array,
-};

package/minimal/src/sections/user/user-card.jsx

@@ -1,124 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Avatar from '@mui/material/Avatar';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import ListItemText from '@mui/material/ListItemText';
-import { alpha, useTheme } from '@mui/material/styles';
-
-import { fShortenNumber } from 'src/utils/format-number';
-
-import { _socials } from 'src/_mock';
-import { AvatarShape } from 'src/assets/illustrations';
-
-import Image from 'src/components/image';
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-export default function UserCard({ user }) {
-  const theme = useTheme();
-
-  const { name, coverUrl, role, totalFollowers, totalPosts, avatarUrl, totalFollowing } = user;
-
-  return (
-    <Card sx={{ textAlign: 'center' }}>
-      <Box sx={{ position: 'relative' }}>
-        <AvatarShape
-          sx={{
-            left: 0,
-            right: 0,
-            zIndex: 10,
-            mx: 'auto',
-            bottom: -26,
-            position: 'absolute',
-          }}
-        />
-
-        <Avatar
-          alt={name}
-          src={avatarUrl}
-          sx={{
-            width: 64,
-            height: 64,
-            zIndex: 11,
-            left: 0,
-            right: 0,
-            bottom: -32,
-            mx: 'auto',
-            position: 'absolute',
-          }}
-        />
-
-        <Image
-          src={coverUrl}
-          alt={coverUrl}
-          ratio="16/9"
-          overlay={alpha(theme.palette.grey[900], 0.48)}
-        />
-      </Box>
-
-      <ListItemText
-        sx={{ mt: 7, mb: 1 }}
-        primary={name}
-        secondary={role}
-        primaryTypographyProps={{ typography: 'subtitle1' }}
-        secondaryTypographyProps={{ component: 'span', mt: 0.5 }}
-      />
-
-      <Stack direction="row" alignItems="center" justifyContent="center" sx={{ mb: 2.5 }}>
-        {_socials.map((social) => (
-          <IconButton
-            key={social.name}
-            sx={{
-              color: social.color,
-              '&:hover': {
-                bgcolor: alpha(social.color, 0.08),
-              },
-            }}
-          >
-            <Iconify icon={social.icon} />
-          </IconButton>
-        ))}
-      </Stack>
-
-      <Divider sx={{ borderStyle: 'dashed' }} />
-
-      <Box
-        display="grid"
-        gridTemplateColumns="repeat(3, 1fr)"
-        sx={{ py: 3, typography: 'subtitle1' }}
-      >
-        <div>
-          <Typography variant="caption" component="div" sx={{ mb: 0.5, color: 'text.secondary' }}>
-            Follower
-          </Typography>
-          {fShortenNumber(totalFollowers)}
-        </div>
-
-        <div>
-          <Typography variant="caption" component="div" sx={{ mb: 0.5, color: 'text.secondary' }}>
-            Following
-          </Typography>
-
-          {fShortenNumber(totalFollowing)}
-        </div>
-
-        <div>
-          <Typography variant="caption" component="div" sx={{ mb: 0.5, color: 'text.secondary' }}>
-            Total Post
-          </Typography>
-          {fShortenNumber(totalPosts)}
-        </div>
-      </Box>
-    </Card>
-  );
-}
-
-UserCard.propTypes = {
-  user: PropTypes.object,
-};

package/minimal/src/sections/user/user-new-edit-form.jsx

@@ -1,285 +0,0 @@
-import * as Yup from 'yup';
-import PropTypes from 'prop-types';
-import { useMemo, useCallback } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import Switch from '@mui/material/Switch';
-import Grid from '@mui/material/Unstable_Grid2';
-import Typography from '@mui/material/Typography';
-import LoadingButton from '@mui/lab/LoadingButton';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-import { paths } from 'src/routes/paths';
-import { useRouter } from 'src/routes/hooks';
-
-import { fData } from 'src/utils/format-number';
-
-import { countries } from 'src/assets/data';
-
-import Label from 'src/components/label';
-import Iconify from 'src/components/iconify';
-import { useSnackbar } from 'src/components/snackbar';
-import FormProvider, {
-  RHFSwitch,
-  RHFTextField,
-  RHFUploadAvatar,
-  RHFAutocomplete,
-} from 'src/components/hook-form';
-
-// ----------------------------------------------------------------------
-
-export default function UserNewEditForm({ currentUser }) {
-  const router = useRouter();
-
-  const { enqueueSnackbar } = useSnackbar();
-
-  const NewUserSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
-    email: Yup.string().required('Email is required').email('Email must be a valid email address'),
-    phoneNumber: Yup.string().required('Phone number is required'),
-    address: Yup.string().required('Address is required'),
-    country: Yup.string().required('Country is required'),
-    company: Yup.string().required('Company is required'),
-    state: Yup.string().required('State is required'),
-    city: Yup.string().required('City is required'),
-    role: Yup.string().required('Role is required'),
-    zipCode: Yup.string().required('Zip code is required'),
-    avatarUrl: Yup.mixed().nullable().required('Avatar is required'),
-    // not required
-    status: Yup.string(),
-    isVerified: Yup.boolean(),
-  });
-
-  const defaultValues = useMemo(
-    () => ({
-      name: currentUser?.name || '',
-      city: currentUser?.city || '',
-      role: currentUser?.role || '',
-      email: currentUser?.email || '',
-      state: currentUser?.state || '',
-      status: currentUser?.status || '',
-      address: currentUser?.address || '',
-      country: currentUser?.country || '',
-      zipCode: currentUser?.zipCode || '',
-      company: currentUser?.company || '',
-      avatarUrl: currentUser?.avatarUrl || null,
-      phoneNumber: currentUser?.phoneNumber || '',
-      isVerified: currentUser?.isVerified || true,
-    }),
-    [currentUser]
-  );
-
-  const methods = useForm({
-    resolver: yupResolver(NewUserSchema),
-    defaultValues,
-  });
-
-  const {
-    reset,
-    watch,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
-
-  const values = watch();
-
-  const onSubmit = handleSubmit(async (data) => {
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      reset();
-      enqueueSnackbar(currentUser ? 'Update success!' : 'Create success!');
-      router.push(paths.dashboard.user.list);
-      console.info('DATA', data);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  const handleDrop = useCallback(
-    (acceptedFiles) => {
-      const file = acceptedFiles[0];
-
-      const newFile = Object.assign(file, {
-        preview: URL.createObjectURL(file),
-      });
-
-      if (file) {
-        setValue('avatarUrl', newFile, { shouldValidate: true });
-      }
-    },
-    [setValue]
-  );
-
-  return (
-    <FormProvider methods={methods} onSubmit={onSubmit}>
-      <Grid container spacing={3}>
-        <Grid xs={12} md={4}>
-          <Card sx={{ pt: 10, pb: 5, px: 3 }}>
-            {currentUser && (
-              <Label
-                color={
-                  (values.status === 'active' && 'success') ||
-                  (values.status === 'banned' && 'error') ||
-                  'warning'
-                }
-                sx={{ position: 'absolute', top: 24, right: 24 }}
-              >
-                {values.status}
-              </Label>
-            )}
-
-            <Box sx={{ mb: 5 }}>
-              <RHFUploadAvatar
-                name="avatarUrl"
-                maxSize={3145728}
-                onDrop={handleDrop}
-                helperText={
-                  <Typography
-                    variant="caption"
-                    sx={{
-                      mt: 3,
-                      mx: 'auto',
-                      display: 'block',
-                      textAlign: 'center',
-                      color: 'text.disabled',
-                    }}
-                  >
-                    Allowed *.jpeg, *.jpg, *.png, *.gif
-                    <br /> max size of {fData(3145728)}
-                  </Typography>
-                }
-              />
-            </Box>
-
-            {currentUser && (
-              <FormControlLabel
-                labelPlacement="start"
-                control={
-                  <Controller
-                    name="status"
-                    control={control}
-                    render={({ field }) => (
-                      <Switch
-                        {...field}
-                        checked={field.value !== 'active'}
-                        onChange={(event) =>
-                          field.onChange(event.target.checked ? 'banned' : 'active')
-                        }
-                      />
-                    )}
-                  />
-                }
-                label={
-                  <>
-                    <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
-                      Banned
-                    </Typography>
-                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                      Apply disable account
-                    </Typography>
-                  </>
-                }
-                sx={{ mx: 0, mb: 3, width: 1, justifyContent: 'space-between' }}
-              />
-            )}
-
-            <RHFSwitch
-              name="isVerified"
-              labelPlacement="start"
-              label={
-                <>
-                  <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
-                    Email Verified
-                  </Typography>
-                  <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                    Disabling this will automatically send the user a verification email
-                  </Typography>
-                </>
-              }
-              sx={{ mx: 0, width: 1, justifyContent: 'space-between' }}
-            />
-
-            {currentUser && (
-              <Stack justifyContent="center" alignItems="center" sx={{ mt: 3 }}>
-                <Button variant="soft" color="error">
-                  Delete User
-                </Button>
-              </Stack>
-            )}
-          </Card>
-        </Grid>
-
-        <Grid xs={12} md={8}>
-          <Card sx={{ p: 3 }}>
-            <Box
-              rowGap={3}
-              columnGap={2}
-              display="grid"
-              gridTemplateColumns={{
-                xs: 'repeat(1, 1fr)',
-                sm: 'repeat(2, 1fr)',
-              }}
-            >
-              <RHFTextField name="name" label="Full Name" />
-              <RHFTextField name="email" label="Email Address" />
-              <RHFTextField name="phoneNumber" label="Phone Number" />
-
-              <RHFAutocomplete
-                name="country"
-                label="Country"
-                options={countries.map((country) => country.label)}
-                getOptionLabel={(option) => option}
-                isOptionEqualToValue={(option, value) => option === value}
-                renderOption={(props, option) => {
-                  const { code, label, phone } = countries.filter(
-                    (country) => country.label === option
-                  )[0];
-
-                  if (!label) {
-                    return null;
-                  }
-
-                  return (
-                    <li {...props} key={label}>
-                      <Iconify
-                        key={label}
-                        icon={`circle-flags:${code.toLowerCase()}`}
-                        width={28}
-                        sx={{ mr: 1 }}
-                      />
-                      {label} ({code}) +{phone}
-                    </li>
-                  );
-                }}
-              />
-
-              <RHFTextField name="state" label="State/Region" />
-              <RHFTextField name="city" label="City" />
-              <RHFTextField name="address" label="Address" />
-              <RHFTextField name="zipCode" label="Zip/Code" />
-              <RHFTextField name="company" label="Company" />
-              <RHFTextField name="role" label="Role" />
-            </Box>
-
-            <Stack alignItems="flex-end" sx={{ mt: 3 }}>
-              <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
-                {!currentUser ? 'Create User' : 'Save Changes'}
-              </LoadingButton>
-            </Stack>
-          </Card>
-        </Grid>
-      </Grid>
-    </FormProvider>
-  );
-}
-
-UserNewEditForm.propTypes = {
-  currentUser: PropTypes.object,
-};